@blueprintui/cli 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.0
+- add import attributes support
+
+## 0.7.2
+- bump dependencies
+
 ## 0.7.1
 - bump dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/cli",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "",
   "main": "./index.mjs",
   "bin": {
@@ -31,8 +31,8 @@
     "path": "0.12.7",
     "rollup": "4.18.0",
     "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-css-modules": "0.1.2",
     "rollup-plugin-delete": "2.0.0",
-    "rollup-plugin-import-css": "3.5.0",
     "rollup-plugin-shell": "1.0.9",
     "terser": "5.31.1",
     "tslib": "2.6.3",

package/src/index.mjs

@@ -117,10 +117,6 @@ function buildRollup(args) {
 
         try {
           watcher.on('event', (event) => {
-            if (event.result) {
-              event.result.watchFiles = null;
-            }
-
             switch (event.code) {
               case 'START':
                 console.log(status.info, 'Building...');

package/src/plugin-minify-css.mjs

@@ -1,106 +1,31 @@
 import browserslist from 'browserslist';
-import { createFilter } from '@rollup/pluginutils';
 import { transform, browserslistToTargets } from 'lightningcss';
-import { path } from 'zx';
 
 const targets = browserslistToTargets(browserslist('Chrome > 116'));
 
-// fork of https://github.com/jleeson/rollup-plugin-import-css to enable import attributes and minificaiton
+// fork of https://github.com/justinfagnani/rollup-plugin-css-modules/tree/main
 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;
-  };
-
   return {
-    name: 'import-css',
-
-    /* convert the css file to a module and save the code for a file output */
+    name: 'css-modules',
     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;
+      const isCssModule = this.getModuleInfo(id)?.attributes.type === 'css';
+      if (isCssModule) {
+        const output = options.minify
+          ? transform({
+              targets,
+              drafts: {
+                nesting: true,
+              },
+              analyzeDependencies: true,
+              code: Buffer.from(code),
+              minify: true,
+              sourceMap: false,
+            }).code.toString()
+          : code;
+
+        return `const stylesheet = new CSSStyleSheet();stylesheet.replaceSync(\`${output}\`);export default stylesheet;`;
       }
-
-      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,
-      });
+      return null;
     },
   };
 };

package/src/rollup.config.mjs

@@ -6,8 +6,6 @@ import copy from 'rollup-plugin-copy';
 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 { css } from './plugin-minify-css.mjs';
@@ -48,10 +46,6 @@ export default [
       sourcemap: project.sourcemap,
       sourcemapExcludeSources: true
     },
-    acornInjectPlugins: [
-      importAssertions
-      // importAttributes
-    ],
     plugins: [
       project.prod ? cleanOutDir() : [],
       css({ minify: project.prod }),