@blueprintui/cli 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+# 0.7.0
+- lit transformer update
+
+# 0.6.0
+- revert rollup 4.0 upgrade
+
+# 0.5.0
+- migrate to TS 5.x
+
+## 0.4.0
+- upgrade to TypeScript 5.2.x
+
+## 0.3.0
+- bump dependencies
+
 # 0.3.0
 - support for jsdoc tagging in custom-elements.json metadata
 - bump dependencies
@@ -9,12 +24,6 @@
 - remove legacy Safari compatibility optimizations
 - bump dependencies
 
-## 0.4.0
-- upgrade to TypeScript 5.2.x
-
-## 0.3.0
-- bump dependencies
-
 ## 0.1.3
 - bump dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/cli",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "",
   "main": "./index.mjs",
   "bin": {
@@ -15,12 +15,13 @@
   "license": "MIT",
   "dependencies": {
     "@custom-elements-manifest/analyzer": "0.8.4",
-    "@lit/ts-transformers": "2.0.0-pre.1",
+    "@lit/ts-transformers": "2.0.0",
     "@rollup/plugin-node-resolve": "15.2.2",
     "@rollup/plugin-replace": "5.0.3",
     "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-virtual": "3.0.2",
     "@skypack/package-check": "0.2.2",
+    "acorn-import-attributes": "1.9.2",
     "acorn-import-assertions": "1.9.0",
     "browserslist": "4.22.1",
     "commander": "11.0.0",
@@ -28,10 +29,10 @@
     "lightningcss": "1.22.0",
     "minify-html-literals": "1.3.5",
     "path": "0.12.7",
-    "rollup": "4.0.2",
+    "rollup": "3.29.3",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-delete": "2.0.0",
-    "rollup-plugin-import-assert": "3.0.1",
+    "rollup-plugin-import-css": "^3.3.4",
     "rollup-plugin-shell": "1.0.9",
     "terser": "5.21.0",
     "tslib": "2.6.2",

package/src/plugin-minify-css.mjs

@@ -1,29 +1,106 @@
 import browserslist from 'browserslist';
+import { createFilter } from '@rollup/pluginutils';
 import { transform, browserslistToTargets } from 'lightningcss';
 import { path } from 'zx';
 
-const targets = browserslistToTargets(browserslist('Chrome > 112'));
+const targets = browserslistToTargets(browserslist('Chrome > 116'));
+
+// fork of https://github.com/jleeson/rollup-plugin-import-css to enable import attributes and minificaiton
+export const css = (options = {}) => {
+  const styles = {};
+  const filter = createFilter(
+    options.include ?? ['**/*.css'],
+    options.exclude ?? []
+  );
+
+  /* function to sort the css imports in order - credit to rollup-plugin-postcss */
+  const getRecursiveImportOrder = (id, getModuleInfo, seen = new Set()) => {
+    if (seen.has(id)) return [];
+
+    seen.add(id);
+
+    const result = [id];
+
+    getModuleInfo(id).importedIds.forEach((importFile) => {
+      result.push(...getRecursiveImportOrder(importFile, getModuleInfo, seen));
+    });
+
+    return result;
+  };
 
-export function minifyCSS() {
   return {
-    load(id) { return id.slice(-4) === '.css' ? this.addWatchFile(path.resolve(id)) : null },
-    transform: async (css, id) => {
-      if (id.slice(-4) === '.css') {
-        const code = transform({
-          targets,
-          drafts: {
-            nesting: true
-          },
-          analyzeDependencies: true,
-          code: Buffer.from(css),
-          minify: true,
-          sourceMap: false
-        }).code.toString()
-
-        return { code, map: { mappings: '' } };
-      } else {
-        return null;
+    name: 'import-css',
+
+    /* convert the css file to a module and save the code for a file output */
+    transform(code, id) {
+      if (!filter(id)) return;
+
+      const output = options.minify
+        ? transform({
+            targets,
+            drafts: {
+              nesting: true,
+            },
+            analyzeDependencies: true,
+            code: Buffer.from(code),
+            minify: true,
+            sourceMap: false,
+          }).code.toString()
+        : code;
+
+      /* cache the result */
+      if (!styles[id] || styles[id] != output) {
+        styles[id] = output;
       }
-    }
+
+      return {
+        code: `const sheet = new CSSStyleSheet();sheet.replaceSync(${JSON.stringify(
+          output
+        )});export default sheet;`,
+        map: { mappings: '' },
+      };
+    },
+
+    /* output a css file with all css that was imported without being assigned a variable */
+    generateBundle(opts, bundle) {
+      /* collect all the imported modules for each entry file */
+      let modules = {};
+      let entryChunk = null;
+      for (let file in bundle) {
+        modules = Object.assign(modules, bundle[file].modules);
+        if (!entryChunk) entryChunk = bundle[file].facadeModuleId;
+      }
+
+      /* get the list of modules in order */
+      const moduleIds = getRecursiveImportOrder(entryChunk, this.getModuleInfo);
+
+      /* remove css that was imported as a string */
+      const css = Object.entries(styles)
+        .sort((a, b) => moduleIds.indexOf(a[0]) - moduleIds.indexOf(b[0]))
+        .map(([id, code]) => {
+          if (!modules[id]) return code;
+        })
+        .join('\n');
+
+      /* return the asset name by going through a set of possible options */
+      const getAssetName = () => {
+        const fileName = options.output ?? opts.file ?? 'bundle.js';
+        return `${path.basename(fileName, path.extname(fileName))}.css`;
+      };
+
+      /* return the asset fileName by going through a set of possible options */
+      const getAssetFileName = () => {
+        if (options.output) return options.output;
+        if (opts.assetFileNames) return undefined;
+        return `${getAssetName()}.css`;
+      };
+
+      this.emitFile({
+        type: 'asset',
+        name: getAssetName(),
+        fileName: getAssetFileName(),
+        source: css,
+      });
+    },
   };
 };

package/src/rollup.config.mjs

@@ -7,10 +7,10 @@ import del from 'rollup-plugin-delete';
 import execute from 'rollup-plugin-shell';
 import { fs, glob, path } from 'zx';
 import { importAssertions } from 'acorn-import-assertions';
+// import { importAttributes } from 'acorn-import-attributes'; // enable when TypeScript supports import attributes
 import { idiomaticDecoratorsTransformer, constructorCleanupTransformer } from '@lit/ts-transformers';
 import { fileURLToPath } from 'url';
-import { importAssertionsPlugin } from 'rollup-plugin-import-assert';
-import { minifyCSS } from './plugin-minify-css.mjs';
+import { css } from './plugin-minify-css.mjs';
 import { minifyHTML } from './plugin-minify-html-literals.mjs';
 import { minifyJavaScript } from './plugin-minify-javascript.mjs';
 import { customElementsAnalyzer } from './plugin-custom-elements-analyzer.mjs';
@@ -48,12 +48,14 @@ export default [
       sourcemap: project.sourcemap,
       sourcemapExcludeSources: true
     },
-    acornInjectPlugins: [importAssertions],
+    acornInjectPlugins: [
+      importAssertions
+      // importAttributes
+    ],
     plugins: [
-      project.prod ? cleanOutDir()  : [],
+      project.prod ? cleanOutDir() : [],
+      css({ minify: project.prod }),
       copyAssets(),
-      project.prod ? minifyCSS() : [],
-      importAssertionsPlugin(),
       createEntrypoints(),
       nodeResolve({ exportConditions: [project.prod ? 'production' : 'development'] }),
       compileTypescript(),