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

Remove AOT (#5340)

Browse source 
* make `jit` mode the default when no mode is specified

* unify JIT and AOT codepaths

* ensure `Object.entries` on undefined doesn't break

It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value.

* drop AOT specific tests

These tests are all covered by JIT mode already and were AOT specific.

* simplify tests, and add a few

Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output.
Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging.

* add some todo's to make sure we warn in a few cases

* make `darkMode: 'media'`, the default

This also includes moving dark mode tests to its own dedicated file.

* remove PostCSS 7 compat mode

* update CLI to be JIT-first

* fix integration tests

This is not a _real_ fix, but it does solve the broken test for now.

* warn when using @responsive or @variants

* remove the JIT preview warning

* remove AOT-only code paths

* remove all `mode: 'jit'` blocks

Also remove `variants: {}` since they are not useful in `JIT` mode
anymore.

* drop unused dependencies

* rename `purge` to `content`

* remove static CDN builds

* mark `--purge` as deprecated in the CLI

This will still work, but a warning will be printed and it won't show up
in the `--help` output.

* cleanup nesting plugin

We don't have to duplicate it anymore since there is no PostCSS 7
version anymore.

* make sure integration tests run in band

* cleanup folder structure

* make sure nesting folder is available

* simplify resolving of purge/content information
This commit is contained in:
Robin Malfait 2021-09-01 17:13:59 +02:00 • committed by GitHub
parent 911e755056
commit 691ed02f63
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
141 changed files with 1991 additions and 10609 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/jit/animations.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -10,8 +10,7 @@ function run(input, config = {}) {
test('basic', () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `
<div class="animate-spin"></div>
@ -64,8 +63,7 @@ test('basic', () => {
test('custom', () => {
let config = {
mode: 'jit',
purge: [{ raw: `<div class="animate-one"></div>` }],
content: [{ raw: `<div class="animate-one"></div>` }],
theme: {
extend: {
keyframes: {
@ -96,9 +94,8 @@ test('custom', () => {
test('custom prefixed', () => {
let config = {
mode: 'jit',
prefix: 'tw-',
purge: [{ raw: `<div class="tw-animate-one"></div>` }],
content: [{ raw: `<div class="tw-animate-one"></div>` }],
theme: {
extend: {
keyframes: {
@ -129,8 +126,7 @@ test('custom prefixed', () => {
test('multiple', () => {
let config = {
mode: 'jit',
purge: [{ raw: `<div class="animate-multiple"></div>` }],
content: [{ raw: `<div class="animate-multiple"></div>` }],
theme: {
extend: {
animation: {
@ -169,8 +165,7 @@ test('multiple', () => {
test('multiple custom', () => {
let config = {
mode: 'jit',
purge: [{ raw: `<div class="animate-multiple"></div>` }],
content: [{ raw: `<div class="animate-multiple"></div>` }],
theme: {
extend: {
keyframes: {

11
tests/jit/apply.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -14,8 +14,7 @@ function run(input, config = {}) {
test('@apply', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './apply.test.html')],
content: [path.resolve(__dirname, './apply.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],
@ -154,7 +153,7 @@ test('@apply', () => {
test('@apply error with unknown utility', async () => {
let config = {
darkMode: 'class',
purge: [path.resolve(__dirname, './apply.test.html')],
content: [path.resolve(__dirname, './apply.test.html')],
corePlugins: { preflight: false },
plugins: [],
}
@ -176,7 +175,7 @@ test('@apply error with unknown utility', async () => {
test('@apply error with nested @screen', async () => {
let config = {
darkMode: 'class',
purge: [path.resolve(__dirname, './apply.test.html')],
content: [path.resolve(__dirname, './apply.test.html')],
corePlugins: { preflight: false },
plugins: [],
}
@ -202,7 +201,7 @@ test('@apply error with nested @screen', async () => {
test('@apply error with nested @anyatrulehere', async () => {
let config = {
darkMode: 'class',
purge: [path.resolve(__dirname, './apply.test.html')],
content: [path.resolve(__dirname, './apply.test.html')],
corePlugins: { preflight: false },
plugins: [],
}

5
tests/jit/arbitrary-values.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
@ -9,8 +9,7 @@ function run(input, config = {}) {
test('arbitrary values', () => {
let config = {
mode: 'jit',
purge: [path.resolve(__dirname, './arbitrary-values.test.html')],
content: [path.resolve(__dirname, './arbitrary-values.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

5
tests/jit/basic-usage.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -15,8 +15,7 @@ function css(templates) {
test('basic usage', () => {
let config = {
mode: 'jit',
purge: [path.resolve(__dirname, './basic-usage.test.html')],
content: [path.resolve(__dirname, './basic-usage.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

5
tests/jit/collapse-adjacent-rules.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -11,8 +11,7 @@ function run(input, config = {}) {
test('collapse adjacent rules', () => {
let config = {
mode: 'jit',
purge: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')],
content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

23
tests/jit/color-opacity-modifiers.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -12,8 +12,7 @@ function run(input, config = {}) {
test('basic color opacity modifier', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="bg-red-500/50"></div>',
},
@ -35,8 +34,7 @@ test('basic color opacity modifier', async () => {
test('colors with slashes are matched first', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="bg-red-500/50"></div>',
},
@ -65,8 +63,7 @@ test('colors with slashes are matched first', async () => {
test('arbitrary color opacity modifier', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: 'bg-red-500/[var(--opacity)]',
},
@ -88,8 +85,7 @@ test('arbitrary color opacity modifier', async () => {
test('missing alpha generates nothing', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="bg-red-500/"></div>',
},
@ -107,8 +103,7 @@ test('missing alpha generates nothing', async () => {
test('values not in the opacity config are ignored', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="bg-red-500/29"></div>',
},
@ -134,8 +129,7 @@ test('values not in the opacity config are ignored', async () => {
test('function colors are supported', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="bg-blue/50"></div>',
},
@ -163,8 +157,7 @@ test('function colors are supported', async () => {
test('utilities that support any type are supported', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `
<div class="from-red-500/50"></div>

3
tests/jit/context-reuse.worker.js
View file

@ -16,8 +16,7 @@ async function runTest() {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './context-reuse.test.html')],
content: [path.resolve(__dirname, './context-reuse.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

17
tests/jit/custom-extractors.test.js
View file

@ -4,7 +4,7 @@ import path from 'path'
function run(input, config = {}) {
jest.resetModules()
const tailwind = require('../../src/jit/index.js').default
let tailwind = require('../../src')
return postcss(tailwind(config)).process(input, {
from: path.resolve(__filename),
})
@ -23,8 +23,7 @@ const expected = fs.readFileSync(expectedPath, 'utf8')
test('defaultExtractor', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [path.resolve(__dirname, './custom-extractors.test.html')],
options: {
defaultExtractor: customExtractor,
@ -42,7 +41,7 @@ test('defaultExtractor', () => {
test('extractors array', () => {
let config = {
purge: {
content: {
content: [path.resolve(__dirname, './custom-extractors.test.html')],
options: {
extractors: [
@ -53,7 +52,6 @@ test('extractors array', () => {
],
},
},
mode: 'jit',
corePlugins: { preflight: false },
theme: {},
plugins: [],
@ -66,8 +64,7 @@ test('extractors array', () => {
test('extract function', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: customExtractor,
},
@ -83,8 +80,7 @@ test('extract function', () => {
test('extract.DEFAULT', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: {
DEFAULT: customExtractor,
@ -102,13 +98,12 @@ test('extract.DEFAULT', () => {
test('extract.{extension}', () => {
let config = {
purge: {
content: {
content: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: {
html: customExtractor,
},
},
mode: 'jit',
corePlugins: { preflight: false },
theme: {},
plugins: [],

8
tests/jit/custom-separator.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -12,8 +12,7 @@ function run(input, config = {}) {
test('custom separator', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './custom-separator.test.html')],
content: [path.resolve(__dirname, './custom-separator.test.html')],
separator: '_',
corePlugins: {},
theme: {},
@ -33,8 +32,7 @@ test('custom separator', () => {
test('dash is not supported', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [{ raw: 'lg-hover-font-bold' }],
content: [{ raw: 'lg-hover-font-bold' }],
separator: '-',
corePlugins: {},
theme: {},

11
tests/jit/custom-transformers.test.js
View file

@ -3,7 +3,7 @@ import path from 'path'
function run(input, config = {}) {
jest.resetModules()
const tailwind = require('../../src/jit/index.js').default
const tailwind = require('../../src')
return postcss(tailwind(config)).process(input, {
from: path.resolve(__filename),
})
@ -19,8 +19,7 @@ const css = `
test('transform function', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [{ raw: '<div class="uppercase"></div>' }],
transform: customTransformer,
},
@ -39,8 +38,7 @@ test('transform function', () => {
test('transform.DEFAULT', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [{ raw: '<div class="uppercase"></div>' }],
transform: {
DEFAULT: customTransformer,
@ -61,8 +59,7 @@ test('transform.DEFAULT', () => {
test('transform.{extension}', () => {
let config = {
mode: 'jit',
purge: {
content: {
content: [
{ raw: '<div class="uppercase"></div>', extension: 'html' },
{ raw: '<div class="uppercase"></div>', extension: 'php' },

118
tests/jit/dark-mode.test.js Normal file
View file

@ -0,0 +1,118 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
from: path.resolve(__filename),
})
}
function css(templates) {
return templates.join('')
}
function html(templates) {
return templates.join('')
}
it('should be possible to use the darkMode "class" mode', () => {
let config = {
darkMode: 'class',
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
theme: {},
plugins: [],
}
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.dark .dark\\:font-bold {
font-weight: 700;
}
`)
})
})
it('should be possible to use the darkMode "media" mode', () => {
let config = {
darkMode: 'media',
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
theme: {},
plugins: [],
}
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (prefers-color-scheme: dark) {
.dark\\:font-bold {
font-weight: 700;
}
}
`)
})
})
it('should default to the `media` mode when no mode is provided', () => {
let config = {
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
theme: {},
plugins: [],
}
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (prefers-color-scheme: dark) {
.dark\\:font-bold {
font-weight: 700;
}
}
`)
})
})
it('should default to the `media` mode when mode is set to `false`', () => {
let config = {
darkMode: false,
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
theme: {},
plugins: [],
}
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (prefers-color-scheme: dark) {
.dark\\:font-bold {
font-weight: 700;
}
}
`)
})
})

8
tests/jit/extractor-edge-cases.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -12,8 +12,7 @@ function run(input, config = {}) {
test('PHP arrays', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `<h1 class="<?php echo wrap(['class' => "max-w-[16rem]"]); ?>">Hello world</h1>`,
},
@ -35,8 +34,7 @@ test('PHP arrays', async () => {
test('arbitrary values with quotes', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `<div class="content-['hello]']"></div>`,
},

5
tests/jit/import-syntax.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -11,8 +11,7 @@ function run(input, config = {}) {
test('using @import instead of @tailwind', () => {
let config = {
purge: [path.resolve(__dirname, './import-syntax.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './import-syntax.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [

5
tests/jit/important-boolean.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -13,8 +13,7 @@ test('important boolean', () => {
let config = {
important: true,
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './important-boolean.test.html')],
content: [path.resolve(__dirname, './important-boolean.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [

5
tests/jit/important-modifier-prefix.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -14,8 +14,7 @@ test('important modifier with prefix', () => {
important: false,
prefix: 'tw-',
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './important-modifier-prefix.test.html')],
content: [path.resolve(__dirname, './important-modifier-prefix.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

5
tests/jit/important-modifier.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -13,8 +13,7 @@ test('important modifier', () => {
let config = {
important: false,
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './important-modifier.test.html')],
content: [path.resolve(__dirname, './important-modifier.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

5
tests/jit/important-selector.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -13,8 +13,7 @@ test('important selector', () => {
let config = {
important: '#app',
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './important-selector.test.html')],
content: [path.resolve(__dirname, './important-selector.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [

5
tests/jit/kitchen-sink.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -16,8 +16,7 @@ function css(templates) {
test('it works', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './kitchen-sink.test.html')],
content: [path.resolve(__dirname, './kitchen-sink.test.html')],
corePlugins: { preflight: false },
theme: {
extend: {

67
tests/jit/layer-at-rules.test.js Normal file
View file

@ -0,0 +1,67 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
from: path.resolve(__filename),
})
}
function css(templates) {
return templates.join('')
}
function html(templates) {
return templates.join('')
}
test('custom user-land utilities', () => {
let config = {
content: [
{
raw: html`<div
class="uppercase focus:hover:align-chocolate align-banana hover:align-banana"
></div>`,
},
],
corePlugins: { preflight: false },
theme: {},
plugins: [],
}
let input = css`
@layer utilities {
.align-banana {
text-align: banana;
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.align-chocolate {
text-align: chocolate;
}
}
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.uppercase {
text-transform: uppercase;
}
.align-banana {
text-align: banana;
}
.hover\\:align-banana:hover {
text-align: banana;
}
.focus\\:hover\\:align-chocolate:focus:hover {
text-align: chocolate;
}
`)
})
})

14
tests/jit/layer-without-tailwind.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -12,8 +12,7 @@ function run(input, config = {}) {
test('using @layer without @tailwind', async () => {
let config = {
purge: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
theme: {},
plugins: [],
}
@ -33,8 +32,7 @@ test('using @layer without @tailwind', async () => {
test('using @responsive without @tailwind', async () => {
let config = {
purge: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
theme: {},
plugins: [],
}
@ -54,8 +52,7 @@ test('using @responsive without @tailwind', async () => {
test('using @variants without @tailwind', async () => {
let config = {
purge: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
theme: {},
plugins: [],
}
@ -75,8 +72,7 @@ test('using @variants without @tailwind', async () => {
test('non-Tailwind @layer rules are okay', async () => {
let config = {
purge: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
theme: {},
plugins: [],
}

5
tests/jit/modify-selectors.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
import selectorParser from 'postcss-selector-parser'
function run(input, config = {}) {
@ -13,8 +13,7 @@ function run(input, config = {}) {
test('modify selectors', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './modify-selectors.test.html')],
content: [path.resolve(__dirname, './modify-selectors.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [

5
tests/jit/mutable.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function pluginThatMutatesRules() {
return (root) => {
@ -25,8 +25,7 @@ function run(input, config = {}) {
test.only('plugins mutating rules after tailwind doesnt break it', async () => {
let config = {
purge: [path.resolve(__dirname, './mutable.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './mutable.test.html')],
theme: {
backgroundImage: {
foo: 'url("./foo.png")',

5
tests/jit/opacity.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
@ -9,9 +9,8 @@ function run(input, config = {}) {
test('opacity', () => {
let config = {
mode: 'jit',
darkMode: 'class',
purge: [path.resolve(__dirname, './opacity.test.html')],
content: [path.resolve(__dirname, './opacity.test.html')],
corePlugins: {
backgroundOpacity: false,
borderOpacity: false,

5
tests/jit/parallel-variants.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
import { transformAllSelectors, updateAllClasses } from '../../src/util/pluginUtils.js'
function run(input, config = {}) {
@ -13,8 +13,7 @@ function run(input, config = {}) {
test('basic parallel variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="font-normal hover:test:font-black test:font-bold test:font-medium"></div>',
},

5
tests/jit/prefix.fn.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -18,8 +18,7 @@ test('prefix fn', () => {
return ''
},
purge: [path.resolve(__dirname, './prefix.fn.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './prefix.fn.test.html')],
corePlugins: { preflight: false },
theme: {},
}

5
tests/jit/prefix.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -13,8 +13,7 @@ test('prefix', () => {
let config = {
prefix: 'tw-',
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './prefix.test.html')],
content: [path.resolve(__dirname, './prefix.test.html')],
corePlugins: { preflight: false },
theme: {
animation: {

10
tests/jit/raw-content.test.js
View file

@ -13,11 +13,10 @@ function run(tailwind, input, config = {}) {
}
test('raw content', () => {
let tailwind = require('../../src/jit/index.js').default
let tailwind = require('../../src')
let config = {
mode: 'jit',
purge: [{ raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8') }],
content: [{ raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8') }],
corePlugins: { preflight: false },
theme: {},
plugins: [],
@ -37,11 +36,10 @@ test('raw content', () => {
})
test('raw content with extension', () => {
let tailwind = require('../../src/jit/index.js').default
let tailwind = require('../../src')
let config = {
mode: 'jit',
purge: {
content: {
content: [
{
raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8'),

5
tests/jit/relative-purge-paths.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -14,8 +14,7 @@ function css(templates) {
test('relative purge paths', () => {
let config = {
purge: ['./tests/jit/relative-purge-paths.test.html'],
mode: 'jit',
content: ['./tests/jit/relative-purge-paths.test.html'],
corePlugins: { preflight: false },
theme: {},
plugins: [],

38
tests/jit/resolve-defaults-at-rules.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -16,8 +16,7 @@ function css(templates) {
test('basic utilities', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="scale-x-110 rotate-3 skew-y-6"></div>',
},
@ -68,8 +67,7 @@ test('basic utilities', async () => {
test('with pseudo-class variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>',
},
@ -120,8 +118,7 @@ test('with pseudo-class variants', async () => {
test('with pseudo-element variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="before:scale-x-110 after:rotate-3"></div>',
},
@ -170,8 +167,7 @@ test('with pseudo-element variants', async () => {
test('with multi-class variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>',
},
@ -218,8 +214,7 @@ test('with multi-class variants', async () => {
test('with multi-class pseudo-element variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>',
},
@ -268,8 +263,7 @@ test('with multi-class pseudo-element variants', async () => {
test('with multi-class pseudo-element and pseudo-class variants', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"></div>',
},
@ -318,8 +312,7 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
test('with apply', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="foo"></div>',
},
@ -446,8 +439,7 @@ test('with apply', async () => {
test('with borders', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="border border-red-500 md:border-2"></div>',
},
@ -490,8 +482,7 @@ test('with borders', async () => {
test('with shadows', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>',
},
@ -552,8 +543,7 @@ test('with shadows', async () => {
test('when no utilities that need the defaults are used', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class=""></div>',
},
@ -578,8 +568,7 @@ test('when no utilities that need the defaults are used', async () => {
test('when a utility uses defaults but they do not exist', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="rotate-3"></div>',
},
@ -608,8 +597,7 @@ test('when a utility uses defaults but they do not exist', async () => {
test('selectors are reduced to the lowest possible specificity', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: '<div class="foo"></div>',
},

5
tests/jit/responsive-and-variants-atrules.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -11,8 +11,7 @@ function run(input, config = {}) {
test('responsive and variants atrules', () => {
let config = {
purge: [path.resolve(__dirname, './responsive-and-variants-atrules.test.html')],
mode: 'jit',
content: [path.resolve(__dirname, './responsive-and-variants-atrules.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

5
tests/jit/svelte-syntax.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -11,8 +11,7 @@ function run(input, config = {}) {
test('basic usage', () => {
let config = {
purge: [path.resolve(__dirname, './svelte-syntax.test.svelte')],
mode: 'jit',
content: [path.resolve(__dirname, './svelte-syntax.test.svelte')],
corePlugins: { preflight: false },
theme: {},
plugins: [],

8
tests/jit/tailwind-screens.test.js
View file

@ -1,6 +1,6 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
@ -12,8 +12,7 @@ function run(input, config = {}) {
test('class variants are inserted at `@tailwind variants`', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `font-bold hover:font-bold md:font-bold`,
},
@ -52,8 +51,7 @@ test('class variants are inserted at `@tailwind variants`', async () => {
test('`@tailwind screens` works as an alias for `@tailwind variants`', async () => {
let config = {
mode: 'jit',
purge: [
content: [
{
raw: `font-bold hover:font-bold md:font-bold`,
},

8
tests/jit/variants.test.js
View file

@ -1,7 +1,7 @@
import postcss from 'postcss'
import fs from 'fs'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import tailwind from '../../src'
function run(input, config = {}) {
return postcss(tailwind(config)).process(input, {
@ -16,8 +16,7 @@ function css(templates) {
test('variants', () => {
let config = {
darkMode: 'class',
mode: 'jit',
purge: [path.resolve(__dirname, './variants.test.html')],
content: [path.resolve(__dirname, './variants.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [],
@ -39,8 +38,7 @@ test('variants', () => {
test('stacked peer variants', async () => {
let config = {
mode: 'jit',
purge: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }],
content: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }],
corePlugins: { preflight: false },
theme: {},
plugins: [],