From 689ba92c5ff852e70b3dc50429537a0667fdcee8 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 27 Apr 2023 13:14:12 +0200 Subject: [PATCH] add option to remove descriptions from css output --- .changeset/pretty-apes-pump.md | 5 +++++ src/PrimerStyleDictionary.ts | 6 ++++++ src/formats/cssThemed.ts | 10 +++++++--- src/formats/cssVariables.ts | 26 ++++++++++++++++++++++++++ src/formats/cssWrapMediaQuery.ts | 8 ++++++-- src/formats/index.ts | 1 + src/platforms/css.ts | 3 +++ src/tokens/functional/size/border.json | 3 ++- 8 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 .changeset/pretty-apes-pump.md create mode 100644 src/formats/cssVariables.ts diff --git a/.changeset/pretty-apes-pump.md b/.changeset/pretty-apes-pump.md new file mode 100644 index 000000000..2620703a9 --- /dev/null +++ b/.changeset/pretty-apes-pump.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +add option to remove descriptions from css output diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index fb0c7e9ff..9ad6c2b46 100644 --- a/src/PrimerStyleDictionary.ts +++ b/src/PrimerStyleDictionary.ts @@ -26,6 +26,7 @@ import { cssCustomMedia, jsonOneDimensional, cssWrapMediaQuery, + cssVariables, } from './formats' /** @@ -53,6 +54,11 @@ StyleDictionary.registerFormat({ formatter: cssWrapMediaQuery, }) +StyleDictionary.registerFormat({ + name: 'css/variables', + formatter: cssVariables, +}) + StyleDictionary.registerFormat({ name: 'scss/mixin-css-variables', formatter: scssMixinCssVariables, diff --git a/src/formats/cssThemed.ts b/src/formats/cssThemed.ts index 68bec4971..a8a2d39e1 100644 --- a/src/formats/cssThemed.ts +++ b/src/formats/cssThemed.ts @@ -1,6 +1,7 @@ import StyleDictionary from 'style-dictionary' import type {FormatterArguments} from 'style-dictionary/types/Format' import {format} from 'prettier' +import type {LineFormatting} from 'style-dictionary/types/FormatHelpers' const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers /** @@ -11,18 +12,21 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers */ export const cssThemed: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => { const {selector, selectorLight, selectorDark} = options - const {outputReferences} = options + const {outputReferences, descriptions} = options + const formatting: LineFormatting = { + commentStyle: descriptions ? 'long' : 'none', + } // add file header const output = [fileHeader({file})] // add single theme css output.push(`${selector || ':root'}${selectorLight ? `, ${selectorLight}` : ''}{ - ${formattedVariables({format: 'css', dictionary, outputReferences})} + ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})} }`) // add auto dark theme css if (selectorDark) { output.push(`@media (prefers-color-scheme: dark) { ${selectorDark} { - ${formattedVariables({format: 'css', dictionary, outputReferences})} + ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})} } }`) } diff --git a/src/formats/cssVariables.ts b/src/formats/cssVariables.ts new file mode 100644 index 000000000..914b5c4c9 --- /dev/null +++ b/src/formats/cssVariables.ts @@ -0,0 +1,26 @@ +import StyleDictionary from 'style-dictionary' +import type {FormatterArguments} from 'style-dictionary/types/Format' +import type {LineFormatting} from 'style-dictionary/types/FormatHelpers' +const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers + +/** + * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section + * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts) + * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string` + * @returns formatted `string` + */ +export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => { + const selector = options.selector ? options.selector : `:root` + const {outputReferences, descriptions} = options + const formatting: LineFormatting = { + commentStyle: descriptions ? 'long' : 'none', + } + // add file header + + return `${fileHeader({file})}${selector} {\n${formattedVariables({ + format: 'css', + dictionary, + outputReferences, + formatting, + })}\n}\n` +} diff --git a/src/formats/cssWrapMediaQuery.ts b/src/formats/cssWrapMediaQuery.ts index 3b37eeb5f..f99bbb0d0 100644 --- a/src/formats/cssWrapMediaQuery.ts +++ b/src/formats/cssWrapMediaQuery.ts @@ -1,6 +1,7 @@ import StyleDictionary from 'style-dictionary' import type {FormatterArguments} from 'style-dictionary/types/Format' import {format} from 'prettier' +import type {LineFormatting} from 'style-dictionary/types/FormatHelpers' const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers /** @@ -9,7 +10,10 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers * @returns formatted `string` */ export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => { - const {outputReferences} = options + const {outputReferences, descriptions} = options + const formatting: LineFormatting = { + commentStyle: descriptions ? 'long' : 'none', + } // get specific media query or use screen const mediaQuery = options.mediaQuery?.[file.destination] || 'screen' // add file header @@ -17,7 +21,7 @@ export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, option // add meadia query output.push(`@media ${mediaQuery} {\n:root {`) // add tokens - output.push(formattedVariables({format: 'css', dictionary, outputReferences})) + output.push(formattedVariables({format: 'css', dictionary, outputReferences, formatting})) // close media query output.push(`}\n}`) // return prettified diff --git a/src/formats/index.ts b/src/formats/index.ts index c7b232975..6e2067d42 100644 --- a/src/formats/index.ts +++ b/src/formats/index.ts @@ -1,6 +1,7 @@ export {cssThemed} from './cssThemed' export {cssCustomMedia} from './cssCustomMedia' export {cssWrapMediaQuery} from './cssWrapMediaQuery' +export {cssVariables} from './cssVariables' export {javascriptCommonJs} from './javascriptCommonJs' export {javascriptEsm} from './javascriptEsm' export {jsonNestedPrefixed} from './jsonNestedPrefixed' diff --git a/src/platforms/css.ts b/src/platforms/css.ts index 5528605a6..99b4a74da 100644 --- a/src/platforms/css.ts +++ b/src/platforms/css.ts @@ -44,6 +44,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) options: { showFileHeader: false, outputReferences: false, + descriptions: false, selector, selectorLight, selectorDark, @@ -56,6 +57,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) filter: token => isSource(token) && options?.themed !== true, options: { showFileHeader: false, + descriptions: false, ...options?.options, }, }, @@ -77,6 +79,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) 'src/tokens/functional/size/size-fine.json', ]), options: { + descriptions: false, showFileHeader: false, mediaQuery: { 'css/functional/size/size-fine.css': '(pointer: fine)', diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json index 1e8d2dd06..13f5324bd 100644 --- a/src/tokens/functional/size/border.json +++ b/src/tokens/functional/size/border.json @@ -1,7 +1,8 @@ { "boxShadow": { "thin": { - "value": "inset 0 0 0 {borderWidth.thin}" + "value": "inset 0 0 0 {borderWidth.thin}", + "description": "Thin shadow for borders" }, "thick": { "value": "inset 0 0 0 {borderWidth.thick}"