From 1a232e63246038ab45556c55d2fcafce67a0d6bb Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 9 Apr 2024 09:13:14 +0200 Subject: [PATCH] rm scss for v8 --- .changeset/thick-carrots-obey.md | 5 +++ scripts/buildTokens.ts | 3 +- src/PrimerStyleDictionary.ts | 8 +--- src/formats/index.ts | 1 - src/formats/scssMixinCssVariables.test.ts | 30 -------------- src/formats/scssMixinCssVariables.ts | 25 ------------ src/platforms/index.ts | 1 - src/platforms/scss.ts | 50 ----------------------- 8 files changed, 7 insertions(+), 116 deletions(-) create mode 100644 .changeset/thick-carrots-obey.md delete mode 100644 src/formats/scssMixinCssVariables.test.ts delete mode 100644 src/formats/scssMixinCssVariables.ts delete mode 100644 src/platforms/scss.ts diff --git a/.changeset/thick-carrots-obey.md b/.changeset/thick-carrots-obey.md new file mode 100644 index 000000000..589aa0d47 --- /dev/null +++ b/.changeset/thick-carrots-obey.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': minor +--- + +Removes scss output for v8 tokens diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index a30c731b5..42656d231 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -1,7 +1,7 @@ import type StyleDictionary from 'style-dictionary' import {PrimerStyleDictionary} from '~/src/PrimerStyleDictionary' import {copyFromDir} from '~/src/utilities' -import {deprecatedJson, css, docJson, scss, fallbacks} from '~/src/platforms' +import {deprecatedJson, css, docJson, fallbacks} from '~/src/platforms' import type {ConfigGeneratorOptions, StyleDictionaryConfigGenerator} from '~/src/types/StyleDictionaryConfigGenerator' import type {TokenBuildInput} from '~/src/types/TokenBuildInput' import glob from 'fast-glob' @@ -26,7 +26,6 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = ( include, platforms: { css: css(`css/${filename}.css`, options.prefix, options.buildPath, {themed: options.themed}), - scss: scss(`scss/${filename}.scss`, options.prefix, options.buildPath), docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath), fallbacks: fallbacks(`fallbacks/${filename}.json`, options.prefix, options.buildPath), ...platforms, diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index 3f62989f2..1bffc0305 100644 --- a/src/PrimerStyleDictionary.ts +++ b/src/PrimerStyleDictionary.ts @@ -23,7 +23,6 @@ import { typographyToCss, } from './transformers' import { - scssMixinCssVariables, javascriptCommonJs, javascriptEsm, typescriptExportDefinition, @@ -67,11 +66,6 @@ StyleDictionary.registerFormat({ formatter: cssVariables, }) -StyleDictionary.registerFormat({ - name: 'scss/mixin-css-variables', - formatter: scssMixinCssVariables, -}) - StyleDictionary.registerFormat({ name: 'javascript/esm', formatter: javascriptEsm, @@ -220,7 +214,7 @@ StyleDictionary.registerTransform({ * @name {@link PrimerStyleDictionary} * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers * @parsers [w3cJsonParser](https://github.com/primer/primitives/blob/main/config//parsers/w3c-json-parser.ts) - * @formats [scss/mixin-css-variables](https://github.com/primer/primitives/blob/main/config/formats/scss-mixin-css-variables.ts), [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts) + * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts) * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts) */ export const PrimerStyleDictionary: StyleDictionary.Core = StyleDictionary diff --git a/src/formats/index.ts b/src/formats/index.ts index 520bd2263..2e9de1a95 100644 --- a/src/formats/index.ts +++ b/src/formats/index.ts @@ -8,5 +8,4 @@ export {javascriptEsm} from './javascriptEsm' export {jsonNestedPrefixed} from './jsonNestedPrefixed' export {jsonOneDimensional} from './jsonOneDimensional' export {jsonPostCssFallback} from './jsonPostCssFallback' -export {scssMixinCssVariables} from './scssMixinCssVariables' export {typescriptExportDefinition} from './typescriptExportDefinition' diff --git a/src/formats/scssMixinCssVariables.test.ts b/src/formats/scssMixinCssVariables.test.ts deleted file mode 100644 index 74c937024..000000000 --- a/src/formats/scssMixinCssVariables.test.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {scssMixinCssVariables} from './scssMixinCssVariables' -import {getMockFormatterArguments} from '~/src/test-utilities' -import {format} from 'prettier' - -describe('Format: Scss with sss variables', () => { - it('Formats tokens', () => { - const mixinName = 'mixTest' - const input = getMockFormatterArguments({ - options: { - mixinName, - }, - }) - - const expectedOutput = format( - `@mixin ${mixinName} { - & { - --red: transformedValue; - } - }`, - {parser: 'scss', printWidth: 500}, - ) - expect(scssMixinCssVariables(input)).toStrictEqual(expectedOutput) - }) - - it('throws an error if options.mixinName is missing', () => { - expect(() => { - scssMixinCssVariables(getMockFormatterArguments()) - }).toThrow('Missing argument for scssMixinCssVariables formatter: "options.mixinName"') - }) -}) diff --git a/src/formats/scssMixinCssVariables.ts b/src/formats/scssMixinCssVariables.ts deleted file mode 100644 index 1f8d68b0f..000000000 --- a/src/formats/scssMixinCssVariables.ts +++ /dev/null @@ -1,25 +0,0 @@ -import StyleDictionary from 'style-dictionary' -import {format} from 'prettier' -import type {FormatterArguments} from 'style-dictionary/types/Format' - -const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers - -/** - * @description Converts `StyleDictionary.dictionary.tokens` to scss mixin with css variables - * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts) - * @returns formatted `string` - */ -export const scssMixinCssVariables: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => { - if (!options.mixinName) throw new Error('Missing argument for scssMixinCssVariables formatter: "options.mixinName"') - - const {outputReferences, mixinName} = options - - const output = `${fileHeader({file})}@mixin ${mixinName} {\n & {\n${formattedVariables({ - format: 'css', - dictionary, - outputReferences, - })}\n }\n}\n` - - // return prettified - return format(output, {parser: 'scss', printWidth: 500}) -} diff --git a/src/platforms/index.ts b/src/platforms/index.ts index 7dcab58fb..486bfad6b 100644 --- a/src/platforms/index.ts +++ b/src/platforms/index.ts @@ -5,6 +5,5 @@ export {fallbacks} from './fallbacks' export {figma} from './figma' export {javascript} from './javascript' export {json} from './json' -export {scss} from './scss' export {typeDefinitions} from './typeDefinitions' export {typescript} from './typescript' diff --git a/src/platforms/scss.ts b/src/platforms/scss.ts deleted file mode 100644 index 86fabeed5..000000000 --- a/src/platforms/scss.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type StyleDictionary from 'style-dictionary' -import type {PlatformInitializer} from '~/src/types/PlatformInitializer' -import {isSource} from '~/src/filters' - -const getFilenameFromPath = (path: string): string => { - // remove extensions - path = path.split('.')[0] - // split into parts - const parts = path.split('/') - // return last part of path - return parts[parts.length - 1] -} - -export const scss: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => { - // set mixing name - const mixinName = `primer-colors-${getFilenameFromPath(outputFile)}` - // - return { - prefix, - buildPath, - transforms: [ - 'name/pathToKebabCase', - 'color/hex', - 'color/hexMix', - 'color/hexAlpha', - 'dimension/rem', - 'duration/css', - 'shadow/css', - 'border/css', - 'typography/css', - 'fontFamily/css', - 'fontWeight/number', - ], - options: { - showFileHeader: false, - basePxFontSize: 16, - }, - files: [ - { - destination: outputFile, - filter: isSource, - format: `scss/variables`, - options: { - mixinName, - outputReferences: false, - }, - }, - ], - } -}