@mlut/plugins 1.0.0 → 1.0.2

package/README.md

@@ -87,8 +87,8 @@ interface Options {
 
 - `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
+- `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. When using `lightningcss`, you will also need to install [browserslist](https://github.com/browserslist/browserslist)
+- `autoprefixer` - whether to add vendor prefixes to CSS properties. You need the [autoprefixer](https://github.com/postcss/autoprefixer) package or [lightningcss](https://github.com/parcel-bundler/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

package/dist/index.js

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import { jitEngine, logger } from '@mlut/core';
 import { createUnplugin } from 'unplugin';
 import fs from 'fs-extra';
@@ -10,9 +11,11 @@ function debounce(fn, timeout) {
     };
 }
 export const unplugin = createUnplugin((options, meta) => {
+    const cwd = process.cwd();
     const pluginName = 'unplugin-mlut';
     const finalOptions = { output: '' };
-    const inputPath = options.input;
+    const inputPath = options.input && path.resolve(cwd, options.input);
+    let outputPath = '';
     let lastCompiledCss = '';
     const isWebpack = meta.framework === 'webpack';
     let isVite = false;
@@ -21,11 +24,14 @@ export const unplugin = createUnplugin((options, meta) => {
         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));
+            await fs.outputFile(outputPath, await transformCss(css, finalOptions)).catch((e) => logger.error('Failed to write the output file.', e));
         }
     };
     const debouncedWriteCssFile = debounce(writeCssFile, 500);
     const initPlugin = async () => {
+        if (outputPath) {
+            return;
+        }
         let inputContent = '';
         if (inputPath) {
             inputContent = await fs.promises.readFile(inputPath)
@@ -49,6 +55,10 @@ export const unplugin = createUnplugin((options, meta) => {
             throw new Error('Output path not specified!');
         }
         await jitEngine.init([inputPath, inputContent]);
+        outputPath = path.resolve(cwd, finalOptions.output);
+        if (isViteWatch) {
+            await fs.outputFile(outputPath, '').catch(() => undefined);
+        }
     };
     return {
         name: pluginName,
@@ -61,13 +71,13 @@ export const unplugin = createUnplugin((options, meta) => {
             return {
                 server: {
                     watch: {
-                        ignored: ['!' + finalOptions.output]
+                        ignored: ['!' + outputPath]
                     }
                 },
             };
         },
         configureServer(server) {
-            server.watcher.add(finalOptions.output);
+            server.watcher.add(outputPath);
         },
         webpack(compiler) {
             compiler.hooks.beforeCompile.tapPromise(pluginName, initPlugin);
@@ -101,14 +111,12 @@ export const unplugin = createUnplugin((options, meta) => {
                     tags: [
                         {
                             tag: 'link',
-                            attrs: { rel: 'stylesheet', href: finalOptions.output },
+                            attrs: { rel: 'stylesheet', href: outputPath },
                         },
                     ],
                 };
             }
-            else if (isVite) {
-                await writeCssFile();
-            }
+            await writeCssFile();
             return html;
         },
         async watchChange(id, change) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/plugins",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "mlut plugins for Rollup, Vite and Webpack",
 	"author": "mr150",
 	"type": "module",
@@ -51,7 +51,7 @@
 		"typescript": "^4.8.0"
 	},
 	"dependencies": {
-		"@mlut/core": "^2.0.0",
+		"@mlut/core": "^2.1.0",
 		"fs-extra": "^11.2.0",
 		"unplugin": "^1.10.1"
 	}