@mlut/plugins 1.0.0

package/README.md

@@ -0,0 +1,109 @@
+# mlut plugins #
+
+<img alt="Logo" src="https://github.com/mr150/mlut/raw/master/docs/img/logo-full.png" width="350"/>
+
+The [mlut](https://github.com/mr150/mlut) plugins for Rollup, Vite and Webpack. Based on [unplugin](https://unplugin.unjs.io/).
+
+## Installation ##
+
+```
+npm i -D @mlut/plugins sass-embedded
+```
+
+When using this package, you will need to install Sass separately. We recommend [sass-embedded](https://www.npmjs.com/package/sass-embedded), but regular [sass](https://www.npmjs.com/package/sass) is also suitable.
+
+This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
+
+## Usage ##
+
+Import the plugin for the appropriate bundler from the `@mlut/plugins` package as in one of the examples below. You can find more detailed examples using dev-server and livereload in the plugin tests [directory](https://github.com/mr150/mlut/tree/master/test/plugins)
+
+### Rollup ###
+
+```js
+// rollup.config.js
+import { rollup } from '@mlut/plugins';
+
+const mlut = rollup({
+  output: 'dist/style.css',
+  // other options...
+});
+
+export default {
+  // rollup config...
+  plugins: [mlut],
+};
+```
+
+### Vite ###
+
+```js
+// vite.config.js
+import { vite } from '@mlut/plugins';
+
+const mlut = vite({
+  output: 'dist/assets/style.css',
+  // other options...
+});
+
+export default defineConfig(() => {
+  return {
+    // vite config...
+    plugins: [mlut],
+  }
+});
+```
+
+### Webpack ###
+
+```js
+// webpack.config.js
+import { webpack } from '@mlut/plugins';
+
+const mlut = webpack({
+  output: 'dist/style.css',
+  // other options...
+});
+
+export default {
+  // webpack config...
+  plugins: [mlut],
+};
+```
+
+## Options ##
+
+The plugin options are similar to the mlut CLI options
+
+```ts
+interface Options {
+  output: string,
+  input?: string,
+  minify?: boolean,
+  autoprefixer?: boolean,
+  noMergeMq?: boolean,
+}
+```
+
+- `output` - output CSS file
+- `input` - input Sass file when you import mlut, configure it and write other CSS
+- `minify` - generate minified CSS. For this option to work, you need 1 of the following minifiers: [csso](https://github.com/css/csso), [lightningcss](https://github.com/parcel-bundler/lightningcss), [clean-css](https://github.com/clean-css/clean-css), [cssnano](https://github.com/cssnano/cssnano) or [esbuild](https://github.com/evanw/esbuild). You may already have it installed
+- `autoprefixer` - whether to add vendor prefixes to CSS properties. You need the [autoprefixer](https://github.com/postcss/autoprefixer) package or lightningcss for this option to work
+- `noMergeMq` - prevent merging of CSS media queries during minification. Relevant only when using the csso minifier
+
+You can add the options in your input Sass file too. Options must be a **valid JSON**, but single quotes is allowed. Paths will be resolved relative to the JIT engine working directory
+```scss
+@use '@mlut/core' with (
+  $jit: (
+    'output': 'dist/assets/style.css',
+    'minify': true,
+    'autoprefixer': true
+  ),
+);
+```
+
+## Documentation ##
+Full documentation available [here](https://mr150.github.io/mlut/section-start.html#kssref-start-integrations)
+
+## License ##
+MIT

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { TransformCssOptions } from './transformCss.js';
+export interface Options extends TransformCssOptions {
+    readonly input?: string;
+    readonly output: string;
+}
+export declare const unplugin: import("unplugin").UnpluginInstance<Options, boolean>;
+export declare const rollup: (options: Options) => import("rollup").Plugin<any> | import("rollup").Plugin<any>[];
+export declare const vite: (options: Options) => import("vite").Plugin<any> | import("vite").Plugin<any>[];
+export declare const webpack: (options: Options) => import("webpack").WebpackPluginInstance;

package/dist/index.js

@@ -0,0 +1,135 @@
+import { jitEngine, logger } from '@mlut/core';
+import { createUnplugin } from 'unplugin';
+import fs from 'fs-extra';
+import { transformCss } from './transformCss.js';
+function debounce(fn, timeout) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(fn, timeout, ...args);
+    };
+}
+export const unplugin = createUnplugin((options, meta) => {
+    const pluginName = 'unplugin-mlut';
+    const finalOptions = { output: '' };
+    const inputPath = options.input;
+    let lastCompiledCss = '';
+    const isWebpack = meta.framework === 'webpack';
+    let isVite = false;
+    let isViteWatch = false;
+    const writeCssFile = async () => {
+        const css = await jitEngine.generateCss();
+        if (lastCompiledCss !== css) {
+            lastCompiledCss = css;
+            await fs.outputFile(finalOptions.output, await transformCss(css, finalOptions)).catch((e) => logger.error('Failed to write the output file.', e));
+        }
+    };
+    const debouncedWriteCssFile = debounce(writeCssFile, 500);
+    const initPlugin = async () => {
+        let inputContent = '';
+        if (inputPath) {
+            inputContent = await fs.promises.readFile(inputPath)
+                .then((r) => r.toString())
+                .catch((e) => (logger.warn('Failed to read the input file.', e), ''));
+        }
+        const cfgMatchResult = inputContent.match(/\$jit:\s*\(([^)]+)/);
+        if (cfgMatchResult != null) {
+            try {
+                const config = JSON.parse(`{${cfgMatchResult[1].replaceAll("'", '"')}}`);
+                Object.assign(finalOptions, options, config);
+            }
+            catch (e) {
+                logger.error('Failed to load the JIT config from the input file.', e);
+            }
+        }
+        else {
+            Object.assign(finalOptions, options);
+        }
+        if (!finalOptions.output) {
+            throw new Error('Output path not specified!');
+        }
+        await jitEngine.init([inputPath, inputContent]);
+    };
+    return {
+        name: pluginName,
+        async config(_config, { command }) {
+            isVite = true;
+            if (command === 'serve') {
+                isViteWatch = true;
+            }
+            await initPlugin();
+            return {
+                server: {
+                    watch: {
+                        ignored: ['!' + finalOptions.output]
+                    }
+                },
+            };
+        },
+        configureServer(server) {
+            server.watcher.add(finalOptions.output);
+        },
+        webpack(compiler) {
+            compiler.hooks.beforeCompile.tapPromise(pluginName, initPlugin);
+        },
+        async buildStart() {
+            if (meta.framework === 'rollup') {
+                await initPlugin();
+            }
+            if (inputPath) {
+                this.addWatchFile(inputPath);
+            }
+        },
+        transformInclude(id) {
+            if (isWebpack && id.endsWith('.html')) {
+                return false;
+            }
+            return !(id.endsWith('.css') ||
+                id.endsWith('.scss') ||
+                id.includes('node_modules/'));
+        },
+        transform(code, id) {
+            jitEngine.putContent(id, code);
+            return null;
+        },
+        async transformIndexHtml(html, ctx) {
+            jitEngine.putContent(ctx.filename, html);
+            if (isViteWatch) {
+                debouncedWriteCssFile();
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'link',
+                            attrs: { rel: 'stylesheet', href: finalOptions.output },
+                        },
+                    ],
+                };
+            }
+            else if (isVite) {
+                await writeCssFile();
+            }
+            return html;
+        },
+        async watchChange(id, change) {
+            if (inputPath === id) {
+                await fs.promises.readFile(id)
+                    .then((data) => jitEngine.updateSassConfig(data.toString()));
+                if (isVite) {
+                    await writeCssFile();
+                }
+            }
+            else if (change.event === 'delete') {
+                jitEngine.deleteContent(id);
+            }
+        },
+        async buildEnd() {
+            if (!isVite) {
+                await writeCssFile();
+            }
+        },
+    };
+});
+export const rollup = unplugin.rollup;
+export const vite = unplugin.vite;
+export const webpack = unplugin.webpack;

package/dist/transformCss.d.ts

@@ -0,0 +1,6 @@
+export interface TransformCssOptions {
+    readonly minify?: boolean;
+    readonly autoprefixer?: boolean;
+    readonly noMergeMq?: boolean;
+}
+export declare function transformCss(css: string, options: TransformCssOptions): Promise<string>;

package/dist/transformCss.js

@@ -0,0 +1,64 @@
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+let isMinifierCanAddPrefixes = false;
+const transformByAvailableTool = await import('csso')
+    .then(({ minify }) => ((css, { noMergeMq }) => Promise.resolve(minify(css, { forceMediaMerge: !noMergeMq }).css)))
+    .catch(async () => {
+    const { transform, browserslistToTargets } = (await import('lightningcss'));
+    const browserslist = (await import('browserslist')).default;
+    let targets;
+    isMinifierCanAddPrefixes = true;
+    return (css, { autoprefixer, minify }) => {
+        if (autoprefixer && targets == undefined) {
+            targets = browserslistToTargets(browserslist());
+        }
+        const { code } = transform({
+            filename: 'style.css',
+            targets,
+            code: Buffer.from(css),
+            minify,
+        });
+        return Promise.resolve(code.toString());
+    };
+})
+    .catch(() => {
+    const CleanCss = require('clean-css');
+    const minifier = new CleanCss({
+        level: 2,
+        returnPromise: true,
+    });
+    return (css) => minifier.minify(css).then((r) => r.styles);
+})
+    .catch(async () => {
+    const esbuild = await import('esbuild');
+    return async (css) => {
+        return esbuild.transform(css, {
+            loader: 'css',
+            minify: true,
+        }).then((r) => r.code);
+    };
+})
+    .catch(() => {
+    throw new Error('No CSS minifier was found. You can install one of these: csso, lightningcss, clean-css, cssnano or esbuild');
+});
+const applyAutoprefixer = await import('autoprefixer')
+    .then(async (autoprefixer) => {
+    const postcss = (await import('postcss')).default;
+    const processor = postcss([autoprefixer.default]);
+    const options = { from: undefined };
+    return (css) => processor.process(css, options).then((r) => (r.css));
+})
+    .catch(() => undefined);
+export async function transformCss(css, options) {
+    let result = css;
+    if (options.minify || isMinifierCanAddPrefixes) {
+        result = await transformByAvailableTool(css, options);
+    }
+    if (options.autoprefixer && !isMinifierCanAddPrefixes) {
+        if (applyAutoprefixer === undefined) {
+            throw new Error('The Autoprefixer package are not installed. You can do this with `npm i -D postcss autoprefixer`');
+        }
+        result = await applyAutoprefixer(result);
+    }
+    return result;
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@mlut/plugins",
+	"version": "1.0.0",
+	"description": "mlut plugins for Rollup, Vite and Webpack",
+	"author": "mr150",
+	"type": "module",
+	"license": "MIT",
+	"homepage": "https://mr150.github.io/mlut/",
+	"types": "dist/index.d.ts",
+	"keywords": [
+		"mlut",
+		"atomic css",
+		"functional css",
+		"utility-first",
+		"plugin",
+		"unplugin",
+		"rollup",
+		"vite",
+		"webpack"
+	],
+	"repository": {
+		"type": "git",
+		"directory": "packages/plugins",
+		"url": "https://github.com/mr150/mlut.git"
+	},
+	"bugs": {
+		"url": "https://github.com/mr150/mlut/issues"
+	},
+	"exports": {
+		".": {
+			"default": "./dist/index.js"
+		}
+	},
+	"scripts": {
+		"build": "rm -rf dist && tsc"
+	},
+	"files": [
+		"dist"
+	],
+	"devDependencies": {
+		"@types/clean-css": "^4.2.11",
+		"@types/fs-extra": "^11.0.4",
+		"@types/node": "^20.10.5",
+		"autoprefixer": "^10.4.19",
+		"browserslist": "^4.23.1",
+		"clean-css": "^5.3.3",
+		"csso": "^5.0.5",
+		"esbuild": "^0.21.5",
+		"lightningcss": "^1.25.1",
+		"postcss": "^8.4.38",
+		"typescript": "^4.8.0"
+	},
+	"dependencies": {
+		"@mlut/core": "^2.0.0",
+		"fs-extra": "^11.2.0",
+		"unplugin": "^1.10.1"
+	}
+}