@ecopages/postcss-processor 0.2.0-alpha.1 → 0.2.0-alpha.3

package/src/runtime/css-loader.bun.js

@@ -0,0 +1,22 @@
+import { getFileAsBuffer } from "../postcss-processor";
+const createBunCssLoaderPlugin = ({ name, filter, transform }) => ({
+  name,
+  setup(build) {
+    build.onLoad({ filter }, async (args) => {
+      const rawFile = await getFileAsBuffer(args.path);
+      const css = await transform({
+        contents: rawFile,
+        filePath: args.path
+      });
+      return {
+        exports: {
+          default: css
+        },
+        loader: "object"
+      };
+    });
+  }
+});
+export {
+  createBunCssLoaderPlugin
+};

package/src/runtime/css-runtime-contract.d.ts

@@ -0,0 +1,5 @@
+export type CssTransformInput = {
+    contents: string | Buffer;
+    filePath: string;
+};
+export type CssTransform = (input: CssTransformInput) => string | Promise<string>;

package/src/test/css/base.css

@@ -1,3 +0,0 @@
-.base {
-	color: red;
-}

package/src/test/css/correct.css

@@ -1,3 +0,0 @@
-.test {
-	@apply bg-red-500;
-}

package/src/test/css/error.css

@@ -1,3 +0,0 @@
-.test {
-	@apply bg-reds-500;
-}

package/src/test/css/external-plugins.css

@@ -1,13 +0,0 @@
-$dir: top;
-$blue: #056ef0;
-$column: 200px;
-
-.menu_link {
-	background: $blue;
-	width: $column;
-}
-
-.menu {
-	width: calc(4 * $column);
-	margin-$(dir): 10px;
-}

package/src/test/css/import.css

@@ -1,4 +0,0 @@
-@import 'base.css';
-.main {
-	background: blue;
-}

package/src/test/plugin.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, test, afterAll, beforeAll, vi } from 'vitest';
-import path from 'node:path';
-import fs from 'node:fs';
-import { PostCssProcessorPlugin } from '../plugin';
-import type { ClientBridge } from '@ecopages/core/adapters/bun/client-bridge';
-import { ConfigBuilder } from '@ecopages/core/config-builder';
-
-const TMP_DIR = path.join(__dirname, 'tmp_test_hmr');
-const SRC_DIR = path.join(TMP_DIR, 'src');
-const DIST_DIR = path.join(TMP_DIR, 'dist');
-
-describe('PostCssProcessorPlugin HMR', () => {
-	beforeAll(() => {
-		if (fs.existsSync(TMP_DIR)) {
-			fs.rmSync(TMP_DIR, { recursive: true, force: true });
-		}
-		fs.mkdirSync(SRC_DIR, { recursive: true });
-		fs.mkdirSync(DIST_DIR, { recursive: true });
-	});
-
-	afterAll(() => {
-		fs.rmSync(TMP_DIR, { recursive: true, force: true });
-	});
-
-	test('handleCssChange should apply transformInput', async () => {
-		const cssFile = path.join(SRC_DIR, 'style.css');
-		fs.writeFileSync(cssFile, '.foo { color: red; }');
-
-		const plugin = new PostCssProcessorPlugin({
-			options: {
-				filter: /\.css$/,
-				transformInput: async (content) => {
-					return `/* prefix */\n${content}`;
-				},
-			},
-		});
-
-		const config = await new ConfigBuilder()
-			.setRootDir(TMP_DIR)
-			.setSrcDir('src')
-			.setDistDir('dist')
-			.setBaseUrl('http://localhost:3000')
-			.build();
-
-		plugin.setContext(config);
-
-		const Bridge = {
-			cssUpdate: () => {},
-			error: (msg: string) => {
-				throw new Error(msg);
-			},
-			reload: () => {},
-		} as unknown as ClientBridge;
-
-		const bridgeSpy = vi.spyOn(Bridge, 'cssUpdate');
-
-		const watchConfig = plugin.getWatchConfig();
-		if (watchConfig && watchConfig.onChange) {
-			await watchConfig.onChange({ path: cssFile, bridge: Bridge });
-		} else {
-			throw new Error('Plugin does not have watch handler');
-		}
-
-		const outputFile = path.join(DIST_DIR, 'assets', 'style.css');
-		expect(fs.existsSync(outputFile)).toBe(true);
-
-		const outputContent = fs.readFileSync(outputFile, 'utf-8');
-		expect(outputContent).toContain('/* prefix */');
-		expect(outputContent).toContain('.foo { color: red; }');
-
-		expect(bridgeSpy).toHaveBeenCalled();
-		expect(bridgeSpy).toHaveBeenCalledWith(cssFile);
-	});
-});

package/src/test/postcss-processor.test.ts

@@ -1,106 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import path from 'node:path';
-import postCssSimpleVars from 'postcss-simple-vars';
-import { PostCssProcessor } from '../postcss-processor';
-import { tailwindV3Preset } from '../presets/tailwind-v3';
-
-describe('PostCssProcessor', () => {
-	test('processPath should return the processed CSS', async () => {
-		const filePath = path.resolve(__dirname, './css/correct.css');
-		const expected = '.test{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processPath(filePath, { plugins: plugins ? Object.values(plugins) : [] });
-		expect(result).toEqual(expected);
-	});
-
-	test('processPath should return an empty string when an error occurs during css conversion', async () => {
-		const filePath = path.resolve(__dirname, './css/error.css');
-		const expected = '';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processPath(filePath, { plugins: plugins ? Object.values(plugins) : [] });
-		expect(result).toEqual(expected);
-	});
-
-	test('processPath should throw when the file does not exist', async () => {
-		const filePath = 'fake-path.css';
-		await expect(PostCssProcessor.processPath(filePath)).rejects.toThrow();
-	});
-
-	test('processPath should use the custom plugins', async () => {
-		const filePath = path.resolve(__dirname, './css/external-plugins.css');
-		const expected = '.menu_link{background:#056ef0;width:200px}.menu{margin-top:10px;width:800px}';
-		const result = await PostCssProcessor.processPath(filePath, {
-			plugins: [...Object.values(tailwindV3Preset().plugins ?? {}), postCssSimpleVars()],
-		});
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should return the processed CSS', async () => {
-		const string = 'body { @apply bg-white; }';
-		const expected = 'body{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processStringOrBuffer(string, {
-			plugins: plugins ? Object.values(plugins) : [],
-		});
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should return an empty string when an error occurs during css conversion', async () => {
-		const string = 'body { @apply bg-whites; }';
-		const expected = '';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processStringOrBuffer(string, {
-			plugins: plugins ? Object.values(plugins) : [],
-		});
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should return an empty string when the input is empty', async () => {
-		const string = '';
-		const expected = '';
-		const result = await PostCssProcessor.processStringOrBuffer(string);
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should use the custom plugins', async () => {
-		const string = '$blue: #056ef0; body { background: $blue; }';
-		const expected = 'body{background:#056ef0}';
-		const result = await PostCssProcessor.processStringOrBuffer(string, {
-			plugins: [...Object.values(tailwindV3Preset().plugins ?? {}), postCssSimpleVars()],
-		});
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should use the transformOutput', async () => {
-		const string = 'body { background: #056ef0; }';
-		const expected = '@reference "../app.css";\nbody{background:#056ef0}';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processStringOrBuffer(string, {
-			plugins: plugins?.cssnano ? [plugins.cssnano] : [],
-			transformOutput: (css) => {
-				return `@reference "../app.css";\n${css}`;
-			},
-		});
-		expect(result).toEqual(expected);
-	});
-
-	test('processPath should resolve @import', async () => {
-		const filePath = path.resolve(__dirname, './css/import.css');
-		const expected = '.base{color:red}.main{background:blue}';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processPath(filePath, { plugins: plugins ? Object.values(plugins) : [] });
-		expect(result).toEqual(expected);
-	});
-
-	test('processStringOrBuffer should resolve @import', async () => {
-		const string = '@import "base.css"; .main { background: blue; }';
-		const filePath = path.resolve(__dirname, './css/import.css');
-		const expected = '.base{color:red}.main{background:blue}';
-		const { plugins } = tailwindV3Preset();
-		const result = await PostCssProcessor.processStringOrBuffer(string, {
-			filePath,
-			plugins: plugins ? Object.values(plugins) : [],
-		});
-		expect(result).toEqual(expected);
-	});
-});

package/src/test/presets.test.ts

@@ -1,140 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import path from 'node:path';
-import { PostCssProcessor } from '../postcss-processor';
-import { tailwindV3Preset } from '../presets/tailwind-v3';
-import { tailwindV4Preset } from '../presets/tailwind-v4';
-
-describe('Presets Verification', () => {
-	const cssToPrefix = `
-		.test-prefix {
-			user-select: none;
-			backdrop-filter: blur(10px);
-			appearance: none;
-		}
-	`;
-
-	const cssWithImport = `
-		@import "base.css";
-		.main { background: blue; }
-	`;
-
-	test('Tailwind v3 preset should add vendor prefixes', async () => {
-		const { plugins } = tailwindV3Preset();
-		/**
-		 * Disable cssnano for readable output logic check, or just check content calls
-		 * By default preset includes cssnano.
-		 */
-
-		const result = await PostCssProcessor.processStringOrBuffer(cssToPrefix, {
-			plugins: plugins ? Object.values(plugins) : [],
-			filePath: path.resolve(__dirname, 'style.css'),
-		});
-
-		/**
-		 * cssnano will minify, so we check minified output
-		 * user-select: none -> -webkit-user-select:none;user-select:none
-		 * backdrop-filter: blur(10px) -> -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
-		 * appearance: none -> -webkit-appearance:none;-moz-appearance:none;appearance:none
-		 */
-
-		expect(result).toContain('-webkit-user-select:none');
-		expect(result).toContain('user-select:none');
-
-		expect(result).toContain('-webkit-backdrop-filter:blur(10px)');
-		expect(result).toContain('backdrop-filter:blur(10px)');
-
-		expect(result).toContain('appearance:none');
-	});
-
-	test('Tailwind v3 preset should support nesting', async () => {
-		const { plugins } = tailwindV3Preset();
-		const cssWithNesting = `
-			.parent {
-				& .child { color: blue; }
-				&__element { color: green; }
-			}
-		`;
-
-		const result = await PostCssProcessor.processStringOrBuffer(cssWithNesting, {
-			plugins: plugins ? Object.values(plugins) : [],
-			filePath: path.resolve(__dirname, 'style.css'),
-		});
-
-		expect(result).toContain('.parent .child{color:blue}');
-		expect(result).toContain('.parent__element{color:green}');
-	});
-
-	test('Tailwind v4 preset should add vendor prefixes (via Lightning CSS)', async () => {
-		const preset = tailwindV4Preset({
-			referencePath: path.resolve(__dirname, '../fixtures/tailwind.css'),
-		});
-
-		const result = await PostCssProcessor.processStringOrBuffer(cssToPrefix, {
-			plugins: preset.plugins ? Object.values(preset.plugins) : [],
-			filePath: path.resolve(__dirname, 'style.css'),
-		});
-
-		/**
-		 * Lightning CSS used by @tailwindcss/postcss should verify this
-		 * Note: The specific prefixes might depend on the browser targets configured in package.json or defaults
-		 */
-
-		expect(result).toContain('-webkit-user-select:none');
-		expect(result).toContain('user-select:none');
-
-		expect(result).toContain('-webkit-backdrop-filter:blur(10px)');
-		expect(result).toContain('backdrop-filter:blur(10px)');
-
-		expect(result).toContain('appearance:none');
-	});
-
-	test('Tailwind v4 preset should resolve @import', async () => {
-		const preset = tailwindV4Preset({
-			referencePath: path.resolve(__dirname, '../fixtures/tailwind.css'),
-		});
-
-		/**
-		 * Provide a filePath that allows resolving sibling files (like base.css in existing tests/css dir)
-		 * We'll leverage the existing test css files
-		 */
-		const filePath = path.resolve(__dirname, 'css/import.css');
-
-		const result = await PostCssProcessor.processStringOrBuffer(cssWithImport, {
-			plugins: preset.plugins ? Object.values(preset.plugins) : [],
-			filePath,
-		});
-
-		/**
-		 * Expect content from base.css (.base { color: red }) + main css content
-		 * Minified output expected
-		 */
-		expect(result).toContain('.base{color:red}');
-		expect(result).toContain('.main{background:blue}');
-	});
-});
-
-test('Tailwind v4 preset should support nesting', async () => {
-	const preset = tailwindV4Preset({
-		referencePath: path.resolve(__dirname, '../fixtures/tailwind.css'),
-	});
-
-	const cssWithNesting = `
-			.parent {
-				color: red;
-				& .child {
-					color: blue;
-				}
-				&__element {
-					color: green;
-				}
-			}
-		`;
-
-	const result = await PostCssProcessor.processStringOrBuffer(cssWithNesting, {
-		plugins: preset.plugins ? Object.values(preset.plugins) : [],
-		filePath: path.resolve(__dirname, 'style.css'),
-	});
-
-	expect(result).toContain('.parent .child{color:blue}');
-	expect(result).toContain('.parent__element{color:green}');
-});