Disable color opacity plugins by default in the oxide engine (#10618)

* disable color opacity plugins by default for the `oxide` engine * update tests to reflect this change in the `oxide` engine * update changelog * reflect changes in integration tests
tailwindlabs · Feb 17, 2023 · c8bf2d4 · c8bf2d4
1 parent 316282d
commit c8bf2d4
Show file tree

Hide file tree

Showing 32 changed files with 2,746 additions and 772 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470))
 - Add `justify-normal` and `justify-stretch` utilities ([#10560](https://github.com/tailwindlabs/tailwindcss/pull/10560))
 
+### Changed
+
+- [Oxide] Disable color opacity plugins by default in the `oxide` engine ([#10618](https://github.com/tailwindlabs/tailwindcss/pull/10618))
+
 ## [3.2.7] - 2023-02-16
 
 ### Fixed

diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js
@@ -1,5 +1,6 @@
 let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
+let { env } = require('../../../lib/lib/sharedState')
 
 let {
   readOutputFile,
@@ -74,20 +75,38 @@ describe('watcher', () => {
       await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
     })
 
-    expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
-      css`
-        .bg-red-500 {
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-        .font-normal {
-          font-weight: 400;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-red-500 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-red-500 {
+            background-color: #ef4444;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })
@@ -128,20 +147,38 @@ describe('watcher', () => {
       await appendToInputFile('glob/index.html', html`<div class="bg-red-500"></div>`)
     })
 
-    expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
-      css`
-        .bg-red-500 {
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-        .font-normal {
-          font-weight: 400;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-red-500 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-red-500 {
+            background-color: #ef4444;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })
@@ -281,20 +318,36 @@ describe('watcher', () => {
       )
     })
 
-    expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
-      css`
-        /* prettier-ignore */
-        .btn {
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-          border-radius: .25rem;
-          padding: .25rem .5rem;
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .btn {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+            border-radius: 0.25rem;
+            padding: 0.25rem 0.5rem;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .btn {
+            background-color: #ef4444;
+            border-radius: 0.25rem;
+            padding: 0.25rem 0.5rem;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })

diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js
@@ -1,5 +1,6 @@
 let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
+let { env } = require('../../../lib/lib/sharedState')
 
 let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
   output: 'dist',
@@ -60,20 +61,38 @@ describe('watcher', () => {
     await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
     await runningProcess.onStderr(ready)
 
-    expect(await readOutputFile('main.css')).toIncludeCss(
-      css`
-        .bg-red-500 {
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-        .font-normal {
-          font-weight: 400;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-red-500 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-red-500 {
+            background-color: #ef4444;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })
@@ -109,20 +128,38 @@ describe('watcher', () => {
     await appendToInputFile('glob/index.html', html`<div class="bg-red-500"></div>`)
     await runningProcess.onStderr(ready)
 
-    expect(await readOutputFile('main.css')).toIncludeCss(
-      css`
-        .bg-red-500 {
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-        .font-normal {
-          font-weight: 400;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-red-500 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-red-500 {
+            background-color: #ef4444;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+          .font-normal {
+            font-weight: 400;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })
@@ -247,22 +284,40 @@ describe('watcher', () => {
     )
     await runningProcess.onStderr(ready)
 
-    expect(await readOutputFile('main.css')).toIncludeCss(
-      css`
-        .btn {
-          border-radius: 0.25rem;
-          --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
-        }
-        .font-bold {
-          font-weight: 700;
-        }
-      `
-    )
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .btn {
+            border-radius: 0.25rem;
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            padding-top: 0.25rem;
+            padding-bottom: 0.25rem;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          /* prettier-ignore */
+          .btn {
+            border-radius: 0.25rem;
+            background-color: #ef4444;
+            padding: 0.25rem 0.5rem;
+          }
+          .font-bold {
+            font-weight: 700;
+          }
+        `
+      )
+    }
 
     return runningProcess.stop()
   })