feat(build): Add CLI for scss build with option for custom selector

README.md

@@ -3,6 +3,7 @@
 # Usage
 `yarn build:scss` to build the SCSS files to the /build directory
 
+By default `yarn build:scss` outputs the SCSS with `:root` as a selector, but you can also pass the `--selector` flag (or just `-s` for short) and specify any selector you want, i.e. `yarn build:scss -s .foo` will replace the `:root` selector with `.foo` in the generated SCSS files.
 `yarn build:docs` and `yarn serve:docs` will build and run the docs locally.
 
 # Note

packages/module/build.js

@@ -1,73 +1,78 @@
 /* eslint-disable no-console */
 const StyleDictionary = require('style-dictionary');
-const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
 
-console.log('Build started...');
-console.log('\n============================');
+const build = (selector) => {
+  const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
 
-//Register comment format
-StyleDictionary.registerFormat({
-  name: 'customFormat',
-  formatter: function ({ dictionary, file, options }) {
-    const { outputReferences } = options;
-    return (
-      fileHeader({ file, commentStyle: 'short' }) +
-      ':root {\n' +
-      formattedVariables({ format: 'css', dictionary, outputReferences }) +
-      '\n}\n'
-    );
-  }
-});
+  console.log('Build started...');
+  console.log('\n============================');
 
-// Register custom transforms
-StyleDictionary.registerTransform({
-  name: 'patternfly/global/px',
-  type: 'value',
-  matcher: (token) =>
-    token.attributes.type === 'spacer' ||
-    token.attributes.type === 'border' ||
-    token.attributes.type === 'icon' ||
-    (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
-    token.attributes.type === 'font',
-  transformer: (token) => `${token.value}px`
-});
+  //Register comment format
+  StyleDictionary.registerFormat({
+    name: 'customFormat',
+    formatter: function ({ dictionary, file, options }) {
+      const { outputReferences } = options;
+      return (
+        fileHeader({ file, commentStyle: 'short' }) +
+        `${selector} {\n` +
+        formattedVariables({ format: 'css', dictionary, outputReferences }) +
+        '\n}\n'
+      );
+    }
+  });
 
-StyleDictionary.registerTransform({
-  name: 'patternfly/doublekebab',
-  type: 'name',
-  transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
-});
+  // Register custom transforms
+  StyleDictionary.registerTransform({
+    name: 'patternfly/global/px',
+    type: 'value',
+    matcher: (token) =>
+      token.attributes.type === 'spacer' ||
+      token.attributes.type === 'border' ||
+      token.attributes.type === 'icon' ||
+      (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
+      token.attributes.type === 'font',
+    transformer: (token) => `${token.value}px`
+  });
 
-// Reigster custom transform group
-StyleDictionary.registerTransformGroup({
-  name: 'patternfly/css',
-  transforms: [
-    // "css" group transforms
-    'attribute/cti',
-    // 'name/cti/kebab' -- replaced with "patternfly/doublekebab"
-    'time/seconds',
-    'content/icon',
-    'size/rem',
-    'color/css',
-    // custom transforms
-    'patternfly/global/px',
-    'patternfly/doublekebab'
-  ]
-});
+  StyleDictionary.registerTransform({
+    name: 'patternfly/doublekebab',
+    type: 'name',
+    transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
+  });
 
-// Apply configuration
-const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
-const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
-const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
-const chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');
-const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.dark.json');
+  // Reigster custom transform group
+  StyleDictionary.registerTransformGroup({
+    name: 'patternfly/css',
+    transforms: [
+      // "css" group transforms
+      'attribute/cti',
+      // 'name/cti/kebab' -- replaced with "patternfly/doublekebab"
+      'time/seconds',
+      'content/icon',
+      'size/rem',
+      'color/css',
+      // custom transforms
+      'patternfly/global/px',
+      'patternfly/doublekebab'
+    ]
+  });
 
-// Build all
-defaultExtendedSD.buildAllPlatforms();
-darkExtendedSD.buildAllPlatforms();
-paletteExtendedSD.buildAllPlatforms();
-chartExtendedSD.buildAllPlatforms();
-chartDarkExtendedSD.buildAllPlatforms();
+  // Apply configuration
+  const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
+  const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
+  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
+  const chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');
+  const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.dark.json');
 
-console.log('\n============================');
-console.log('\nBuild completed.');
+  // Build all
+  defaultExtendedSD.buildAllPlatforms();
+  darkExtendedSD.buildAllPlatforms();
+  paletteExtendedSD.buildAllPlatforms();
+  chartExtendedSD.buildAllPlatforms();
+  chartDarkExtendedSD.buildAllPlatforms();
+
+  console.log('\n============================');
+  console.log('\nBuild completed.');
+};
+
+module.exports = { build };

packages/module/cli.js

@@ -0,0 +1,10 @@
+const { program } = require('commander');
+const {build} = require('./build');
+
+program
+  .version(require('./package.json').version)
+  .description('Builds the PF design tokens using style dictionary')
+  .option('-s, --selector <selector>', 'CSS selector to use for the output', ':root')
+  .action((cliOptions) => build(cliOptions.selector));
+
+program.parse(process.argv);

packages/module/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "yarn build:js-from-scss",
     "build:fed:packages": "node generate-fed-package-json.js",
-    "build:scss": "node ./build.js",
+    "build:scss": "node ./cli.js",
     "build:js-from-scss": "node ./build-js-for-docs.js",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
@@ -31,7 +31,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.36"
+    "@patternfly/react-core": "^6.0.0-alpha.36",
+    "commander": "^12.0.0"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",

yarn.lock

@@ -3092,6 +3092,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-12.0.0.tgz#b929db6df8546080adfd004ab215ed48cf6f2592"
+  integrity sha512-MwVNWlYjDTtOjX5PiD7o5pK0UrFU/OYgcJfjjK4RaHZETNtjJqrZa9Y9ds88+A+f+d5lv+561eZ+yCKoS3gbAA==
+
 commander@^2.19.0, commander@^2.20.0, commander@^2.9.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"