fix: unminify css when bundling (#2710)

* fix: unminify css when bundling

* docs: import maps for all elements

* fix: unwrap nesting in bundle

Author: bennypowers

docs/_data/importMap.cjs

@@ -100,12 +100,22 @@ module.exports = async function() {
   for (const file of pfeCoreImports) {
     map.imports[path.join('@patternfly/pfe-core', file)] = '/pfe.min.js';
   }
+
   map.imports['@patternfly/pfe-core/decorators.js'] = '/pfe.min.js';
   map.imports['@patternfly/pfe-core'] = '/pfe.min.js';
 
-  for (const tagName of fs.readdirSync(path.join(__dirname, '..', '..', 'elements'))) {
-    map.imports[`@patternfly/elements/${tagName}/${tagName}.js`] = `/pfe.min.js`;
+  const elementsPath = path.join(__dirname, '..', '..', 'elements');
+  for (const tagName of fs.readdirSync(elementsPath)) {
+    const elementPath = path.join(elementsPath, tagName);
+    if (fs.statSync(elementPath).isDirectory()) {
+      for (const fileName of fs.readdirSync(elementPath)) {
+        if (fileName.endsWith('.ts') && !fileName.endsWith('.d.ts')) {
+          map.imports[`@patternfly/elements/${tagName}/${fileName.replace('.ts', '')}.js`] = `/pfe.min.js`;
+        }
+      }
+    }
   }
+
   map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js';
 
 

package-lock.json

@@ -314,6 +314,7 @@
     "leasot": "^13.3.0",
     "lit": "^3.1.2",
     "nunjucks": "^3.2.4",
+    "postcss-nesting": "^12.1.0",
     "prompts": "^2.4.2",
     "wireit": "^0.14.4",
     "zero-md": "^2.5.3"

package.json

@@ -5,17 +5,14 @@ import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';
 import { glob } from 'glob';
-import CleanCSS from 'clean-css';
+
+import postcss from 'postcss';
+import postcssNesting from 'postcss-nesting';
 
 const resolveDir = join(fileURLToPath(import.meta.url), '../../elements');
 const entryPoints = (await glob('./pf-*/pf-*.ts', { cwd: resolveDir })).map(x => x.replace('.ts', '.js'));
 const contents = entryPoints.map(x => `export * from './${x}';`).join('\n');
 
-const cleanCSS = new CleanCSS({
-  sourceMap: true,
-  returnPromise: true,
-});
-
 export async function bundle({ outfile = 'elements/pfe.min.js' } = {}) {
   await build({
     stdin: {
@@ -42,8 +39,13 @@ export async function bundle({ outfile = 'elements/pfe.min.js' } = {}) {
 
     plugins: [
       litCssPlugin({
+        cssnano: false,
+        uglify: false,
         filter: /\.css$/,
-        transform: source => cleanCSS.minify(source).then(x => x.styles)
+        transform: (str, { filePath }) =>
+          postcss(postcssNesting())
+            .process(str, { from: filePath })
+            .css
       }),
     ],
   });

scripts/bundle.js

@@ -44,8 +44,7 @@
     "plugins": [
       {
         "transform": "@patternfly/pfe-tools/typescript/transformers/css-imports.cjs",
-        "inline": true,
-        "minify": true
+        "inline": true
       },
       {
         "name": "typescript-lit-html-plugin"

tsconfig.esbuild.json

@@ -38,8 +38,7 @@
     "plugins": [
       {
         "transform": "@patternfly/pfe-tools/typescript/transformers/css-imports.cjs",
-        "inline": true,
-        "minify": true
+        "inline": true
       },
       {
         "name": "typescript-lit-html-plugin"