@blueprintui/cli 0.1.4 → 0.2.1

package/.nvmrc

@@ -1 +1 @@
-18.3.0
+20.0.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+# 0.2.1
+- update CSS optimization to use lightningcss
+- remove legacy Safari compatibility optimizations
+- bump dependencies
+
 ## 0.1.4
 - bump dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/cli",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "",
   "main": "./index.mjs",
   "bin": {
@@ -14,29 +14,31 @@
   "author": "Crylan Software",
   "license": "MIT",
   "dependencies": {
-    "@custom-elements-manifest/analyzer": "0.8.0",
+    "@custom-elements-manifest/analyzer": "0.8.1",
     "@lit/ts-transformers": "1.1.3",
-    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-typescript": "11.0.0",
+    "@rollup/plugin-typescript": "11.1.0",
     "@rollup/plugin-virtual": "3.0.1",
     "@skypack/package-check": "0.2.2",
     "acorn-import-assertions": "1.8.0",
-    "commander": "10.0.0",
-    "csso": "5.0.5",
-    "glob": "9.3.2",
+    "browserslist": "4.21.5",
+    "commander": "10.0.1",
+    "lightningcss": "1.20.0",
+    "glob": "10.2.2",
     "minify-html-literals": "1.3.5",
     "path": "0.12.7",
-    "rollup": "3.20.2",
+    "rollup": "3.21.5",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-delete": "2.0.0",
+    "rollup-plugin-import-assert": "3.0.1",
     "rollup-plugin-shell": "1.0.9",
-    "terser": "5.16.8",
+    "terser": "5.17.1",
     "tslib": "2.5.0",
     "typescript": "~4.7.4",
-    "zx": "7.2.1"
+    "zx": "7.2.2"
   },
   "devDependencies": {
-    "lite-server": "^2.6.1"
+    "lite-server": "2.6.1"
   }
 }

package/src/plugin-minify-css.mjs

@@ -0,0 +1,29 @@
+import browserslist from 'browserslist';
+import { transform, browserslistToTargets } from 'lightningcss';
+import { path } from 'zx';
+
+const targets = browserslistToTargets(browserslist('Chrome > 112'));
+
+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;
+      }
+    }
+  };
+};

package/src/rollup.config.mjs

@@ -1,4 +1,3 @@
-import * as csso from 'csso';
 import typescript from '@rollup/plugin-typescript';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -10,8 +9,9 @@ import { fs, glob, path } from 'zx';
 import { importAssertions } from 'acorn-import-assertions';
 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 { minifyHTML } from './plugin-minify-html-literals.mjs';
-import { importAssertionsPlugin } from './plugin-import-assert.mjs';
 import { minifyJavaScript } from './plugin-minify-javascript.mjs';
 import { customElementsAnalyzer } from './plugin-custom-elements-analyzer.mjs';
 import { writeCache } from './plugin-esm-cache.mjs';
@@ -33,7 +33,7 @@ const project = {
   customElementsManifestConfig: config.customElementsManifestConfig ? path.resolve(cwd, config.customElementsManifestConfig) :  path.resolve(__dirname, './custom-elements-manifest.config.mjs'),
   prod: process.env.BLUEPRINTUI_BUILD === 'production',
   sourcemap: config.sourcemap
-}
+};
 
 export default [
   {
@@ -52,17 +52,16 @@ export default [
     plugins: [
       project.prod ? cleanOutDir()  : [],
       copyAssets(),
-      project.prod ? cssOptimize() : [],
+      project.prod ? minifyCSS() : [],
       importAssertionsPlugin(),
       createEntrypoints(),
       nodeResolve({ exportConditions: [project.prod ? 'production' : 'development'] }),
       compileTypescript(),
-      project.prod ? [] : typeCheck(),
+      typeCheck(),
       project.prod ? [] : writeCache(project),
       project.prod ? minifyHTML() : [],
       project.prod ? minifyJavaScript() : [],
       project.prod ? inlinePackageVersion() : [],
-      project.prod ? patchSuperMinify() : [],
       project.prod ? postClean(): [],
       project.prod ? packageCheck() : [],
       project.prod ? customElementsAnalyzer(project) : [],
@@ -104,16 +103,6 @@ function inlinePackageVersion() {
   return replace({ preventAssignment: false, values: { PACKAGE_VERSION: project.packageJSON.version } });
 }
 
-function patchSuperMinify() {
-  return replace({
-    preventAssignment: false,
-      values: {
-        'super(...arguments),': 'super(...arguments);',
-        'super(),': 'super();',
-      }, // safari 15 and latest chromium pupeteer bug with minification optimization in terser
-    });
-}
-
 function postClean() {
   return del({ targets: [`${project.outDir}/**/.tsbuildinfo`, `${project.outDir}/**/_virtual`], hook: 'writeBundle' });
 }
@@ -130,10 +119,3 @@ function cleanPackageJson() {
     }
   }
 }
-
-function cssOptimize() {
-  return {
-    load(id) { return id.slice(-4) === '.css' ? this.addWatchFile(path.resolve(id)) : null },
-    transform: async (css, id) => id.slice(-4) === '.css' ? ({ code: csso.minify(css, { comments: false }).css, map: { mappings: '' } }) : null
-  };
-};

package/src/plugin-import-assert.mjs

@@ -1,114 +0,0 @@
-import { path } from 'zx';
-
-// temp workaround due to package "string-to-template-literal" not shipping valid esm module & not compatible to Rollup 3.x
-
-// string-to-template-literal
-var illegalChars = new Map();
-illegalChars.set('\\', '\\\\');
-illegalChars.set('`', '\\`');
-illegalChars.set('$', '\\$');
-function convert(s) {
-    if (!s) {
-        return '``';
-    }
-    var res = '';
-    for (var i = 0; i < s.length; i++) {
-        var c = s.charAt(i);
-        res += illegalChars.get(c) || c;
-    }
-    return "`" + res + "`";
-}
-
-// rollup-plugin-import-assert
-function getObjects(obj, key, val) {
-    let objects = [];
-    for (let prop in obj) {
-        if (!obj.hasOwnProperty(prop)) {
-            continue;
-        }
-        if (typeof obj[prop] == 'object') {
-            objects = objects.concat(getObjects(obj[prop], key, val));
-        }
-        else if (prop == key && obj[prop] == val || prop == key && val == '') { //
-            objects.push(obj);
-        }
-        else if (obj[prop] == val && key == '') {
-            if (objects.lastIndexOf(obj) == -1) {
-                objects.push(obj);
-            }
-        }
-    }
-    return objects;
-}
-const assertionMap = new Map();
-const filePattern = /\.(js|ts|jsx|tsx)$/;
-const getImportPath = (id, source) => path.resolve(path.dirname(id), source);
-export function importAssertionsPlugin() {
-    return {
-        name: 'rollup-plugin-import-assert',
-        transform(data, id) {
-            let code = data;
-            /** If the file is a JS-like file, continue */
-            if (filePattern.exec(id)) {
-                /** Get the AST data, must be using acorn-import-assertions for this to work */
-                const ast = this.parse(data);
-                /** @ts-ignore this does exist apparently */
-                const { body } = ast;
-                const importDeclarations = getObjects(body, 'type', 'ImportDeclaration');
-                const importExpressions = getObjects(body, 'type', 'ImportExpression');
-                importDeclarations.forEach(node => {
-                    if (node.assertions) {
-                        const [assertion] = node.assertions;
-                        const assert = { type: assertion.value.value };
-                        const importPath = getImportPath(id, node.source.value);
-                        assertionMap.set(importPath, assert);
-                    }
-                });
-                importExpressions.forEach(node => {
-                    // Skip dynamic imports with expressions
-                    // @example: import(`./foo/${bar}.js`); // NOK
-                    // @example: import(`./foo/bar.js`); // OK
-                    if (node.source.type === "TemplateLiteral" && node.source.quasis.length > 1) {
-                        return;
-                    }
-                    // @example: `import(foo);` NOK
-                    if (!node.source.value)
-                        return;
-                    const source = node.source.value || node.source.quasis[0].value.raw;
-                    const importPath = getImportPath(id, source);
-                    // TODO: We can still make this better
-                    if (node.hasOwnProperty('arguments') && getObjects(node, 'name', 'assert')) {
-                        const assert = { type: node.arguments[0].properties[0]?.value?.properties[0].value.value };
-                        assertionMap.set(importPath, assert);
-                        const matches = code.match(/import\(.*\)/gi);
-                        const replacements = matches.map(match => match.replace(/\{(\s?)assert:(\s?)\{.*\}/gi, ''));
-                        if (matches) {
-                            matches.forEach((match, index) => code = code.replace(match, replacements[index]));
-                            code.match(/import\(.*(\s?),(\s?)\)/gi).forEach(match => {
-                                code = code.replace(match, match.replace(',', ''));
-                            });
-                        }
-                    }
-                });
-            }
-            const assertion = assertionMap.get(id);
-            /** If an import assertion exists for the file, parse it differently */
-            if (assertion) {
-                const { type } = assertion;
-                let code = data;
-                if (type === 'css') {
-                    /** Parse files asserted as CSS to use constructible stylesheets */
-                    code = `const sheet = new CSSStyleSheet();sheet.replaceSync(${convert(data)});export default sheet;`;
-                }
-                else if (type === 'json') {
-                    /** Parse files asserted as JSON as a JS object */
-                    code = `export default ${data}`;
-                }
-                /** Return the new data and map it back to the original source file */
-                return { code, mappings: id };
-            }
-            /** If none of the above exists, just continue as normal */
-            return { code };
-        }
-    };
-}