feat(react-styles): standardize css-in-js generation

packages/react-styles/.gitignore

@@ -1 +1 @@
-/css
+css

packages/react-styles/package.json

@@ -8,26 +8,23 @@
     "*.css",
     "*.scss"
   ],
-  "description": "",
+  "description": "CSS-in-JS class maps and utilities for PatternFly.",
   "author": "Red Hat",
   "publishConfig": {
     "access": "public",
     "tag": "prerelease-v4"
   },
   "scripts": {
-    "build": "yarn build:babel && yarn build:types && yarn build:css && node ./scripts/copyStyles.js",
+    "build": "yarn build:babel && yarn build:types && yarn build:css && node scripts/copyStyles.js",
     "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
     "build:babel:cjs": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/preset-env",
     "build:babel:esm": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
     "build:babel:umd": "babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "build:types": "tsc -p tsconfig.gen-dts.json",
-    "build:css": "node src/generateClasses.js && tsc && node src/removeTS.js",
+    "build:css": "node scripts/writeClassMaps.js",
     "clean": "rimraf dist css",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
-  "dependencies": {
-    "camel-case": "^3.0.0"
-  },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
@@ -42,6 +39,7 @@
     "@patternfly/patternfly": "4.6.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
+    "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "cssstyle": "^0.3.1",
     "fbjs-scripts": "^0.8.3",

packages/react-styles/scripts/generateClassMaps.js

@@ -0,0 +1,74 @@
+const path = require('path');
+const fs = require('fs-extra');
+const glob = require('glob');
+const camelcase = require('camel-case');
+
+/**
+ * @param {string} cssString - CSS string
+ */
+function getCSSClasses(cssString) {
+  return cssString.match(/(\.)(?!\d)([^\s.,{[>+~#:)]*)(?![^{]*})/g);
+}
+
+/**
+ * @param {string} className - Class name
+ */
+function formatClassName(className) {
+  return camelcase(className.replace(/pf-((c|l|m|u|is|has)-)?/g, ''));
+}
+
+/**
+ * @param {string} className - Class name
+ */
+function isModifier(className) {
+  return Boolean(className && className.startsWith) && className.startsWith('.pf-m-');
+}
+
+/**
+ * @param {string} cssString - CSS string
+ */
+function getClassMaps(cssString) {
+  const res = {};
+  const distinctClasses = new Set(getCSSClasses(cssString));
+
+  distinctClasses.forEach(className => {
+    const key = formatClassName(className);
+    const value = className.replace('.', '').trim();
+    if (isModifier(className)) {
+      res.modifiers = res.modifiers || {};
+      res.modifiers[key] = value;
+    } else {
+      res[key] = value;
+    }
+  });
+
+  const ordered = {};
+  Object.keys(res)
+    .sort()
+    .forEach(key => (ordered[key] = res[key]));
+
+  return ordered;
+}
+
+/**
+ * @returns {any} Map of file names to classMaps
+ */
+function generateClassMaps() {
+  const pfStylesDir = path.dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+
+  const patternflyCSSFiles = glob.sync('**/*.css', {
+    cwd: pfStylesDir,
+    ignore: ['assets/**', '*.css'],
+    absolute: true
+  });
+  const srcCSSFiles = glob.sync('src/css/**/*.css');
+
+  const res = {};
+  [...patternflyCSSFiles, ...srcCSSFiles].forEach(file => (res[file] = getClassMaps(fs.readFileSync(file, 'utf8'))));
+
+  return res;
+}
+
+module.exports = {
+  generateClassMaps
+};

packages/react-styles/scripts/writeClassMaps.js

@@ -0,0 +1,46 @@
+const { join, basename, resolve, relative, dirname } = require('path');
+const { outputFileSync, copyFileSync } = require('fs-extra');
+const { generateClassMaps } = require('./generateClassMaps');
+
+const outDir = resolve(__dirname, '../css');
+
+const writeCJSExport = (file, classMap) =>
+  outputFileSync(
+    join(outDir, file.replace(/.css$/, '.js')),
+    `
+"use strict";
+exports.__esModule = true;
+require('./${basename(file, '.css.js')}');
+exports.default = ${JSON.stringify(classMap, null, 2)};
+`.trim()
+  );
+
+const writeDTSExport = (file, classMap) =>
+  outputFileSync(
+    join(outDir, file.replace(/.css$/, '.d.ts')),
+    `
+import './${basename(file, '.css.js')}';
+declare const _default: ${JSON.stringify(classMap, null, 2)};
+export default _default;
+`.trim()
+  );
+
+/**
+ * @param {any} classMaps Map of file names to classMaps
+ */
+function writeClassMaps(classMaps) {
+  const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+
+  Object.entries(classMaps).forEach(([file, classMap]) => {
+    const outPath = file.includes(pfStylesDir) ? relative(pfStylesDir, file) : relative('src/css', file);
+
+    writeCJSExport(outPath, classMap);
+    writeDTSExport(outPath, classMap);
+    copyFileSync(file, join(outDir, outPath));
+  });
+
+  // eslint-disable-next-line no-console
+  console.log('Wrote', Object.keys(classMaps).length * 3, 'CSS-in-JS files');
+}
+
+writeClassMaps(generateClassMaps());

packages/react-tokens/scripts/writeTokens.js

@@ -82,6 +82,9 @@ exports.__esModule = true;
 ${index.map(file => `__export(require('./${file}'));`).join('\n')}
 `.trim()
   );
+
+  // eslint-disable-next-line no-console
+  console.log('Wrote', index.length * 3 + 3, 'token files');
 }
 
 writeTokens(generateTokens());

scripts/incrementalBuild.js

@@ -22,6 +22,8 @@ const getSrcDirs = packageName => {
       return ['src', 'sass'];
     case '@patternfly/react-tokens':
       return ['scripts'];
+    case '@patternfly/react-styles':
+      return ['src', 'scripts'];
     default:
       return ['src'];
   }