Match selectors within processed JSX objects.

stylify · Feb 12, 2023 · 4076b87 · 4076b87
1 parent 030e86d
commit 4076b87
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 1 deletion.
diff --git a/packages/stylify/src/Compiler/defaultPreset.ts b/packages/stylify/src/Compiler/defaultPreset.ts
@@ -99,6 +99,10 @@ export const defaultPreset = {
 		'(?:^|\\s+)className="([^"]+)"',
 		'(?:^|\\s+)className=\'([^\']+)\'',
 		'(?:^|\\s+)className=\\{((?:.|\\n)+)\\}',
+		// JSX compiled
+		'(?:^|\\s+)className:\\s*`((?:.|\\n)+)`',
+		'(?:^|\\s+)className:\\s*"([^"]+)"',
+		'(?:^|\\s+)className:\\s*\'([^\']+)"',
 		// Vue and alpinejs
 		'(?:^|\\s+)(?:v-bind|x-bind)?:class="([^"]+)"',
 		'(?:^|\\s+)(?:v-bind|x-bind)?:class=\'([^\']+)\'',

diff --git a/packages/unplugin/src/index.ts b/packages/unplugin/src/index.ts
@@ -159,7 +159,7 @@ export const unplugin = createUnplugin((config: UnpluginConfigInterface|Unplugin
 		name: pluginName,
 		transformInclude(id) { return pluginConfig.transformIncludeFilter(id); },
 		async transform(code) {
-			if (pluginConfig.dev) {
+			if (!shouldMangleSelectors()) {
 				return code;
 			}
 

diff --git a/packages/unplugin/tests/jest/vite-react.test.ts b/packages/unplugin/tests/jest/vite-react.test.ts
@@ -0,0 +1,40 @@
+import path from 'path';
+import FastGlob from 'fast-glob';
+import fs from 'fs';
+import fse from 'fs-extra';
+import TestUtils from '../../../../tests/TestUtils';
+import { execSync } from 'child_process';
+
+const testName = 'vite-react';
+const testUtils = new TestUtils('unplugin', testName);
+
+const bundleTestDir = testUtils.getTestDir();
+const buildTmpDir = path.join(testUtils.getTmpDir(), testUtils.getTestName() + '-build');
+
+if (!fs.existsSync(buildTmpDir)) {
+	fs.mkdirSync(buildTmpDir, {recursive: true});
+}
+
+fse.copySync(path.join(bundleTestDir, 'input'), buildTmpDir);
+
+execSync(
+	`cd ${buildTmpDir} && yarn install && yarn build`
+	//,{stdio: 'inherit'}
+);
+
+const jsFileContentPart = `Hu("div",{className:"a",children:[Hu("div",{className:"b",children:"Hello World! 🎉"}`.trim();
+const jsFileContentPart2 = `{className:\`
+				e
+			\``;
+
+test('Vite - React', async (): Promise<void> => {
+	const [jsFileEntry] = FastGlob.sync(`${buildTmpDir}/dist/assets/*.js`);
+	const [cssFileEntry] = FastGlob.sync(`${buildTmpDir}/dist/assets/*.css`);
+
+	const cssFileContent = testUtils.readFile(cssFileEntry);
+	const jsFileContent = testUtils.readFile(jsFileEntry);
+
+	testUtils.testCssFileToBe(cssFileContent, 'output');
+	expect(jsFileContent.includes(jsFileContentPart)).toBeTruthy();
+	expect(jsFileContent.includes(jsFileContentPart2)).toBeTruthy();
+});
diff --git a/packages/unplugin/tests/jest/vite-react/expected/output.css b/packages/unplugin/tests/jest/vite-react/expected/output.css
@@ -0,0 +1 @@
+:root{--titleFontSize: 42px;--containerWidth: 800px}.a{max-width:800px}.a{margin:0 auto}.a,.e{background:red}.b{text-align:right}.b{margin-top:100px}.b{font-size:42px}.b{color:#00f}
diff --git a/packages/unplugin/tests/jest/vite-react/input/.gitignore b/packages/unplugin/tests/jest/vite-react/input/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+src/stylify.css
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/unplugin/tests/jest/vite-react/input/index.html b/packages/unplugin/tests/jest/vite-react/input/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Vite + React</title>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
diff --git a/packages/unplugin/tests/jest/vite-react/input/package.json b/packages/unplugin/tests/jest/vite-react/input/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "vite-react-starter",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build --mode production",
+		"preview": "vite preview",
+		"start": "vite start"
+	},
+	"dependencies": {
+		"react": "^18.2",
+		"react-dom": "^18.2"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0",
+		"@types/react-dom": "18.0",
+		"@vitejs/plugin-react": "^3.1",
+		"vite": "^4.1"
+	}
+}
diff --git a/packages/unplugin/tests/jest/vite-react/input/src/App.jsx b/packages/unplugin/tests/jest/vite-react/input/src/App.jsx
@@ -0,0 +1,22 @@
+/*
+stylify-variables
+titleFontSize: '42px',
+containerWidth: '800px'
+/stylify-variables
+
+stylify-components
+container: 'max-width:$containerWidth margin:0__auto background:red',
+title: 'text-align:right margin-top:100px font-size:$titleFontSize color:blue'
+/stylify-components
+*/
+
+import Button from './Button';
+
+export default function App() {
+	return (
+		<div className="container">
+			<div className="title">Hello World! 🎉</div>
+			<Button>asdasd</Button>
+		</div>
+	);
+}
diff --git a/packages/unplugin/tests/jest/vite-react/input/src/Button.jsx b/packages/unplugin/tests/jest/vite-react/input/src/Button.jsx
@@ -0,0 +1,13 @@
+import { Children } from 'react';
+
+export default function Button({ children }) {
+	return (
+		<button
+			className={`
+				background:red
+			`}
+		>
+			{children}
+		</button>
+	);
+}
diff --git a/packages/unplugin/tests/jest/vite-react/input/src/main.jsx b/packages/unplugin/tests/jest/vite-react/input/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './stylify.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);
diff --git a/packages/unplugin/tests/jest/vite-react/input/vite.config.js b/packages/unplugin/tests/jest/vite-react/input/vite.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { stylifyVite } from '../../src';
+
+const stylifyPlugin = stylifyVite({
+	// Because of the tmp dir, that is ignored by default
+	transformIncludeFilter: () => true,
+	bundles: [
+		{
+			outputFile: './src/stylify.css',
+			files: ['./src/**'],
+			rewriteSelectorsInFiles: false
+		}
+	]
+});
+
+export default defineConfig({
+	plugins: [stylifyPlugin, react()]
+});