Merge pull request #193 from stylify/externalvars

External variables content option

packages/stylify/src/Compiler/Compiler.ts

@@ -915,6 +915,13 @@ export class Compiler {
 				try {
 					if (option === 'pregenerate') {
 						contentOptions[option] += ` ${optionValue}`;
+					}
+
+					else if (option === 'externalVariables') {
+						contentOptions[option] = [
+							...contentOptions[option] ?? [],
+							...optionValue.split(/\s/).filter((item) => item.trim().length)
+						];
 
 					} else if (
 						['components', 'variables', 'keyframes', 'customSelectors', 'screens'].includes(option)

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=\'([^\']+)\'',

packages/stylify/tests/jest/content-options.test.ts

@@ -0,0 +1,19 @@
+import TestUtils from '../../../../tests/TestUtils';
+import { Compiler } from '../../src';
+
+const testName = 'content-options';
+const testUtils = new TestUtils('stylify', testName);
+const inputIndex = testUtils.getHtmlInputFile();
+
+
+const compiler = new Compiler({
+	dev: true,
+	replaceVariablesByCssVariables: true
+});
+
+let compilationResult = compiler.compile(inputIndex);
+
+test('Content options', (): void => {
+	testUtils.testCssFileToBe(compilationResult.generateCss());
+	expect(compiler.externalVariables.includes('color')).toBe(true);
+});

packages/stylify/tests/jest/content-options/expected/index.css

@@ -0,0 +1,3 @@
+.color\:\$color{
+	color: var(--color)
+}

packages/stylify/tests/jest/content-options/input/index.html

@@ -0,0 +1,6 @@
+<!--
+stylify-externalVariables
+	color
+/stylify-externalVariables
+-->
+<div class="color:$color"></div>

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;
 			}
 

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();
+});

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}

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?

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>

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"
+	}
+}

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>
+	);
+}

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>
+	);
+}

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>
+);

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()]
+});