Add option to remove descriptions from css output

.changeset/pretty-apes-pump.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+add option to remove descriptions from css output

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,

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})}
       }
     }`)
   }

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`
+}

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,15 +10,18 @@ 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
   const output = [fileHeader({file})]
   // 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

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'

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)',

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}"