Updated with example docs.

Author: dlabaj

package.json

@@ -55,11 +55,14 @@
     "jest-canvas-mock": "2.4.0",
     "ts-jest":"29.0.3",
     "serve": "^14.1.2",
-    "enzyme":"3.11.0",
-    "enzyme-to-json": "3.6.2",
+    "node-sass-package-importer": "^5.3.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "whatwg-fetch": "^3.6.2",
     "babel-polyfill": "6.26.0",
-    "identity-obj-proxy": "^3.0.0"
+    "identity-obj-proxy": "^3.0.0",
+    "fs-extra": "^9.1.0",
+    "glob": "^7.2.3",
+    "sass": "^1.55.0",
+    "chokidar": "^3.5.3"
   }
 }

packages/module/package.json

@@ -5,14 +5,17 @@
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "tsc --build --verbose ./tsconfig.json",
+    "build": "tsc --build --verbose ./tsconfig.json && yarn build:css && yarn transform:css",
+    "build:css": "node ../../scripts/build-styles.js",
+    "copy-files": "copyfiles -u 1 src/**/*.scss dist/esm",
     "build:fed:packages": "node generate-fed-package-json.js",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5000",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
+    "transform:css": "node ../../scripts/transform-scss.js",
     "serve:a11y": "yarn serve coverage"
   },
   "repository": "git+https://github.com/patternfly/extended-components.git",
@@ -40,7 +43,9 @@
     "@patternfly/patternfly": "^4.217.1",
     "@patternfly/react-table": "^4.111.4",
     "@patternfly/react-code-editor": "^4.82.26",
+    "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
     "classnames": "^2.2.5",
+    "copyfiles": "^2.4.1",
     "rimraf": "^2.6.2",
     "typescript": "^4.7.4",
     "react": "^17.0.0",

scripts/build-packages.js

@@ -0,0 +1,77 @@
+const fse = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+
+const root = process.cwd();
+
+const foldersBlackList = ['__snapshots__', '__mocks__'];
+const sourceFiles = glob
+  .sync(`${root}/src/*/`)
+  .filter((item) => !foldersBlackList.some((name) => item.includes(name)))
+  .map((name) => name.replace(/\/$/, ''));
+const indexTypings = glob.sync(`${root}/src/index.d.ts`);
+
+async function copyTypings(files, dest) {
+  const cmds = [];
+  files.forEach((file) => {
+    const fileName = file.split('/').pop();
+    cmds.push(fse.copyFile(file, `${dest}/${fileName}`));
+  });
+  return Promise.all(cmds);
+}
+
+async function createPackage(file, forceTypes) {
+  const fileName = file.split('/').pop();
+  const esmSource = glob.sync(`${root}/esm/${fileName}/**/index.js`)[0];
+  /**
+   * Prevent creating package.json for directories with no JS files (like CSS directories)
+   */
+  if (!esmSource) {
+    return;
+  }
+
+  const destFile = `${path.resolve(root, file.split('/src/').pop())}/package.json`;
+
+  const esmRelative = path.relative(file.replace('/src', ''), esmSource);
+  const content = {
+    main: 'index.js',
+    module: esmRelative,
+  };
+  const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
+  let cmds = [];
+  if (forceTypes) {
+    content.typings = 'index.d.ts';
+  } else if (typings.length > 0) {
+    const hasIndex = glob.sync(`${root}/src/${fileName}/index.d.ts`).length > 0;
+    if (hasIndex) {
+      content.typings = 'index.d.ts';
+    }
+
+    cmds.push(copyTypings(typings, `${root}/${fileName}`));
+  }
+
+  cmds.push(fse.writeJSON(destFile, content));
+
+  return Promise.all(cmds);
+}
+
+async function generatePackages(files, forceTypes) {
+  const cmds = files.map((file) => createPackage(file, forceTypes));
+  return Promise.all(cmds);
+}
+
+async function run(files, forceTypes) {
+  try {
+    await generatePackages(files, forceTypes);
+    if (indexTypings.length === 1) {
+      copyTypings(indexTypings, root);
+    }
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+const forceTypes = !!process.argv.includes('--forceTypes');
+
+run(sourceFiles, forceTypes);

scripts/build-styles.js

@@ -0,0 +1,89 @@
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+const sass = require('sass');
+const chokidar = require('chokidar');
+const packageImporter = require('node-sass-package-importer');
+
+/**
+ * Root path of the current package
+ */
+const root = process.cwd();
+/**
+ * get all scss files
+ */
+const files = glob.sync(`${root}/src/**/*.scss`);
+
+async function buildStyle(file) {
+  const outFiles = [
+    path.resolve(file.replace('/src/', '/dist/esm/'), './').replace(/scss$/, 'css'),
+  ];
+  const promises = outFiles.map((outFile) => {
+    let targetDir = outFile.split('/');
+    targetDir.pop();
+    targetDir = targetDir.join('/').replace(root, '').replace(/^\//, '');
+
+    if (!fs.existsSync(path.resolve(root, targetDir))) {
+      fs.mkdirSync(targetDir);
+    }
+
+    const render = sass.render(
+      {
+        file,
+        outFile,
+        importer: packageImporter(),
+      },
+      function (err, result) {
+        if (err) {
+          console.error(file, outFile);
+          throw err;
+        }
+
+        return fs.writeFile(outFile, result.css, 'utf8', function (err) {
+          if (err) {
+            throw err;
+          }
+        });
+      }
+    );
+    const copy = fs.copyFile(file, outFile.replace(/css$/, 'scss'), function (err) {
+      if (err) {
+        throw err;
+      }
+    });
+    return Promise.all([render, copy]);
+  });
+  return Promise.all(promises);
+}
+
+async function buildStyles(files) {
+  const cmds = files.map(buildStyle);
+  return Promise.all(cmds);
+}
+
+async function run(files) {
+  try {
+    await buildStyles(files);
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+const args = process.argv.slice(2);
+
+if (args.includes('-w') || args.includes('--watch')) {
+  console.log(`Watching ${files.length} scss files in: ${root}`);
+  const watcher = chokidar.watch(files);
+  watcher
+    .on('add', (path) => {
+      console.log(`Compiling sass: ${path}`);
+      buildStyles([path]);
+    })
+    .on('change', (path) => {
+      console.log(`Compiling sass: ${path}`);
+      buildStyles([path]);
+    });
+} else {
+  run(files);
+}

scripts/transform-scss.js

@@ -0,0 +1,40 @@
+const fs = require('fs');
+const glob = require('glob');
+
+const root = process.cwd();
+
+async function transformFiles() {
+  const esmRoot = `${root}/**/*.js`;
+  const files = glob.sync(esmRoot).filter((path) => !path.includes('/src/'));
+  const cmds = files.map((file) => {
+    let content = fs.readFileSync(file, { encoding: 'utf-8' });
+    const isEsm = file.includes('/dist/esm/');
+    if (isEsm) {
+      /**
+       * For ESM module, tranform the CSS asset paht co CJS variant.
+       * Referencing CSS in esm directories causes webpack to tree shake the assets leading to missing CSS rules in build output.
+       */
+      const prefix = file.split('/dist/esm/').pop().split('/').shift();
+      content = content.replaceAll(/(?<=^import )'\.\/(?=.*\.scss)/gm, `'../${prefix}/`);
+    }
+    content = content.replace(/\.scss(?=('))/, '.css');
+    content = content.replace(/\.scss(?=("\)))/, '.css');
+    return fs.writeFile(file, content, 'utf-8', function (err) {
+      if (err) {
+        throw err;
+      }
+    });
+  });
+  return Promise.all(cmds);
+}
+
+async function run() {
+  try {
+    await transformFiles();
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+run();