From 72bc31867b3c2533e0ebde800bed905b3cf8b174 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 18 Apr 2023 12:19:20 +0200 Subject: [PATCH] Replace `__OXIDE__` at build time to prevent `@tailwindcss/oxide` leaks in the stable engine (#10988) * replace `env.OXIDE` with global `__OXIDE__` This will allow us to replace the `__OXIDE__` at build time, and fully remove the branches from the final code so that there is not even any reference to `@tailwindcss/oxide` on the stable engine. * update changelog * use `env.ENGINE` in integration tests * drop oxide branching for the PostCSS plugin for now This is currently a redirect to the same file, so doesn't hurt. * Enable better dead-code elimination * Update CLI tests Fix indentation * Fix indentation --------- Co-authored-by: Jordan Pittman --- .swcrc | 5 + CHANGELOG.md | 1 + integrations/parcel/tests/integration.test.js | 20 +-- .../postcss-cli/tests/integration.test.js | 12 +- .../rollup-sass/tests/integration.test.js | 16 +-- integrations/rollup/tests/integration.test.js | 20 +-- .../tailwindcss-cli/tests/cli.test.js | 127 ++++++++++++------ .../tailwindcss-cli/tests/integration.test.js | 48 +++---- integrations/vite/tests/integration.test.js | 20 +-- .../webpack-4/tests/integration.test.js | 20 +-- .../webpack-5/tests/integration.test.js | 24 ++-- package.json | 2 +- package.stable.json | 2 +- src/cli.js | 2 +- src/cli/build/plugin.js | 2 +- src/corePlugins.js | 5 +- src/featureFlags.js | 5 +- src/index.js | 6 +- src/lib/expandTailwindAtRules.js | 4 +- src/lib/sharedState.js | 15 --- src/oxide/cli/build/plugin.ts | 2 +- src/plugin.js | 2 +- tests/util/run.js | 4 +- 23 files changed, 195 insertions(+), 169 deletions(-) diff --git a/.swcrc b/.swcrc index 3e2821cdc329..37efa98e89e2 100644 --- a/.swcrc +++ b/.swcrc @@ -11,6 +11,11 @@ "parser": { "syntax": "typescript", "tsx": false + }, + "minify": { + "compress": { + "unused": true + } } } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 0347e9465213..79fb96a5ac55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don’t move unknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962)) - Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002)) - Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002)) +- Replace `__OXIDE__` at build time to prevent `@tailwindcss/oxide` leaks in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988)) ## [3.3.1] - 2023-03-30 diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js index 55e7f83a38b0..b86af727ecce 100644 --- a/integrations/parcel/tests/integration.test.js +++ b/integrations/parcel/tests/integration.test.js @@ -74,7 +74,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -85,7 +85,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -138,7 +138,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -149,7 +149,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -202,7 +202,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-red-500 { @@ -219,7 +219,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-red-500 { @@ -274,7 +274,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-red-500 { @@ -291,7 +291,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .bg-red-500 { @@ -445,7 +445,7 @@ describe('watcher', () => { ) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .btn { @@ -461,7 +461,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` .btn { diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index 36cfe7f4c4f5..46f5a61a6dc3 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -61,7 +61,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -78,7 +78,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -128,7 +128,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -145,7 +145,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -284,7 +284,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -303,7 +303,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` /* prettier-ignore */ diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js index 7d359577eea1..19a7695659d8 100644 --- a/integrations/rollup-sass/tests/integration.test.js +++ b/integrations/rollup-sass/tests/integration.test.js @@ -61,7 +61,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -78,7 +78,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -128,7 +128,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -145,7 +145,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -282,7 +282,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { @@ -298,7 +298,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { @@ -377,7 +377,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { @@ -393,7 +393,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index dbbfcc8d11f1..c3209af6589a 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -62,7 +62,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-primary { @@ -73,7 +73,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-primary { @@ -120,7 +120,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-primary { @@ -131,7 +131,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-primary { @@ -175,7 +175,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -192,7 +192,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -242,7 +242,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -259,7 +259,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { @@ -396,7 +396,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { @@ -415,7 +415,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index f30260b0b6de..0c42ce0cc506 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -19,6 +19,7 @@ let { }) let EXECUTABLE = 'node ../../lib/cli.js' +let testStable = env.ENGINE === 'stable' ? test : test.skip function dedent(input) { let lines = input.split('\n') @@ -97,7 +98,7 @@ describe('Build command', () => { expect(withoutMinify.length).toBeGreaterThan(withMinify.length) }) - test('--no-autoprefixer', async () => { + testStable('--no-autoprefixer', async () => { await writeInputFile('index.html', html`
`) await $(`${EXECUTABLE} --output ./dist/main.css`) @@ -183,7 +184,7 @@ describe('Build command', () => { ) }) - test('--postcss (postcss.config.js)', async () => { + testStable('--postcss (postcss.config.js)', async () => { await writeInputFile('index.html', html`
`) let customConfig = javascript` @@ -216,7 +217,7 @@ describe('Build command', () => { await $(`${EXECUTABLE} --output ./dist/main.css --postcss`) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .font-bold-after { @@ -235,7 +236,7 @@ describe('Build command', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .font-bold-after { @@ -254,7 +255,7 @@ describe('Build command', () => { } }) - test('--postcss (custom.postcss.config.js)', async () => { + testStable('--postcss (custom.postcss.config.js)', async () => { await writeInputFile('index.html', html`
`) let customConfig = javascript` @@ -287,7 +288,7 @@ describe('Build command', () => { await $(`${EXECUTABLE} --output ./dist/main.css --postcss ./custom.postcss.config.js`) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .font-bold-after { @@ -306,7 +307,7 @@ describe('Build command', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .font-bold-after { @@ -325,7 +326,7 @@ describe('Build command', () => { } }) - test('--postcss supports process options', async () => { + testStable('--postcss supports process options', async () => { await writeInputFile('index.html', html`
`) let customConfig = javascript` @@ -359,7 +360,7 @@ describe('Build command', () => { expect(contents).toContain(`/*# sourceMappingURL`) }) - test('--postcss supports process options with custom config', async () => { + testStable('--postcss supports process options with custom config', async () => { await writeInputFile('index.html', html`
`) let customConfig = javascript` @@ -480,7 +481,7 @@ describe('Build command', () => { return runningProcess.stop() }) - test('postcss-import is included when using a custom postcss configuration', async () => { + testStable('postcss-import is included when using a custom postcss configuration', async () => { cleanupFile('src/test.css') await writeInputFile('index.html', html`
`) @@ -508,26 +509,47 @@ describe('Build command', () => { test('--help', async () => { let { combined } = await $(`${EXECUTABLE} --help`) - expect(dedent(combined)).toEqual( - dedent(` - tailwindcss v${version} - - Usage: - tailwindcss build [options] - - Options: - -i, --input Input file - -o, --output Output file - -w, --watch Watch for changes and rebuild as needed - -p, --poll Use polling instead of filesystem events when watching - --content Content paths to use for removing unused classes - --postcss Load custom PostCSS configuration - -m, --minify Minify the output - -c, --config Path to a custom config file - --no-autoprefixer Disable autoprefixer - -h, --help Display usage information - `) - ) + if (env.ENGINE === 'oxide') { + expect(dedent(combined)).toEqual( + dedent(` + tailwindcss v${version} + + Usage: + tailwindcss build [options] + + Options: + -i, --input Input file + -o, --output Output file + -w, --watch Watch for changes and rebuild as needed + -p, --poll Use polling instead of filesystem events when watching + --content Content paths to use for removing unused classes + -m, --minify Minify the output + -c, --config Path to a custom config file + -h, --help Display usage information + `) + ) + } else if (env.ENGINE === 'stable') { + expect(dedent(combined)).toEqual( + dedent(` + tailwindcss v${version} + + Usage: + tailwindcss build [options] + + Options: + -i, --input Input file + -o, --output Output file + -w, --watch Watch for changes and rebuild as needed + -p, --poll Use polling instead of filesystem events when watching + --content Content paths to use for removing unused classes + --postcss Load custom PostCSS configuration + -m, --minify Minify the output + -c, --config Path to a custom config file + --no-autoprefixer Disable autoprefixer + -h, --help Display usage information + `) + ) + } }) }) @@ -589,7 +611,7 @@ describe('Init command', () => { expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50) }) - test('--postcss', async () => { + testStable('--postcss', async () => { expect(await fileExists('postcss.config.js')).toBe(true) await removeFile('postcss.config.js') expect(await fileExists('postcss.config.js')).toBe(false) @@ -609,21 +631,38 @@ describe('Init command', () => { test('--help', async () => { let { combined } = await $(`${EXECUTABLE} init --help`) - expect(dedent(combined)).toEqual( - dedent(` - tailwindcss v${version} + if (env.ENGINE === 'oxide') { + expect(dedent(combined)).toEqual( + dedent(` + tailwindcss v${version} - Usage: - tailwindcss init [options] + Usage: + tailwindcss init [options] - Options: - --esm Initialize configuration file as ESM - --ts Initialize configuration file as TypeScript - -p, --postcss Initialize a \`postcss.config.js\` file - -f, --full Include the default values for all options in the generated configuration file - -h, --help Display usage information - `) - ) + Options: + --esm Initialize configuration file as ESM + --ts Initialize configuration file as TypeScript + -f, --full Include the default values for all options in the generated configuration file + -h, --help Display usage information + `) + ) + } else if (env.ENGINE === 'stable') { + expect(dedent(combined)).toEqual( + dedent(` + tailwindcss v${version} + + Usage: + tailwindcss init [options] + + Options: + --esm Initialize configuration file as ESM + --ts Initialize configuration file as TypeScript + -p, --postcss Initialize a \`postcss.config.js\` file + -f, --full Include the default values for all options in the generated configuration file + -h, --help Display usage information + `) + ) + } }) test('ESM config is created by default in an ESM project', async () => { diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index 6efa9fdf5e44..75c9779af8f8 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -72,7 +72,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -92,7 +92,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -145,7 +145,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -156,7 +156,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -203,7 +203,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -214,7 +214,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -262,7 +262,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -273,7 +273,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -329,7 +329,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -340,7 +340,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -375,7 +375,7 @@ describe('static build', () => { env: { NODE_ENV: 'production' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -386,7 +386,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -430,7 +430,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -447,7 +447,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -497,7 +497,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -514,7 +514,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -703,7 +703,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -722,7 +722,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -800,7 +800,7 @@ describe('watcher', () => { let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -811,7 +811,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -832,7 +832,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -843,7 +843,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -876,7 +876,7 @@ describe('watcher', () => { ) await runningProcess.onStderr(ready) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { @@ -887,7 +887,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-yellow { diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index a07a2a9a6efc..b1a8163b2b35 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -75,7 +75,7 @@ describe('static build', () => { env: { NODE_ENV: 'production', NO_COLOR: '1' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -86,7 +86,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -131,7 +131,7 @@ describe('static build', () => { env: { NODE_ENV: 'production', NO_COLOR: '1' }, }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -142,7 +142,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss( css` .bg-primary { @@ -194,7 +194,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) await runningProcess.onStdout((message) => message.includes('page reload')) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await fetchCSS()).toIncludeCss( css` .bg-red-500 { @@ -211,7 +211,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await fetchCSS()).toIncludeCss( css` .bg-red-500 { @@ -265,7 +265,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) await runningProcess.onStdout((message) => message.includes('page reload')) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await fetchCSS()).toIncludeCss( css` .bg-red-500 { @@ -282,7 +282,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await fetchCSS()).toIncludeCss( css` .bg-red-500 { @@ -435,7 +435,7 @@ describe('watcher', () => { ) await runningProcess.onStdout((message) => message.includes('hmr update /index.css')) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await fetchCSS()).toIncludeCss( css` .btn { @@ -454,7 +454,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await fetchCSS()).toIncludeCss( css` .btn { diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index a666721bbdc1..e2e24cf45cac 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -58,7 +58,7 @@ describe('static build', () => { await $('webpack --mode=production') - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -69,7 +69,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -114,7 +114,7 @@ describe('static build', () => { await $('webpack --mode=production') - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -125,7 +125,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -172,7 +172,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -189,7 +189,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -242,7 +242,7 @@ describe('watcher', () => { await appendToInputFile('glob/index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -259,7 +259,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -401,7 +401,7 @@ describe('watcher', () => { ) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -420,7 +420,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js index ae493fbdbb66..83b42f5f867f 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -58,7 +58,7 @@ describe('static build', () => { await $('webpack --mode=production') - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -69,7 +69,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -114,7 +114,7 @@ describe('static build', () => { await $('webpack --mode=production') - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -125,7 +125,7 @@ describe('static build', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-primary { @@ -172,7 +172,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -189,7 +189,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -242,7 +242,7 @@ describe('watcher', () => { await appendToInputFile('index.html', html`
`) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -259,7 +259,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -401,7 +401,7 @@ describe('watcher', () => { ) }) - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -420,7 +420,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { @@ -464,7 +464,7 @@ describe('watcher', () => { await waitForOutputFileCreation('main.css') - if (!env.OXIDE) { + if (env.ENGINE === 'stable') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { @@ -484,7 +484,7 @@ describe('watcher', () => { ) } - if (env.OXIDE) { + if (env.ENGINE === 'oxide') { expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { diff --git a/package.json b/package.json index 6a240fd5c697..c8acfb6fcb0d 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "dev:rust": "npm run --prefix ./oxide dev:node", "dev:js": "npm run build:js -- --watch", "build:rust": "npm run --prefix ./oxide build:node", - "build:js": "npm run generate:plugin-list && swc src --out-dir lib --copy-files --delete-dir-on-start", + "build:js": "npm run generate:plugin-list && swc src --out-dir lib --copy-files --delete-dir-on-start --config jsc.transform.optimizer.globals.vars.__OXIDE__='\"true\"'", "build:peers": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js --define:process.env.CSS_TRANSFORMER_WASM=false", "generate:plugin-list": "node -r @swc/register scripts/create-plugin-list.js", "generate:types": "node -r @swc/register scripts/generate-types.js" diff --git a/package.stable.json b/package.stable.json index f758ded10e78..0dd8ffb28318 100644 --- a/package.stable.json +++ b/package.stable.json @@ -17,7 +17,7 @@ }, "scripts": { "prebuild": "npm run generate && rimraf lib", - "build": "swc src --out-dir lib --copy-files", + "build": "swc src --out-dir lib --copy-files --config jsc.transform.optimizer.globals.vars.__OXIDE__='\"false\"'", "postbuild": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js --define:process.env.CSS_TRANSFORMER_WASM=false", "rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js", "style": "eslint .", diff --git a/src/cli.js b/src/cli.js index 11c219549b2d..4b73accbbbdd 100644 --- a/src/cli.js +++ b/src/cli.js @@ -1,6 +1,6 @@ #!/usr/bin/env node -if (process.env.OXIDE) { +if (__OXIDE__) { module.exports = require('./oxide/cli') } else { module.exports = require('./cli/index') diff --git a/src/cli/build/plugin.js b/src/cli/build/plugin.js index 5705326c988a..9f3f6f52ff27 100644 --- a/src/cli/build/plugin.js +++ b/src/cli/build/plugin.js @@ -185,7 +185,7 @@ let state = { let files = fastGlob.sync(this.contentPatterns.all) for (let file of files) { - if (env.OXIDE) { + if (__OXIDE__) { content.push({ file, extension: path.extname(file).slice(1), diff --git a/src/corePlugins.js b/src/corePlugins.js index 95e4bc71e77b..e4d2ff279a30 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,7 +1,6 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' -import { env } from './lib/sharedState' import createUtilityPlugin from './util/createUtilityPlugin' import buildMediaQuery from './util/buildMediaQuery' import escapeClassName from './util/escapeClassName' @@ -1262,7 +1261,7 @@ export let corePlugins = { 'space-x': (value) => { value = value === '0' ? '0px' : value - if (env.OXIDE) { + if (__OXIDE__) { return { '& > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', @@ -1307,7 +1306,7 @@ export let corePlugins = { 'divide-x': (value) => { value = value === '0' ? '0px' : value - if (env.OXIDE) { + if (__OXIDE__) { return { '& > :not([hidden]) ~ :not([hidden])': { '@defaults border-width': {}, diff --git a/src/featureFlags.js b/src/featureFlags.js index bc5f167a0ff7..dc9f2d7c46e2 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -1,15 +1,14 @@ import colors from 'picocolors' import log from './util/log' -import { env } from './lib/sharedState' let defaults = { optimizeUniversalDefaults: false, generalizedModifiers: true, get disableColorOpacityUtilitiesByDefault() { - return env.OXIDE + return __OXIDE__ }, get relativeContentPathsByDefault() { - return env.OXIDE + return __OXIDE__ }, } diff --git a/src/index.js b/src/index.js index 1e85998bbb93..d0b329bf2296 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1 @@ -if (process.env.OXIDE) { - module.exports = require('./oxide/postcss-plugin') -} else { - module.exports = require('./plugin') -} +module.exports = require('./plugin') diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index 504575755ab6..066d3d53a33a 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -130,7 +130,7 @@ export default function expandTailwindAtRules(context) { env.DEBUG && console.time('Reading changed files') - if (env.OXIDE) { + if (__OXIDE__) { // TODO: Pass through or implement `extractor` for (let candidate of require('@tailwindcss/oxide').parseCandidateStringsFromFiles( context.changedContent @@ -162,7 +162,7 @@ export default function expandTailwindAtRules(context) { env.DEBUG && console.time('Generate rules') env.DEBUG && console.time('Sorting candidates') - let sortedCandidates = env.OXIDE + let sortedCandidates = __OXIDE__ ? candidates : new Set( [...candidates].sort((a, z) => { diff --git a/src/lib/sharedState.js b/src/lib/sharedState.js index 1a4a8d5e5b17..97bdf09c5c43 100644 --- a/src/lib/sharedState.js +++ b/src/lib/sharedState.js @@ -1,5 +1,4 @@ import pkg from '../../package.json' -let OXIDE_DEFAULT_ENABLED = pkg.tailwindcss.engine === 'oxide' export const env = typeof process !== 'undefined' @@ -7,13 +6,11 @@ export const env = NODE_ENV: process.env.NODE_ENV, DEBUG: resolveDebug(process.env.DEBUG), ENGINE: pkg.tailwindcss.engine, - OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED), } : { NODE_ENV: 'production', DEBUG: false, ENGINE: pkg.tailwindcss.engine, - OXIDE: OXIDE_DEFAULT_ENABLED, } export const contextMap = new Map() @@ -24,18 +21,6 @@ export const NOT_ON_DEMAND = new String('*') export const NONE = Symbol('__NONE__') -function resolveBoolean(value, defaultValue) { - if (value === undefined) { - return defaultValue - } - - if (value === '0' || value === 'false') { - return false - } - - return true -} - export function resolveDebug(debug) { if (debug === undefined) { return false diff --git a/src/oxide/cli/build/plugin.ts b/src/oxide/cli/build/plugin.ts index 078820c85c9a..4141ec439b0e 100644 --- a/src/oxide/cli/build/plugin.ts +++ b/src/oxide/cli/build/plugin.ts @@ -184,7 +184,7 @@ let state = { let files = fastGlob.sync(this.contentPatterns.all) for (let file of files) { - if (env.OXIDE) { + if (__OXIDE__) { content.push({ file, extension: path.extname(file).slice(1), diff --git a/src/plugin.js b/src/plugin.js index 4fa8ce757885..59f5fab014c6 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -34,7 +34,7 @@ module.exports = function tailwindcss(configOrPath) { processTailwindFeatures(context)(root, result) }, - env.OXIDE && + __OXIDE__ && function lightningCssPlugin(_root, result) { let postcss = require('postcss') let lightningcss = require('lightningcss') diff --git a/tests/util/run.js b/tests/util/run.js index 167b7fc78ce2..118edcb75e9c 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -14,6 +14,8 @@ export let map = JSON.stringify({ mappings: '', }) +globalThis.__OXIDE__ = env.ENGINE === 'oxide' + export function run(input, config, plugin = tailwind) { let { currentTestName } = expect.getState() @@ -84,7 +86,7 @@ export function crosscheck(fn) { } beforeEach(() => { - env.OXIDE = engines.engine.oxide + globalThis.__OXIDE__ = engines.engine.oxide }) fn(engines)