Merge pull request #74 from mr150/fix/windows-issues

Fix Windows issues

Author: mr150

docs/homepage.md

@@ -171,6 +171,7 @@ Addons may contains any tools, settings and styles. Addons now at the **preview*
 ## Articles ##
 - Atomic CSS Deep Dive: [EN](https://dev.to/mr150/atomic-css-deep-dive-1hee), [RU](https://habr.com/ru/articles/833712/)
 - [mlut - a new word in the Utility-First CSS approach](https://dev.to/mr150/mlut-a-new-word-in-the-utility-first-css-approach-gbl)
+- How to make one plugin for all frontend bundlers at once: [RU](https://habr.com/ru/articles/856028/)
 
 </section>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",

packages/core/package.json

@@ -1,4 +1,5 @@
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import { logger } from '../utils/index.js';
 
@@ -10,7 +11,7 @@ const sass = await import('sass-embedded')
 		);
 	});
 
-const __dirname = new URL('.', import.meta.url).pathname;
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export class JitEngine {
 	private utils = new Set<string>();
@@ -29,6 +30,7 @@ export class JitEngine {
 		utilName: /^-?[A-Z]{1}[a-zA-Z]*/,
 		uppercaseLetter: /[A-Z]/,
 		contextUtil: /-Ctx([\d\-#]|$)/,
+		valueSeparator: /[0-9-#=]/,
 	};
 	private readonly configRegexps = {
 		userSettings: /@use ['"][^'"]*(tools|mlut|core)['"](\s*as\s+[\w]+)?\s+with\s*\(([^;]+)\);/s,
@@ -122,6 +124,12 @@ export class JitEngine {
 			));
 
 			if (utility) {
+				const separator = utility.replace(this.utilsRegexps.utilName, '')[0];
+
+				if (separator && !this.utilsRegexps.valueSeparator.test(separator)) {
+					return acc;
+				}
+
 				const utilName = utility.match(this.utilsRegexps.utilName)?.[0] as string;
 
 				if (

packages/core/src/jit/JitEngine.ts

@@ -276,6 +276,7 @@ Available [here](https://mr150.github.io/mlut/) or can be run locally. Documenta
 ## Articles ##
 - Atomic CSS Deep Dive: [EN](https://dev.to/mr150/atomic-css-deep-dive-1hee), [RU](https://habr.com/ru/articles/833712/)
 - [mlut - a new word in the Utility-First CSS approach](https://dev.to/mr150/mlut-a-new-word-in-the-utility-first-css-approach-gbl)
+- How to make one plugin for all frontend bundlers at once: [RU](https://habr.com/ru/articles/856028/)
 
 ## What next? ##
 - first class CSS functions in utilities values

packages/mlut/README.md

@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/plugins",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"description": "mlut plugins for Rollup, Vite and Webpack",
 	"author": "mr150",
 	"type": "module",

packages/plugins/package.json

@@ -24,10 +24,12 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 	const cwd = process.cwd();
 	const pluginName = 'unplugin-mlut';
 	const finalOptions: Options = { output: '' };
-	const inputPath = options.input && path.resolve(cwd, options.input);
+	let inputPath = options.input && path.resolve(cwd, options.input);
 	let outputPath = '';
+	let viteWatchOutputPath = '';
 	let lastCompiledCss = '';
 	const isWebpack = meta.framework === 'webpack';
+	const isWindows = process.platform === 'win32';
 	let isVite = false;
 	let isViteWatch = false;
 
@@ -84,6 +86,13 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 		outputPath = path.resolve(cwd, finalOptions.output);
 
 		if (isViteWatch) {
+			if (isWindows) {
+				viteWatchOutputPath = path.isAbsolute(finalOptions.output) ?
+					finalOptions.output.replace(cwd, '') : finalOptions.output;
+			} else {
+				viteWatchOutputPath = outputPath;
+			}
+
 			await fs.outputFile(outputPath, '').catch(() => undefined);
 		}
 	};
@@ -95,6 +104,7 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 		// TODO: add the Vite types
 		async config(_config: unknown, { command }: { command: string }) {
 			isVite = true;
+			inputPath = inputPath?.replaceAll('\\', '/');
 
 			if (command === 'serve') {
 				isViteWatch = true;
@@ -149,6 +159,11 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 
 		transform(code, id) {
 			jitEngine.putContent(id, code);
+
+			if (isViteWatch) {
+				debouncedWriteCssFile();
+			}
+
 			return null;
 		},
 
@@ -164,7 +179,7 @@ export const unplugin = createUnplugin<Options>((options, meta) => {
 					tags: [
 						{
 							tag: 'link',
-							attrs: { rel: 'stylesheet', href: outputPath },
+							attrs: { rel: 'stylesheet', href: viteWatchOutputPath },
 						},
 					],
 				};

packages/plugins/src/index.ts

@@ -1,8 +1,9 @@
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { assert } from 'chai';
 import { JitEngine } from '../../packages/core/src/jit/JitEngine.js';
 
-const __dirname = new URL('.', import.meta.url).pathname;
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 describe('JitEngine', () => {
 	const htmlContent0 = '<div class="P1r">000</div>';
@@ -45,11 +46,13 @@ md_Gc-s1 Pb6u Ps Lol5    md_Mxh130vh Ps
 Lorem \`Ipsum\`
 </div>
 
+<style type="text/css" data-vite-dev-id="C:/Users/mister/Documents/web/ptoject/src/App.vue?vue&amp;type=style">
+
 const myStr = "simpl'e text" + ' testou' + "" + "[email protected]";
-const wrapperCss = "M1u	 -Myvar12 \\"Ps\\" d-g";
+const wrapperCss = "M1u	 -Myvar=block \\"Ps\\" d-g";
 
 <MyComponent className={cn('D-f \\'Gap5u', wrapperCss)}/>
-` + "\n<button className={`D-ib ${flag ? 'Bgc-red' : ''}`}>Clear</div>";
+` + "\n<button className={`D-ib ${flag ? 'Bgc#f00' : ''}`}>Clear</div>";
 	/* eslint-enable */
 
 	it('extract utils from the content', async () => {
@@ -71,10 +74,10 @@ const wrapperCss = "M1u	 -Myvar12 \\"Ps\\" d-g";
 				//eslint-disable-next-line
 				"Ct-'id:';attr(id)_b",
 				'M1u',
-				'-Myvar12',
+				'-Myvar=block',
 				'D-f',
 				'Gap5u',
-				'Bgc-red',
+				'Bgc#f00',
 				'D-ib',
 			],
 		);