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

142
src/cli.js
View file

@ -9,11 +9,11 @@ import fs from 'fs'
import postcssrc from 'postcss-load-config'
import { cosmiconfig } from 'cosmiconfig'
import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
import tailwindJit from './jit/processTailwindFeatures'
import tailwindAot from './processTailwindFeatures'
import tailwind from './processTailwindFeatures'
import resolveConfigInternal from '../resolveConfig'
import fastGlob from 'fast-glob'
import getModuleDependencies from './lib/getModuleDependencies'
import log from './util/log'
import packageJson from '../package.json'
let env = {
@ -86,7 +86,9 @@ function help({ message, usage, commands, options }) {
console.log()
console.log('Options:')
for (let { flags, description } of Object.values(groupedOptions)) {
for (let { flags, description, deprecated } of Object.values(groupedOptions)) {
if (deprecated) continue
if (flags.length === 1) {
console.log(
' '.repeat(indent + 4 /* 4 = "-i, ".length */),
@ -126,7 +128,6 @@ let commands = {
init: {
run: init,
args: {
'--jit': { type: Boolean, description: 'Initialize for JIT mode' },
'--full': { type: Boolean, description: 'Initialize a full `tailwind.config.js` file' },
'--postcss': { type: Boolean, description: 'Initialize a `postcss.config.js` file' },
'-f': '--full',
@ -139,8 +140,14 @@ let commands = {
'--input': { type: String, description: 'Input file' },
'--output': { type: String, description: 'Output file' },
'--watch': { type: Boolean, description: 'Watch for changes and rebuild as needed' },
'--jit': { type: Boolean, description: 'Build using JIT mode' },
'--purge': { type: String, description: 'Content paths to use for removing unused classes' },
'--content': {
type: String,
description: 'Content paths to use for removing unused classes',
},
'--purge': {
type: String,
deprecated: true,
},
'--postcss': {
type: oneOf(String, Boolean),
description: 'Load custom PostCSS configuration',
@ -306,15 +313,6 @@ function init() {
// Change colors import
stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
// --jit mode
if (args['--jit']) {
// Add jit mode
stubFile = stubFile.replace('module.exports = {', "module.exports = {\n mode: 'jit',")
// Deleting variants
stubFile = stubFile.replace(/variants: {(.*)},\n /gs, '')
}
fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
messages.push(`Created Tailwind CSS config file: ${path.basename(tailwindConfigLocation)}`)
@ -420,39 +418,21 @@ async function build() {
let resolvedConfig = resolveConfigInternal(config)
if (args['--purge']) {
resolvedConfig.purge = {
enabled: true,
content: args['--purge'].split(/(?<!{[^}]+),/),
log.warn(['The `--purge` flag has been deprecated.', 'Please use `--content` instead.'])
if (!args['--content']) {
args['--content'] = ['--purge']
}
}
if (args['--jit']) {
resolvedConfig.mode = 'jit'
if (args['--content']) {
resolvedConfig.content = args['--content'].split(/(?<!{[^}]+),/)
}
return resolvedConfig
}
function extractContent(config) {
let content = Array.isArray(config.purge) ? config.purge : config.purge.content
return content.concat(
(config.purge?.safelist ?? []).map((content) => {
if (typeof content === 'string') {
return { raw: content, extension: 'html' }
}
if (content instanceof RegExp) {
throw new Error(
"Values inside 'purge.safelist' can only be of type 'string', found 'regex'."
)
}
throw new Error(
`Values inside 'purge.safelist' can only be of type 'string', found '${typeof content}'.`
)
})
)
return config.content.content.concat(config.content.safelist)
}
function extractFileGlobs(config) {
@ -473,7 +453,7 @@ async function build() {
function getChangedContent(config) {
let changedContent = []
// Resolve globs from the purge config
// Resolve globs from the content config
let globs = extractFileGlobs(config)
let files = fastGlob.sync(globs)
@ -496,26 +476,18 @@ async function build() {
let config = resolveConfig()
let changedContent = getChangedContent(config)
let tailwindPlugin =
config.mode === 'jit'
? () => {
return {
postcssPlugin: 'tailwindcss',
Once(root, { result }) {
tailwindJit(({ createContext }) => {
return () => {
return createContext(config, changedContent)
}
})(root, result)
},
let tailwindPlugin = () => {
return {
postcssPlugin: 'tailwindcss',
Once(root, { result }) {
tailwind(({ createContext }) => {
return () => {
return createContext(config, changedContent)
}
}
: () => {
return {
postcssPlugin: 'tailwindcss',
plugins: [tailwindAot(() => config, configPath)],
}
}
})(root, result)
},
}
}
tailwindPlugin.postcss = true
@ -637,39 +609,31 @@ async function build() {
async function rebuild(config) {
env.DEBUG && console.time('Finished in')
let tailwindPlugin =
config.mode === 'jit'
? () => {
return {
postcssPlugin: 'tailwindcss',
Once(root, { result }) {
env.DEBUG && console.time('Compiling CSS')
tailwindJit(({ createContext }) => {
console.error()
console.error('Rebuilding...')
let tailwindPlugin = () => {
return {
postcssPlugin: 'tailwindcss',
Once(root, { result }) {
env.DEBUG && console.time('Compiling CSS')
tailwind(({ createContext }) => {
console.error()
console.error('Rebuilding...')
return () => {
if (context !== null) {
context.changedContent = changedContent.splice(0)
return context
}
return () => {
if (context !== null) {
context.changedContent = changedContent.splice(0)
return context
}
env.DEBUG && console.time('Creating context')
context = createContext(config, changedContent.splice(0))
env.DEBUG && console.timeEnd('Creating context')
return context
}
})(root, result)
env.DEBUG && console.timeEnd('Compiling CSS')
},
env.DEBUG && console.time('Creating context')
context = createContext(config, changedContent.splice(0))
env.DEBUG && console.timeEnd('Creating context')
return context
}
}
: () => {
return {
postcssPlugin: 'tailwindcss',
plugins: [tailwindAot(() => config, configPath)],
}
}
})(root, result)
env.DEBUG && console.timeEnd('Compiling CSS')
},
}
}
tailwindPlugin.postcss = true