simplified css-variables format according to SD v4

packages/cli/src/tokens/configs.ts

@@ -61,6 +61,8 @@ type GetConfig = (options: {
 }) => Config;
 
 export const tokensConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
+  const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
+
   return {
     log: { verbosity: 'verbose' },
     preprocessors: ['tokens-studio'],
@@ -72,20 +74,22 @@ export const tokensConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
         fileName: mode,
         folderName: theme,
         basePxFontSize,
+        selector,
         //
         prefix,
         buildPath: `${outPath}/${theme}/`,
         transformGroup: 'fds/css',
         actions: [makeEntryFile.name],
         files: [
           {
-            destination: `color-modes/${mode}.css`,
+            destination: `${mode}.css`,
             format: cssVariables.name,
+            filter: (token) => !token.isSource,
           },
         ],
         options: {
           fileHeader,
-          includeReferences: (token: TransformedToken) => {
+          outputReferences: (token: TransformedToken) => {
             if (
               R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) &&
               R.includes('semantic/color', token.filePath)

packages/cli/src/tokens/formats/css-variables.ts

@@ -1,69 +1,30 @@
-import type { TransformedToken, Format } from 'style-dictionary/types';
-import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from 'style-dictionary/utils';
-
-type IncludeReferences = (token: TransformedToken) => boolean;
+import type { Format } from 'style-dictionary/types';
+import { fileHeader, createPropertyFormatter } from 'style-dictionary/utils';
 
 /**
  *  CSS variables format with option to include source references for matched token through `options.referencesFilter`
  */
 export const cssVariables: Format = {
   name: 'ds/css-variables',
   format: async function ({ dictionary, file, options, platform }) {
-    const { allTokens, unfilteredTokens } = dictionary;
-    const { usesDtcg, outputReferences } = options;
-    const { mode } = platform;
+    const { allTokens } = dictionary;
+    const { outputReferences } = options;
+    const { selector } = platform;
+
+    const header = await fileHeader({ file });
 
-    const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
-    const includeReferences = options.includeReferences as IncludeReferences;
-    let referencedTokens: TransformedToken[] = [];
     const format = createPropertyFormatter({
       outputReferences,
       dictionary,
       format: 'css',
     });
 
-    const formatWithReference = createPropertyFormatter({
-      outputReferences: true,
-      dictionary,
-      format: 'css',
-    });
-
-    const parseToken = (token: TransformedToken, ignoreSource?: boolean) => {
-      const originalValue = (usesDtcg ? token.original.$value : token.original.value) as string;
-
-      if (usesReferences(originalValue) && includeReferences(token)) {
-        const refs = getReferences(originalValue, unfilteredTokens ? unfilteredTokens : {});
-
-        referencedTokens = [...referencedTokens, ...refs.filter((x) => x.isSource)];
-
-        return formatWithReference(token);
-      }
-
-      if (ignoreSource && !token.isSource) {
-        return format(token);
-      }
-    };
-
-    const tokens = allTokens.map((t) => parseToken(t, true)).filter((x) => x);
-
-    const referenceTokens = referencedTokens
-      .reduce<TransformedToken[]>((acc, token) => {
-        if (acc.find((x) => x.name === token.name)) {
-          return acc;
-        }
-
-        return [...acc, token];
-      }, [])
-      .map((token) => format(token))
-      .filter((formattedValue) => formattedValue);
+    const tokens = allTokens.map(format);
 
-    return fileHeader({ file }).then(
-      (fileHeaderText) => `
-${fileHeaderText}
-${selector} {${referenceTokens.length > 0 ? referenceTokens.join('\n') : ''}
+    return `
+${header}
+${selector} {
 ${tokens.join('\n')}
-}
-      `,
-    );
+}\n`;
   },
 };