@cmmn/tools 1.6.9 → 1.6.11

package/bundle/rollup.config.js

@@ -1,9 +1,7 @@
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import image from "rollup-plugin-img";
 import {terser} from "rollup-plugin-terser"
 import {visualizer} from 'rollup-plugin-visualizer';
-import styles from "rollup-plugin-styles";
 import {string} from "rollup-plugin-string";
 import serve from 'rollup-plugin-serve';
 import builtins from 'rollup-plugin-node-builtins';
@@ -15,7 +13,9 @@ import json from '@rollup/plugin-json';
 import alias from '@rollup/plugin-alias';
 import replace from '@rollup/plugin-replace';
 import sourcemaps from 'rollup-plugin-sourcemaps';
+import {Styles} from "./styles.js";
 
+// import postcssPresetEnv from 'postcss-preset-env'
 /**
  * @typedef {import(rollup).RollupOptions} RollupOptions
  * @typedef {import(rollup).OutputOptions} OutputOptions
@@ -87,6 +87,7 @@ export class ConfigCreator {
             sourcemap: true,
             format: module,
             globals: Array.isArray(this.options.external) ? Object.fromEntries(this.options.external.map(x => [x, x])) : this.options.external,
+            assetFileNames: "assets/[name][extname]",
             name: this.options.global ?? 'global',
         }));
     }
@@ -95,7 +96,17 @@ export class ConfigCreator {
         return html({
             publicPath: '/',
             dir: this.outDir,
-            template: () => fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
+            inject: false,
+            template: ({bundle}) => {
+                const inject = Object.keys(bundle.bundle).map(key => {
+                    if (key.endsWith('css'))
+                        return `<link rel="stylesheet" href="${key}" >`;
+                    if (key.endsWith('js'))
+                        return `<script defer src="${key}"></script>`;
+                })
+                const html = fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
+                return html.replace('</head>', inject.join('\n') + '</head>');
+            }
         });
     }
 
@@ -132,9 +143,10 @@ export class ConfigCreator {
     get plugins() {
         const result = [
             replace({
-                'process.env.NODE_ENV': JSON.stringify('development'),
+                'process.env.NODE_ENV': JSON.stringify(this.options.minify ? 'production' : 'development'),
                 preventAssignment: true
             }),
+            ...Styles(this.options),
             nodeResolve({
                 browser: this.options.browser,
                 dedupe: this.options.dedupe || []
@@ -158,15 +170,10 @@ export class ConfigCreator {
                 namedExports: false,
                 autoModules: true,
             }) : */
-            styles({
-                mode: "emit"
-            }),
-            image({
-                output: `/assets`, // default the root
-                extensions: /\.(png|jpg|jpeg|gif)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
-                limit: 8192,  // default 8192(8k)
-                exclude: 'node_modules/**'
-            }),
+            // styles({
+            //     autoModules: true,
+            // }),
+
             string({
                 include: /\.(html|svg|less)$/,
                 exclude: /\.module\.css/

package/bundle/styles.js

@@ -0,0 +1,65 @@
+import loader from 'postcss-modules/build/css-loader-core/loader.js';
+import image from "rollup-plugin-img";
+import postCssImport from 'postcss-import';
+import cssModules from '@modular-css/rollup';
+import slug from "unique-slug";
+import styles from "rollup-plugin-styles";
+
+class Loader extends loader.default {
+    failStart = '/' + process.cwd();
+
+    fetch(_newPath, relativeTo, _trace) {
+        if (relativeTo.startsWith(this.failStart))
+            relativeTo = relativeTo.substring(1);
+        // let newPath = _newPath.replace(/^["']|["']$/g, "");
+        // let relativeDir = path.dirname(relativeTo),
+        //     rootRelativePath = path.resolve(relativeDir, newPath),
+        //     fileRelativePath = path.resolve(path.join(this.root, relativeDir), newPath);
+        // relativeTo = path.relative(process.cwd(), relativeTo);
+        // console.log({root: this.root, newPath, relativeTo, relativeDir, rootRelativePath, fileRelativePath});
+        return super.fetch(_newPath, relativeTo, _trace);
+    }
+}
+
+export function Styles(options) {
+    return [
+        image({
+            output: `/assets`, // default the root
+            extensions: /\.(png|jpg|jpeg|gif)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
+            // exclude: 'node_modules/**'
+        }),
+        options.styles === "modules" ? cssModules({
+            common: 'common.css',
+            before: [postCssImport],
+            namer: function (file, selector) {
+                return selector + "_" +
+                    file.replace(/([\/\\]index)?(\.module)?\.css$/, "").split(/[\\\/]/).pop() + "_" +
+                    slug(file)
+            }
+        }): styles({
+            mode: "emit"
+        }),
+        // postcss({
+        //     extract: 'output.css',
+        //     ident: 'postcss',
+        //     modules: {
+        //         root: '',
+        //         generateScopedName: `[name]_[local]_[hash:base64:5]`,
+        //         Loader: Loader
+        //     },
+        //     use: ['sass'],
+        //     plugins: [
+        //         // postCssDuplicates(),
+        //         postCssImport()
+        //         // postcssModules({
+        //         //     generateScopedName: '[local]',
+        //         //     root: '',
+        //         //     Loader: Loader
+        //         // }),
+        //         // postcssPresetEnv({
+        //         //     stage: 0,
+        //         // }),
+        //     ],
+        // }),
+    ];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmmn/tools",
-  "version": "1.6.9",
+  "version": "1.6.11",
   "description": "Compilation, bundling, code generator, testing.",
   "main": "dist/rollup.config.js",
   "type": "module",
@@ -40,9 +40,11 @@
   ],
   "dependencies": {
     "@jest/globals": "27.x.x",
+    "@modular-css/rollup": "28",
     "@open-wc/rollup-plugin-html": "^1.2.5",
     "@rollup/plugin-alias": "3",
     "@rollup/plugin-commonjs": "^21",
+    "@rollup/plugin-image": "2",
     "@rollup/plugin-json": "4",
     "@rollup/plugin-node-resolve": "^13",
     "@rollup/plugin-replace": "4.x.x",
@@ -55,26 +57,28 @@
     "fast-glob": "^3.2.11",
     "jest": "27.x.x",
     "less": "^4",
+    "live-server": "1",
+    "postcss-import": "14",
+    "postcss-modules": "*",
     "rollup": "^2",
-    "rollup-plugin-img": "1.x.x",
+    "rollup-plugin-img": "1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-postcss": "4.x.x",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-styles": "^4",
     "rollup-plugin-terser": "^7",
     "rollup-plugin-visualizer": "^5.5.4",
-    "servor": "4.x.x",
     "sinon": "10.x.x",
     "ts-jest": "27.x.x",
     "ttypescript": "1.5.13",
     "typescript": "4.6.x",
-    "typescript-transform-paths": "^3.3.1"
+    "typescript-transform-paths": "^3.3.1",
+    "unique-slug": "*"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "5b28fdf72e182a3c775b0012bb1c3248fc1955ec"
+  "gitHead": "2755b333808bf97f1d9454601c2a2c9a88e4a021"
 }

package/serve/serve.js

@@ -1,20 +1,20 @@
 import {getConfigOptions} from "../bundle/getConfigs.js";
-import servor from "servor";
-import {relative, join} from "path";
+import {join, relative, resolve} from "path";
+import liveServer from "live-server";
 
 export function serve(...options) {
     const configs = getConfigOptions({
         project: options.includes('-b'),
     });
-    configs.filter(x => x.port).forEach(x => {
-        const root = relative(process.cwd(), join(x.rootDir, x.outDir));
-        console.log(`serve ${root} at localhost:${x.port}`);
-        servor({
-            root,
-            fallback: 'index.html',
-            reload: true,
-            port: x.port
-        })
+    configs.filter(x => x.port).forEach(async x => {
+        const root = relative(process.cwd(), join(x.rootDir, x.outDir ?? 'dist/bundle'));
+        const server = await liveServer.start({
+            root: root,
+            file: 'index.html',
+            port: x.port,
+            open: false,
+            mount: x.mount && Object.entries(x.mount).map(([from, to]) => [from, resolve(x.rootDir, to)])
+        });
 
     })