wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Robin Malfait 2023-02-17 20:21:22 +01:00 • committed by GitHub
parent 316282d719
commit c8bf2d49b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 2746 additions and 772 deletions
Download patch file Download diff file Expand all files Collapse all files

101
integrations/tailwindcss-cli/tests/cli.test.js
View file

@ -2,6 +2,7 @@ let path = require('path')
let $ = require('../../execute')
let { css, html, javascript } = require('../../syntax')
let resolveToolRoot = require('../../resolve-tool-root')
let { env } = require('../../../lib/lib/sharedState')
let version = require('../../../package.json').version
@ -215,22 +216,42 @@ describe('Build command', () => {
await $(`${EXECUTABLE} --output ./dist/main.css --postcss`)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
.btn-after {
--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;
}
`
)
.btn-after {
--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;
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
.btn-after {
background-color: #ef4444;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
`
)
}
})
test('--postcss (custom.postcss.config.js)', async () => {
@ -266,22 +287,42 @@ describe('Build command', () => {
await $(`${EXECUTABLE} --output ./dist/main.css --postcss ./custom.postcss.config.js`)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
.btn-after {
--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;
}
`
)
.btn-after {
--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;
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold-after {
font-weight: 700;
}
.btn-after {
background-color: #ef4444;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
`
)
}
})
test('--postcss supports process options', async () => {

363
integrations/tailwindcss-cli/tests/integration.test.js
View file

@ -1,6 +1,7 @@
let fs = require('fs')
let $ = require('../../execute')
let { css, html, javascript } = require('../../syntax')
let { env } = require('../../../lib/lib/sharedState')
let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
output: 'dist',
@ -71,23 +72,43 @@ describe('static build', () => {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
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));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.font-bold {
font-weight: 700;
}
`
)
.font-bold {
font-weight: 700;
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-red-500 {
background-color: #ef4444;
}
.bg-red-600 {
background-color: #dc2626;
}
.font-bold {
font-weight: 700;
}
`
)
}
})
it('can read from a config file from an @config directive', async () => {
@ -127,14 +148,26 @@ describe('static build', () => {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
background-color: #ff0;
}
`
)
}
})
it('can read from a config file from an @config directive inside an @import from postcss-import', async () => {
@ -182,14 +215,26 @@ describe('static build', () => {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
background-color: #ff0;
}
`
)
}
})
it('should work with raw content', async () => {
@ -216,14 +261,26 @@ describe('static build', () => {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
`
)
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));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-red-500 {
background-color: #ef4444;
}
`
)
}
})
})
@ -259,20 +316,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()
})
@ -308,20 +383,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()
})
@ -496,22 +589,42 @@ 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`
.btn {
border-radius: 0.25rem;
background-color: #ef4444;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.font-bold {
font-weight: 700;
}
`
)
}
return runningProcess.stop()
})
@ -573,14 +686,26 @@ describe('watcher', () => {
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
background-color: #ff0;
}
`
)
}
await writeInputFile(
'index.css',
@ -593,14 +718,26 @@ describe('watcher', () => {
)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
}
`
)
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
background-color: #ff7;
}
`
)
}
await writeInputFile(
'tailwind.2.config.js',
@ -625,14 +762,26 @@ describe('watcher', () => {
)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
`
)
if (!env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
`
)
}
if (env.OXIDE) {
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-yellow {
background-color: #fff;
}
`
)
}
return runningProcess.stop()
})