Add grommet commonjs export

grommet · Feb 3, 2025 · 1c5aca5 · 1c5aca5
1 parent b3f9d80
commit 1c5aca5
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 1 deletion.
diff --git a/design-tokens/package.json b/design-tokens/package.json
@@ -11,7 +11,10 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.cjs"
     },
-    "./grommet": "./dist/grommet/index.js",
+    "./grommet": {
+      "import": "./dist/grommet/index.js",
+      "require": "./dist/grommet/cjs/index.cjs"
+    },
     "./docs": "./dist/docs/index.js",
     "./dist/css/*.css": {
       "import": "./dist/css/*.css",

diff --git a/design-tokens/src/HPEStyleDictionary.ts b/design-tokens/src/HPEStyleDictionary.ts
@@ -1,6 +1,7 @@
 import { StyleDictionary } from 'style-dictionary-utils';
 import {
   commonJs,
+  commonJsGrommetRefs,
   cssColorModes,
   cssBreakpoints,
   esmGrommetRefs,
@@ -29,6 +30,10 @@ HPEStyleDictionary.registerFormat({
   name: 'javascript/commonJs',
   format: commonJs,
 });
+HPEStyleDictionary.registerFormat({
+  name: `commonJsGrommetRefs`,
+  format: commonJsGrommetRefs,
+});
 HPEStyleDictionary.registerFormat({
   name: 'javascript/esm',
   format: javascriptEsm,

diff --git a/design-tokens/src/formats/commonJsGrommetRefs.ts b/design-tokens/src/formats/commonJsGrommetRefs.ts
@@ -0,0 +1,30 @@
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
+import { getGrommetValue } from './utils/getGrommetValue.js';
+import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
+import { access } from '../utils.js';
+
+export const commonJsGrommetRefs: FormatFn = async ({
+  dictionary,
+  file,
+  platform = {},
+}: FormatFnArguments) => {
+  const { prefix } = platform;
+  let tokens = dictionary.tokens;
+  dictionary.allTokens.forEach((token: any) => {
+    const value = getGrommetValue(token, dictionary);
+    const originalToken = access(token.path.join('.'), tokens);
+    originalToken.$value = value;
+  });
+
+  tokens = prefix ? { [prefix]: tokens } : tokens;
+  const output = `${await fileHeader({
+    file,
+  })}module.exports = ${JSON.stringify(
+    jsonToNestedValue(minifyDictionary(tokens, true)), // build in minify
+    null,
+    2,
+  )}\n`;
+
+  return output;
+};
diff --git a/design-tokens/src/formats/index.ts b/design-tokens/src/formats/index.ts
@@ -1,4 +1,5 @@
 export { commonJs } from './commonJs.js';
+export { commonJsGrommetRefs } from './commonJsGrommetRefs.js';
 export { cssColorModes } from './cssColorModes.js';
 export { cssBreakpoints } from './cssBreakpoints.js';
 export { esmGrommetRefs } from './esmGrommetRefs.js';

diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js
@@ -6,6 +6,7 @@ import { getThemeAndMode, numberToPixel } from '../utils.ts';
 const TOKENS_DIR = 'tokens';
 const ESM_DIR = 'dist/esm/';
 const GROMMET_DIR = 'dist/grommet/';
+const GROMMET_CJS_DIR = 'dist/grommet/cjs/';
 const CJS_DIR = 'dist/cjs/';
 const CSS_DIR = 'dist/css/';
 const DOCS_DIR = 'dist/docs/';
@@ -37,6 +38,17 @@ try {
           },
         ],
       },
+      'grommet/cjs': {
+        transformGroup: 'js/w3c',
+        buildPath: GROMMET_CJS_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'primitives.cjs',
+            format: 'javascript/commonJs',
+          },
+        ],
+      },
       js: {
         transformGroup: 'js/css',
         buildPath: ESM_DIR,
@@ -110,6 +122,19 @@ try {
           },
         ],
       },
+      'grommet/cjs': {
+        transformGroup: 'js/w3c',
+        buildPath: GROMMET_CJS_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'global.cjs',
+            format: 'commonJsGrommetRefs',
+            filter: token =>
+              token.filePath === `${TOKENS_DIR}/semantic/global.default.json`,
+          },
+        ],
+      },
       js: {
         transformGroup: 'js/css',
         buildPath: ESM_DIR,
@@ -208,6 +233,20 @@ try {
             },
           ],
         },
+        'grommet/cjs': {
+          transformGroup: 'js/w3c',
+          buildPath: GROMMET_CJS_DIR,
+          prefix: PREFIX,
+          files: [
+            {
+              destination: `color.${
+                theme ? `${theme}-${mode}` : `${mode || ''}`
+              }.cjs`,
+              format: 'javascript/commonJs',
+              filter: token => token.filePath === file,
+            },
+          ],
+        },
         js: {
           transformGroup: 'js/css',
           buildPath: ESM_DIR,
@@ -312,6 +351,20 @@ try {
             },
           ],
         },
+        'grommet/cjs': {
+          transformGroup: 'js/w3c',
+          buildPath: GROMMET_CJS_DIR,
+          prefix: PREFIX,
+          files: [
+            {
+              destination: `dimension.${
+                mode !== 'default' ? `${mode}.` : ''
+              }cjs`,
+              format: 'javascript/commonJs',
+              filter: token => token.filePath === file,
+            },
+          ],
+        },
         js: {
           transformGroup: 'js/css',
           buildPath: ESM_DIR,
@@ -410,6 +463,20 @@ try {
           },
         ],
       },
+      'grommet/cjs': {
+        transformGroup: 'js/w3c',
+        buildPath: GROMMET_CJS_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'components.cjs',
+            filter: token =>
+              token.filePath.includes(`${TOKENS_DIR}/component/`) &&
+              !token.path.includes(FIGMA_PREFIX),
+            format: 'commonJsGrommetRefs',
+          },
+        ],
+      },
       js: {
         transformGroup: 'js/css',
         buildPath: ESM_DIR,
@@ -545,6 +612,32 @@ fs.readdirSync(GROMMET_DIR)
     }
   });
 
+/** -----------------------------------
+ * Create Grommet CommonJS index.js
+ * ----------------------------------- */
+const grommetCjsCollections = [];
+fs.readdirSync(GROMMET_CJS_DIR)
+  .filter(file => file !== 'index.cjs')
+  .forEach(file => {
+    if (file.toLowerCase().endsWith('.cjs')) {
+      const filename = file.replace('.cjs', '');
+      const parts = filename.split('.');
+      let mode = parts[1];
+      // special case for base.js and components
+      if (mode === 'default' || !mode) [mode] = parts;
+      fs.appendFileSync(
+        `${GROMMET_CJS_DIR}index.cjs`,
+        `const ${mode} = require('./${file}');\n`,
+      );
+      grommetCjsCollections.push(mode);
+    }
+  });
+
+const grommetCjsOutput = `\nmodule.exports = { ${grommetCjsCollections.map(
+  collection => collection,
+)} };\n`;
+fs.appendFileSync(`${GROMMET_CJS_DIR}index.cjs`, grommetCjsOutput);
+
 /** -----------------------------------
  * Create docs index.js
  * ----------------------------------- */