diff --git a/docs/homepage.md b/docs/homepage.md index a2788e58..2d839f9d 100644 --- a/docs/homepage.md +++ b/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/) diff --git a/package-lock.json b/package-lock.json index a850ab30..1c759e43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16320,7 +16320,7 @@ }, "packages/core": { "name": "@mlut/core", - "version": "2.1.0", + "version": "2.1.1", "license": "MIT", "devDependencies": { "@types/node": "^20.10.5", @@ -16353,7 +16353,7 @@ }, "packages/plugins": { "name": "@mlut/plugins", - "version": "1.0.2", + "version": "1.0.3", "license": "MIT", "dependencies": { "@mlut/core": "^2.1.0", diff --git a/packages/core/package.json b/packages/core/package.json index 97224528..8bb841fa 100644 --- a/packages/core/package.json +++ b/packages/core/package.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", diff --git a/packages/core/src/jit/JitEngine.ts b/packages/core/src/jit/JitEngine.ts index 34c67a8a..0548d10b 100644 --- a/packages/core/src/jit/JitEngine.ts +++ b/packages/core/src/jit/JitEngine.ts @@ -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(); @@ -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 ( diff --git a/packages/mlut/README.md b/packages/mlut/README.md index 9bb6fc72..b1094340 100644 --- a/packages/mlut/README.md +++ b/packages/mlut/README.md @@ -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 diff --git a/packages/plugins/package.json b/packages/plugins/package.json index abec170e..4866ecaa 100644 --- a/packages/plugins/package.json +++ b/packages/plugins/package.json @@ -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", diff --git a/packages/plugins/src/index.ts b/packages/plugins/src/index.ts index 3a7a7a65..adc711f3 100644 --- a/packages/plugins/src/index.ts +++ b/packages/plugins/src/index.ts @@ -24,10 +24,12 @@ export const unplugin = createUnplugin((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, 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, 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, meta) => { transform(code, id) { jitEngine.putContent(id, code); + + if (isViteWatch) { + debouncedWriteCssFile(); + } + return null; }, @@ -164,7 +179,7 @@ export const unplugin = createUnplugin((options, meta) => { tags: [ { tag: 'link', - attrs: { rel: 'stylesheet', href: outputPath }, + attrs: { rel: 'stylesheet', href: viteWatchOutputPath }, }, ], }; diff --git a/test/jit/JitEngine.test.ts b/test/jit/JitEngine.test.ts index 5128dd10..0566e06c 100644 --- a/test/jit/JitEngine.test.ts +++ b/test/jit/JitEngine.test.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 = '
000
'; @@ -45,11 +46,13 @@ md_Gc-s1 Pb6u Ps Lol5 md_Mxh130vh Ps Lorem \`Ipsum\` +