Merge pull request #62 from mr150/fix/plugins-issues

Fix/plugins issues
mr150 · Jul 19, 2024 · 824869e · 824869e
2 parents 9acb05e + 26da8d9
commit 824869e
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 72 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,7 +1,4 @@
 root: true
-env:
-  browser: true
-  es2021: true
 extends:
   - eslint:recommended
   - plugin:@typescript-eslint/recommended

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -6,6 +6,8 @@ on:
       - 'packages'
       - 'test'
       - '.github/workflows/test.yml'
+    branches:
+      - '**'
   push:
     branches:
       - master
@@ -29,3 +31,5 @@ jobs:
         run: npm run lint
       - name: Test
         run: npm test
+      - name: Test plugins
+        run: npm run test:plugins
diff --git a/docs/content/main.css b/docs/content/main.css
@@ -185,8 +185,8 @@ You can add the options in your input Sass file too. Options must be a **valid J
 
 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
 
 Weight: 1
@@ -199,6 +199,14 @@ 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)
 
+We also recommend adding the input file right away:
+```scss
+// style.scss
+@use '@mlut/core';
+
+// your CSS or mlut config
+```
+
 Weight: 1
 
 Styleguide: start.integrations.usage

diff --git a/docs/homepage.md b/docs/homepage.md
@@ -124,7 +124,7 @@ Add utilities, states and custom at-rules with few lines of code
 
 </section>
 
-<section class="Mb4gg">
+<section class="Mb3gg">
 
 ## Structure ##
 - Sass tools
@@ -170,6 +170,7 @@ Addons may contains any tools, settings and styles. Addons now at the **preview*
 ## What next? ##
 - first class CSS functions in utilities values
 - states and at-rules grouping 
+- performance optimization
 - and much more!
 
 </section>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
 		"build:mlut": "npm run build --workspace=mlut && npx gulp -f gulpfile.cjs sass",
 		"build:core": "npm run build --workspace=@mlut/core",
 		"build:plugins": "npm run build --workspace=@mlut/plugins",
+		"test:plugins": "vite build -c test/plugins/vite/vite.config.js && webpack -c test/plugins/webpack/webpack.config.js && rollup --config test/plugins/rollup/rollup.config.js",
 		"lint": "npx eslint packages/*/src/ && npx stylelint packages/core/src/sass --ip packages/core/src/sass/tools/mixins/base/_mk-ar.scss",
 		"test": "mocha test/sass/index.js && mocha"
 	},
@@ -34,6 +35,7 @@
 		"gulp-plumber": "^1.2.1",
 		"gulp-rename": "^2.0.0",
 		"gulp-sass": "^5.0.0",
+		"fs-extra": "^11.2.0",
 		"gulp-shell": "^0.8.0",
 		"gulp-size": "^4.0.0",
 		"gulp-sourcemaps": "^3.0.0",

diff --git a/packages/mlut/README.md b/packages/mlut/README.md
@@ -273,6 +273,7 @@ Available [here](https://mr150.github.io/mlut/) or can be run locally. Documenta
 ## What next? ##
 - first class CSS functions in utilities values
 - states and at-rules grouping 
+- performance optimization
 - and much more!
 
 ## Acknowledgement ##

diff --git a/packages/plugins/README.md b/packages/plugins/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

diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/plugins",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "mlut plugins for Rollup, Vite and Webpack",
 	"author": "mr150",
 	"type": "module",

diff --git a/packages/plugins/src/index.ts b/packages/plugins/src/index.ts
@@ -1,3 +1,4 @@
+import path from 'node:path';
 import { jitEngine, logger } from '@mlut/core';
 import { createUnplugin } from 'unplugin';
 import fs from 'fs-extra';
@@ -20,9 +21,11 @@ function debounce<T>(fn: (...args: T[]) => unknown, timeout: number) {
 }
 
 export const unplugin = createUnplugin<Options>((options, meta) => {
+	const cwd = process.cwd();
 	const pluginName = 'unplugin-mlut';
 	const finalOptions: Options = { 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;
@@ -35,7 +38,7 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 			lastCompiledCss = css;
 
 			await fs.outputFile(
-				finalOptions.output,
+				outputPath,
 				await transformCss(css, finalOptions),
 			).catch((e) => logger.error('Failed to write the output file.', e));
 		}
@@ -44,6 +47,10 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 	const debouncedWriteCssFile = debounce(writeCssFile, 500);
 
 	const initPlugin = async () => {
+		if (outputPath) {
+			return;
+		}
+
 		let inputContent = '';
 
 		if (inputPath) {
@@ -74,6 +81,11 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 		}
 
 		await jitEngine.init([inputPath, inputContent]);
+		outputPath = path.resolve(cwd, finalOptions.output);
+
+		if (isViteWatch) {
+			await fs.outputFile(outputPath, '').catch(() => undefined);
+		}
 	};
 
 	return {
@@ -93,7 +105,7 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 			return {
 				server: {
 					watch: {
-						ignored: ['!' + finalOptions.output]
+						ignored: ['!' + outputPath]
 					}
 				},
 			};
@@ -102,7 +114,7 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 		// Vite only hook
 		// TODO: add the Vite types
 		configureServer(server: { watcher: FSWatcher }) {
-			server.watcher.add(finalOptions.output);
+			server.watcher.add(outputPath);
 		},
 
 		// hack because `buildStart` is not async in Webpack yet
@@ -152,14 +164,13 @@ export const unplugin = createUnplugin<Options>((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;
 		},