2021-05-19 11:46:50 -04:00
|
|
|
import fs from 'fs'
|
|
|
|
|
import url from 'url'
|
|
|
|
|
import postcss from 'postcss'
|
|
|
|
|
import dlv from 'dlv'
|
|
|
|
|
import selectorParser from 'postcss-selector-parser'
|
|
|
|
|
|
2022-05-31 13:15:14 -04:00
|
|
|
import { flagEnabled } from '../featureFlags.js'
|
Remove AOT (#5340)
* 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
2021-09-01 17:13:59 +02:00
|
|
|
import transformThemeValue from '../util/transformThemeValue'
|
|
|
|
|
import parseObjectStyles from '../util/parseObjectStyles'
|
|
|
|
|
import prefixSelector from '../util/prefixSelector'
|
|
|
|
|
import isPlainObject from '../util/isPlainObject'
|
|
|
|
|
import escapeClassName from '../util/escapeClassName'
|
2021-09-16 14:47:41 +02:00
|
|
|
import nameClass, { formatClass } from '../util/nameClass'
|
Remove AOT (#5340)
* 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
2021-09-01 17:13:59 +02:00
|
|
|
import { coerceValue } from '../util/pluginUtils'
|
2021-10-01 17:31:09 +02:00
|
|
|
import { variantPlugins, corePlugins } from '../corePlugins'
|
2021-05-19 11:46:50 -04:00
|
|
|
import * as sharedState from './sharedState'
|
|
|
|
|
import { env } from './sharedState'
|
2021-09-06 20:15:10 +02:00
|
|
|
import { toPath } from '../util/toPath'
|
2021-09-16 14:47:41 +02:00
|
|
|
import log from '../util/log'
|
2021-10-06 13:42:05 -04:00
|
|
|
import negateValue from '../util/negateValue'
|
2021-11-22 12:38:37 -05:00
|
|
|
import isValidArbitraryValue from '../util/isValidArbitraryValue'
|
2022-02-10 18:06:41 +01:00
|
|
|
import { generateRules } from './generateRules'
|
2022-02-25 13:12:45 -05:00
|
|
|
import { hasContentChanged } from './cacheInvalidation.js'
|
2022-09-09 13:12:43 -04:00
|
|
|
import { Offsets } from './offsets.js'
|
2022-02-10 18:06:41 +01:00
|
|
|
|
2022-05-17 18:08:42 +02:00
|
|
|
let MATCH_VARIANT = Symbol()
|
|
|
|
|
|
2022-02-10 18:06:41 +01:00
|
|
|
function prefix(context, selector) {
|
|
|
|
|
let prefix = context.tailwindConfig.prefix
|
|
|
|
|
return typeof prefix === 'function' ? prefix(selector) : prefix + selector
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
|
Improve `addVariant` API (#5809)
* fix incorrect comment
Probably messed this up in another PR, so just a bit of cleaning.
* implement a formatVariantSelector function
This will be used to eventually simplify the addVariant API.
The idea is that it can take a list of strings that define a certain
format. Then it squashes everything to a single format how you would
expect it.
E.g.:
Input:
- '&:hover'
- '&:focus'
- '.dark &'
- ':merge(.group):hover &'
- ':merge(.group):focus &'
Output:
- ':merge(.group):focus:hover .dark &:focus:hover'
The API here is:
- `&`, this means "The parent" or "The previous selector" (you can
think of it like if you are using nested selectors)
- `:merge(.group)`, this means insert a `.group` if it doesn't exist
yet, but if it does exist already, then merge the new value with the
old value. This allows us to merge group-focus, group-hover into a
single `.group:focus:hover ...`
* add new `format`, `withRule` and `wrap` API for addVariant
* implement backwards compatibility
This will ensure that the backwards compatibility for `modifySelectors`
and direct mutations to the `container` will still work.
We will try to capture the changes made to the `rule.selector`, we will
also "backup" the existing selector. This allows us to diff the old and
new selectors and determine what actually happened.
Once we know this, we can restore the selector to the "old" selector and
add the diffed string e.g.: `.foo &`, to the `collectedFormats` as if
you called `format()` directly. This is a bunch of extra work, but it
allows us to be backwards compatible.
In the future we could also warn if you are using `modifySelectors`, but
it is going to be a little bit tricky, because usually that's
implemented by plugin authors and therefore you don't have direct
control over this. Maybe we can figure out the plugin this is used in
and change the warning somehow?
* fix incorrect test
This was clearly a bug, keyframes should not include escaped variants at
all. The reason this is here in the first place is because the nodes in
a keyframe are also "rule" nodes.
* swap the order of pseudo states
The current implementation had a strange side effect, that resulted in
incorrect class definitions. When you are combining the `:hover` and
`:focus` event, then there is no difference between `:hover:focus` and
`:focus:hover`.
However, when you use `:hover::file-selector-button` or `::file-selector-button:hover`,
then there is a big difference. In the first place, you can hover over the full file input
to apply changes to the `File selector button`.
In the second scenario you have to hover over the `File selector button` itself to apply changes.
You can think of it as function calls:
- focus(hover(text-center))
What you would expect is something like this:
`.focus\:hover\:text-center:hover:focus`, where `hover` is on the
inside, and `focus` is on the outside. However in the current
implementation this is implemented as
`.focus\:hover\:text-cener:focus:hover`
* add more variant tests for the new API
* update parallel variants tests to make use of new API
* implement core variants with new API
* simplify/cleanup existing plugin utils
We can get rid of this because we drastically simplified the new
addVariant API.
* add addVariant shorthand signature
The current API looks like this:
```js
addVariant('name', ({ format, wrap }) => {
// Wrap in an atRule
wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' }))
// "Mutate" the selector, for example prepend `.dark`
format('.dark &')
})
```
It is also pretty common to have this:
```js
addVariant('name', ({ format }) => format('.dark &'))
```
So we simplified this to:
```js
addVariant('name', '.dark &')
```
It is also pretty common to have this:
```js
addVariant('name', ({ wrap }) => wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })))
```
So we simplified this to:
```js
addVariant('name', '@media (prefers-reduced-motion: reduce)')
```
* improve fontVariantNumeric implementation
We will use `@defaults`, so that only the resets are injected for the
utilities we actually use.
* fix typo
* allow for nested addVariant shorthand
This will allow to write something like:
```js
addVariant('name', `
@supports (hover: hover) {
@media (print) {
&:hover
}
}
`)
// Or as a one-liner
addVariant('name', '@supports (hover: hover) { @media (print) { &:hover } }')
```
* update changelog
2021-10-18 11:26:11 +02:00
|
|
|
function parseVariantFormatString(input) {
|
|
|
|
|
if (input.includes('{')) {
|
|
|
|
|
if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
|
|
|
|
|
|
|
|
|
|
return input
|
|
|
|
|
.split(/{(.*)}/gim)
|
|
|
|
|
.flatMap((line) => parseVariantFormatString(line))
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return [input.trim()]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isBalanced(input) {
|
|
|
|
|
let count = 0
|
|
|
|
|
|
|
|
|
|
for (let char of input) {
|
|
|
|
|
if (char === '{') {
|
|
|
|
|
count++
|
|
|
|
|
} else if (char === '}') {
|
|
|
|
|
if (--count < 0) {
|
|
|
|
|
return false // unbalanced
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return count === 0
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
function insertInto(list, value, { before = [] } = {}) {
|
|
|
|
|
before = [].concat(before)
|
|
|
|
|
|
|
|
|
|
if (before.length <= 0) {
|
|
|
|
|
list.push(value)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let idx = list.length - 1
|
|
|
|
|
for (let other of before) {
|
|
|
|
|
let iidx = list.indexOf(other)
|
|
|
|
|
if (iidx === -1) continue
|
|
|
|
|
idx = Math.min(idx, iidx)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
list.splice(idx, 0, value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function parseStyles(styles) {
|
|
|
|
|
if (!Array.isArray(styles)) {
|
|
|
|
|
return parseStyles([styles])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return styles.flatMap((style) => {
|
|
|
|
|
let isNode = !Array.isArray(style) && !isPlainObject(style)
|
|
|
|
|
return isNode ? style : parseObjectStyles(style)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-17 16:35:40 +01:00
|
|
|
function getClasses(selector, mutate) {
|
2021-05-19 11:46:50 -04:00
|
|
|
let parser = selectorParser((selectors) => {
|
|
|
|
|
let allClasses = []
|
2022-03-17 16:35:40 +01:00
|
|
|
|
|
|
|
|
if (mutate) {
|
|
|
|
|
mutate(selectors)
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
selectors.walkClasses((classNode) => {
|
|
|
|
|
allClasses.push(classNode.value)
|
|
|
|
|
})
|
2022-03-17 16:35:40 +01:00
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
return allClasses
|
|
|
|
|
})
|
|
|
|
|
return parser.transformSync(selector)
|
|
|
|
|
}
|
|
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
function extractCandidates(node, state = { containsNonOnDemandable: false }, depth = 0) {
|
2021-09-28 11:54:39 +02:00
|
|
|
let classes = []
|
|
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
// Handle normal rules
|
2021-09-28 11:54:39 +02:00
|
|
|
if (node.type === 'rule') {
|
2022-03-17 16:35:40 +01:00
|
|
|
// Ignore everything inside a :not(...). This allows you to write code like
|
|
|
|
|
// `div:not(.foo)`. If `.foo` is never found in your code, then we used to
|
|
|
|
|
// not generated it. But now we will ignore everything inside a `:not`, so
|
|
|
|
|
// that it still gets generated.
|
|
|
|
|
function ignoreNot(selectors) {
|
|
|
|
|
selectors.walkPseudos((pseudo) => {
|
|
|
|
|
if (pseudo.value === ':not') {
|
|
|
|
|
pseudo.remove()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-28 11:54:39 +02:00
|
|
|
for (let selector of node.selectors) {
|
2022-03-17 16:35:40 +01:00
|
|
|
let classCandidates = getClasses(selector, ignoreNot)
|
2021-09-28 11:54:39 +02:00
|
|
|
// At least one of the selectors contains non-"on-demandable" candidates.
|
2022-01-06 13:27:14 +01:00
|
|
|
if (classCandidates.length === 0) {
|
|
|
|
|
state.containsNonOnDemandable = true
|
|
|
|
|
}
|
2021-09-28 11:54:39 +02:00
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
for (let classCandidate of classCandidates) {
|
|
|
|
|
classes.push(classCandidate)
|
|
|
|
|
}
|
2021-09-28 11:54:39 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
// Handle at-rules (which contains nested rules)
|
|
|
|
|
else if (node.type === 'atrule') {
|
2021-05-19 11:46:50 -04:00
|
|
|
node.walkRules((rule) => {
|
2022-03-17 16:35:40 +01:00
|
|
|
for (let classCandidate of rule.selectors.flatMap((selector) => getClasses(selector))) {
|
2022-01-06 13:27:14 +01:00
|
|
|
classes.push(classCandidate)
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
if (depth === 0) {
|
|
|
|
|
return [state.containsNonOnDemandable || classes.length === 0, classes]
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
return classes
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function withIdentifiers(styles) {
|
|
|
|
|
return parseStyles(styles).flatMap((node) => {
|
|
|
|
|
let nodeMap = new Map()
|
2022-01-06 13:27:14 +01:00
|
|
|
let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
// If this isn't "on-demandable", assign it a universal candidate to always include it.
|
|
|
|
|
if (containsNonOnDemandableSelectors) {
|
2022-02-15 13:44:19 -05:00
|
|
|
candidates.unshift(sharedState.NOT_ON_DEMAND)
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
2022-01-06 13:27:14 +01:00
|
|
|
// However, it could be that it also contains "on-demandable" candidates.
|
|
|
|
|
// E.g.: `span, .foo {}`, in that case it should still be possible to use
|
|
|
|
|
// `@apply foo` for example.
|
2021-05-19 11:46:50 -04:00
|
|
|
return candidates.map((c) => {
|
|
|
|
|
if (!nodeMap.has(node)) {
|
|
|
|
|
nodeMap.set(node, node)
|
|
|
|
|
}
|
|
|
|
|
return [c, nodeMap.get(node)]
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-14 13:58:02 -04:00
|
|
|
export function isValidVariantFormatString(format) {
|
|
|
|
|
return format.startsWith('@') || format.includes('&')
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-08 18:24:59 +02:00
|
|
|
export function parseVariant(variant) {
|
|
|
|
|
variant = variant
|
|
|
|
|
.replace(/\n+/g, '')
|
|
|
|
|
.replace(/\s{1,}/g, ' ')
|
|
|
|
|
.trim()
|
|
|
|
|
|
|
|
|
|
let fns = parseVariantFormatString(variant)
|
|
|
|
|
.map((str) => {
|
|
|
|
|
if (!str.startsWith('@')) {
|
|
|
|
|
return ({ format }) => format(str)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str)
|
|
|
|
|
return ({ wrap }) => wrap(postcss.atRule({ name, params: params.trim() }))
|
|
|
|
|
})
|
|
|
|
|
.reverse()
|
|
|
|
|
|
|
|
|
|
return (api) => {
|
|
|
|
|
for (let fn of fns) {
|
|
|
|
|
fn(api)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @param {any} tailwindConfig
|
|
|
|
|
* @param {any} context
|
|
|
|
|
* @param {object} param2
|
|
|
|
|
* @param {Offsets} param2.offsets
|
|
|
|
|
*/
|
2021-09-16 14:47:41 +02:00
|
|
|
function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
|
2021-05-19 11:46:50 -04:00
|
|
|
function getConfigValue(path, defaultValue) {
|
|
|
|
|
return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function applyConfiguredPrefix(selector) {
|
|
|
|
|
return prefixSelector(tailwindConfig.prefix, selector)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function prefixIdentifier(identifier, options) {
|
2022-02-15 13:44:19 -05:00
|
|
|
if (identifier === sharedState.NOT_ON_DEMAND) {
|
|
|
|
|
return sharedState.NOT_ON_DEMAND
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!options.respectPrefix) {
|
|
|
|
|
return identifier
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return context.tailwindConfig.prefix + identifier
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-25 13:54:30 -04:00
|
|
|
function resolveThemeValue(path, defaultValue, opts = {}) {
|
|
|
|
|
const [pathRoot, ...subPaths] = toPath(path)
|
|
|
|
|
const value = getConfigValue(['theme', pathRoot, ...subPaths], defaultValue)
|
|
|
|
|
return transformThemeValue(pathRoot)(value, opts)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const theme = Object.assign(
|
|
|
|
|
(path, defaultValue = undefined) => resolveThemeValue(path, defaultValue),
|
|
|
|
|
{
|
|
|
|
|
withAlpha: (path, opacityValue) => resolveThemeValue(path, undefined, { opacityValue }),
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
2022-05-17 18:08:42 +02:00
|
|
|
let api = {
|
2021-05-19 11:46:50 -04:00
|
|
|
postcss,
|
|
|
|
|
prefix: applyConfiguredPrefix,
|
|
|
|
|
e: escapeClassName,
|
|
|
|
|
config: getConfigValue,
|
2022-05-25 13:54:30 -04:00
|
|
|
theme,
|
2021-05-19 11:46:50 -04:00
|
|
|
corePlugins: (path) => {
|
|
|
|
|
if (Array.isArray(tailwindConfig.corePlugins)) {
|
|
|
|
|
return tailwindConfig.corePlugins.includes(path)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return getConfigValue(['corePlugins', path], true)
|
|
|
|
|
},
|
2021-09-10 15:34:27 +02:00
|
|
|
variants: () => {
|
|
|
|
|
// Preserved for backwards compatibility but not used in v3.0+
|
|
|
|
|
return []
|
2021-05-19 11:46:50 -04:00
|
|
|
},
|
|
|
|
|
addBase(base) {
|
|
|
|
|
for (let [identifier, rule] of withIdentifiers(base)) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, {})
|
2022-09-09 13:12:43 -04:00
|
|
|
let offset = offsets.create('base')
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.candidateRuleMap
|
|
|
|
|
.get(prefixedIdentifier)
|
2022-01-10 12:36:14 -05:00
|
|
|
.push([{ sort: offset, layer: 'base' }, rule])
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
},
|
2021-12-14 12:21:38 -05:00
|
|
|
/**
|
|
|
|
|
* @param {string} group
|
|
|
|
|
* @param {Record<string, string | string[]>} declarations
|
|
|
|
|
*/
|
|
|
|
|
addDefaults(group, declarations) {
|
|
|
|
|
const groups = {
|
|
|
|
|
[`@defaults ${group}`]: declarations,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let [identifier, rule] of withIdentifiers(groups)) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, {})
|
|
|
|
|
|
|
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.candidateRuleMap
|
|
|
|
|
.get(prefixedIdentifier)
|
2022-09-09 13:12:43 -04:00
|
|
|
.push([{ sort: offsets.create('defaults'), layer: 'defaults' }, rule])
|
2021-12-14 12:21:38 -05:00
|
|
|
}
|
|
|
|
|
},
|
2021-05-19 11:46:50 -04:00
|
|
|
addComponents(components, options) {
|
|
|
|
|
let defaultOptions = {
|
2022-07-27 12:19:08 -04:00
|
|
|
preserveSource: false,
|
2021-05-19 11:46:50 -04:00
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: false,
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 17:31:09 +02:00
|
|
|
options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
for (let [identifier, rule] of withIdentifiers(components)) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, options)
|
|
|
|
|
|
2021-09-16 14:47:41 +02:00
|
|
|
classList.add(prefixedIdentifier)
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.candidateRuleMap
|
|
|
|
|
.get(prefixedIdentifier)
|
2022-09-09 13:12:43 -04:00
|
|
|
.push([{ sort: offsets.create('components'), layer: 'components', options }, rule])
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
addUtilities(utilities, options) {
|
|
|
|
|
let defaultOptions = {
|
2022-07-27 12:19:08 -04:00
|
|
|
preserveSource: false,
|
2021-05-19 11:46:50 -04:00
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: true,
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 17:31:09 +02:00
|
|
|
options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
for (let [identifier, rule] of withIdentifiers(utilities)) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, options)
|
|
|
|
|
|
2021-09-16 14:47:41 +02:00
|
|
|
classList.add(prefixedIdentifier)
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.candidateRuleMap
|
|
|
|
|
.get(prefixedIdentifier)
|
2022-09-09 13:12:43 -04:00
|
|
|
.push([{ sort: offsets.create('utilities'), layer: 'utilities', options }, rule])
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
matchUtilities: function (utilities, options) {
|
|
|
|
|
let defaultOptions = {
|
|
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: true,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
options = { ...defaultOptions, ...options }
|
|
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
let offset = offsets.create('utilities')
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
for (let identifier in utilities) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, options)
|
|
|
|
|
let rule = utilities[identifier]
|
|
|
|
|
|
2021-09-16 14:47:41 +02:00
|
|
|
classList.add([prefixedIdentifier, options])
|
|
|
|
|
|
2021-09-24 18:28:08 +02:00
|
|
|
function wrapped(modifier, { isOnlyPlugin }) {
|
2021-05-19 11:46:50 -04:00
|
|
|
let { type = 'any' } = options
|
|
|
|
|
type = [].concat(type)
|
2021-10-06 13:42:05 -04:00
|
|
|
let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-09-24 18:28:08 +02:00
|
|
|
if (value === undefined) {
|
2021-05-19 11:46:50 -04:00
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 11:47:02 -04:00
|
|
|
if (!type.includes(coercedType) && !isOnlyPlugin) {
|
|
|
|
|
return []
|
2021-09-24 18:28:08 +02:00
|
|
|
}
|
|
|
|
|
|
2021-08-26 11:52:47 +02:00
|
|
|
if (!isValidArbitraryValue(value)) {
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
let ruleSets = []
|
2021-10-01 17:31:09 +02:00
|
|
|
.concat(rule(value))
|
2021-05-19 11:46:50 -04:00
|
|
|
.filter(Boolean)
|
|
|
|
|
.map((declaration) => ({
|
|
|
|
|
[nameClass(identifier, modifier)]: declaration,
|
|
|
|
|
}))
|
|
|
|
|
|
2021-10-01 17:31:09 +02:00
|
|
|
return ruleSets
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let withOffsets = [{ sort: offset, layer: 'utilities', options }, wrapped]
|
|
|
|
|
|
|
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 17:31:09 +02:00
|
|
|
context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
matchComponents: function (components, options) {
|
|
|
|
|
let defaultOptions = {
|
|
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: false,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
options = { ...defaultOptions, ...options }
|
|
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
let offset = offsets.create('components')
|
2021-10-01 17:31:09 +02:00
|
|
|
|
|
|
|
|
for (let identifier in components) {
|
|
|
|
|
let prefixedIdentifier = prefixIdentifier(identifier, options)
|
|
|
|
|
let rule = components[identifier]
|
|
|
|
|
|
|
|
|
|
classList.add([prefixedIdentifier, options])
|
|
|
|
|
|
|
|
|
|
function wrapped(modifier, { isOnlyPlugin }) {
|
|
|
|
|
let { type = 'any' } = options
|
|
|
|
|
type = [].concat(type)
|
2021-10-06 13:42:05 -04:00
|
|
|
let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
|
2021-10-01 17:31:09 +02:00
|
|
|
|
|
|
|
|
if (value === undefined) {
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!type.includes(coercedType)) {
|
|
|
|
|
if (isOnlyPlugin) {
|
|
|
|
|
log.warn([
|
|
|
|
|
`Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
|
|
|
|
|
`You can safely update it to \`${identifier}-${modifier.replace(
|
|
|
|
|
coercedType + ':',
|
|
|
|
|
''
|
|
|
|
|
)}\`.`,
|
|
|
|
|
])
|
|
|
|
|
} else {
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!isValidArbitraryValue(value)) {
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let ruleSets = []
|
|
|
|
|
.concat(rule(value))
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
.map((declaration) => ({
|
|
|
|
|
[nameClass(identifier, modifier)]: declaration,
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
return ruleSets
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let withOffsets = [{ sort: offset, layer: 'components', options }, wrapped]
|
|
|
|
|
|
|
|
|
|
if (!context.candidateRuleMap.has(prefixedIdentifier)) {
|
|
|
|
|
context.candidateRuleMap.set(prefixedIdentifier, [])
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
|
|
|
|
|
}
|
|
|
|
|
},
|
2022-05-20 10:12:58 -04:00
|
|
|
addVariant(variantName, variantFunctions, options = {}) {
|
|
|
|
|
variantFunctions = [].concat(variantFunctions).map((variantFunction) => {
|
|
|
|
|
if (typeof variantFunction !== 'string') {
|
|
|
|
|
// Safelist public API functions
|
2022-05-20 10:33:36 -04:00
|
|
|
return (api) => {
|
|
|
|
|
let { args, modifySelectors, container, separator, wrap, format } = api
|
2022-05-20 10:12:58 -04:00
|
|
|
let result = variantFunction(
|
|
|
|
|
Object.assign(
|
|
|
|
|
{ modifySelectors, container, separator },
|
|
|
|
|
variantFunction[MATCH_VARIANT] && { args, wrap, format }
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
if (typeof result === 'string' && !isValidVariantFormatString(result)) {
|
|
|
|
|
throw new Error(
|
|
|
|
|
`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-31 15:03:06 +02:00
|
|
|
if (Array.isArray(result)) {
|
2022-06-12 10:50:41 -04:00
|
|
|
return result
|
|
|
|
|
.filter((variant) => typeof variant === 'string')
|
|
|
|
|
.map((variant) => parseVariant(variant))
|
2022-05-31 15:03:06 +02:00
|
|
|
}
|
|
|
|
|
|
2022-05-20 10:33:36 -04:00
|
|
|
// result may be undefined with legacy variants that use APIs like `modifySelectors`
|
2022-06-12 10:50:41 -04:00
|
|
|
// result may also be a postcss node if someone was returning the result from `modifySelectors`
|
|
|
|
|
return result && typeof result === 'string' && parseVariant(result)(api)
|
2022-05-20 10:12:58 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!isValidVariantFormatString(variantFunction)) {
|
|
|
|
|
throw new Error(
|
|
|
|
|
`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return parseVariant(variantFunction)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
insertInto(variantList, variantName, options)
|
|
|
|
|
variantMap.set(variantName, variantFunctions)
|
|
|
|
|
},
|
2022-05-31 13:15:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (flagEnabled(tailwindConfig, 'matchVariant')) {
|
|
|
|
|
api.matchVariant = function (variants, options) {
|
2022-05-17 18:08:42 +02:00
|
|
|
for (let variant in variants) {
|
|
|
|
|
for (let [k, v] of Object.entries(options?.values ?? {})) {
|
|
|
|
|
api.addVariant(`${variant}-${k}`, variants[variant](v))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
api.addVariant(
|
|
|
|
|
variant,
|
2022-05-20 10:33:36 -04:00
|
|
|
Object.assign(({ args }) => variants[variant](args), { [MATCH_VARIANT]: true }),
|
2022-05-17 18:08:42 +02:00
|
|
|
options
|
|
|
|
|
)
|
|
|
|
|
}
|
2022-05-31 13:15:14 -04:00
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
2022-05-17 18:08:42 +02:00
|
|
|
|
|
|
|
|
return api
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
2021-05-27 18:29:07 +02:00
|
|
|
let fileModifiedMapCache = new WeakMap()
|
|
|
|
|
export function getFileModifiedMap(context) {
|
|
|
|
|
if (!fileModifiedMapCache.has(context)) {
|
|
|
|
|
fileModifiedMapCache.set(context, new Map())
|
|
|
|
|
}
|
|
|
|
|
return fileModifiedMapCache.get(context)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function trackModified(files, fileModifiedMap) {
|
2021-05-19 11:46:50 -04:00
|
|
|
let changed = false
|
|
|
|
|
|
|
|
|
|
for (let file of files) {
|
|
|
|
|
if (!file) continue
|
|
|
|
|
|
|
|
|
|
let parsed = url.parse(file)
|
2021-08-27 17:12:06 +03:00
|
|
|
let pathname = parsed.hash ? parsed.href.replace(parsed.hash, '') : parsed.href
|
|
|
|
|
pathname = parsed.search ? pathname.replace(parsed.search, '') : pathname
|
2022-01-05 14:18:41 +01:00
|
|
|
let newModified = fs.statSync(decodeURIComponent(pathname), { throwIfNoEntry: false })?.mtimeMs
|
|
|
|
|
if (!newModified) {
|
|
|
|
|
// It could happen that a file is passed in that doesn't exist. E.g.:
|
|
|
|
|
// postcss-cli will provide you a fake path when reading from stdin. This
|
|
|
|
|
// path then looks like /path-to-your-project/stdin In that case we just
|
|
|
|
|
// want to ignore it and don't track changes at all.
|
|
|
|
|
continue
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-05-27 18:29:07 +02:00
|
|
|
if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
|
2021-05-19 11:46:50 -04:00
|
|
|
changed = true
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-27 18:29:07 +02:00
|
|
|
fileModifiedMap.set(file, newModified)
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return changed
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function extractVariantAtRules(node) {
|
|
|
|
|
node.walkAtRules((atRule) => {
|
|
|
|
|
if (['responsive', 'variants'].includes(atRule.name)) {
|
|
|
|
|
extractVariantAtRules(atRule)
|
|
|
|
|
atRule.before(atRule.nodes)
|
|
|
|
|
atRule.remove()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function collectLayerPlugins(root) {
|
|
|
|
|
let layerPlugins = []
|
|
|
|
|
|
|
|
|
|
root.each((node) => {
|
|
|
|
|
if (node.type === 'atrule' && ['responsive', 'variants'].includes(node.name)) {
|
|
|
|
|
node.name = 'layer'
|
|
|
|
|
node.params = 'utilities'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// Walk @layer rules and treat them like plugins
|
|
|
|
|
root.walkAtRules('layer', (layerRule) => {
|
|
|
|
|
extractVariantAtRules(layerRule)
|
|
|
|
|
|
|
|
|
|
if (layerRule.params === 'base') {
|
|
|
|
|
for (let node of layerRule.nodes) {
|
|
|
|
|
layerPlugins.push(function ({ addBase }) {
|
|
|
|
|
addBase(node, { respectPrefix: false })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
layerRule.remove()
|
|
|
|
|
} else if (layerRule.params === 'components') {
|
|
|
|
|
for (let node of layerRule.nodes) {
|
|
|
|
|
layerPlugins.push(function ({ addComponents }) {
|
2022-07-27 12:19:08 -04:00
|
|
|
addComponents(node, { respectPrefix: false, preserveSource: true })
|
2021-05-19 11:46:50 -04:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
layerRule.remove()
|
|
|
|
|
} else if (layerRule.params === 'utilities') {
|
|
|
|
|
for (let node of layerRule.nodes) {
|
|
|
|
|
layerPlugins.push(function ({ addUtilities }) {
|
2022-07-27 12:19:08 -04:00
|
|
|
addUtilities(node, { respectPrefix: false, preserveSource: true })
|
2021-05-19 11:46:50 -04:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
layerRule.remove()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return layerPlugins
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-28 12:00:27 +02:00
|
|
|
function resolvePlugins(context, root) {
|
2021-10-01 17:31:09 +02:00
|
|
|
let corePluginList = Object.entries({ ...variantPlugins, ...corePlugins })
|
2021-05-19 11:46:50 -04:00
|
|
|
.map(([name, plugin]) => {
|
|
|
|
|
if (!context.tailwindConfig.corePlugins.includes(name)) {
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return plugin
|
|
|
|
|
})
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
|
|
|
|
|
let userPlugins = context.tailwindConfig.plugins.map((plugin) => {
|
|
|
|
|
if (plugin.__isOptionsFunction) {
|
|
|
|
|
plugin = plugin()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return typeof plugin === 'function' ? plugin : plugin.handler
|
|
|
|
|
})
|
|
|
|
|
|
2021-09-28 12:00:27 +02:00
|
|
|
let layerPlugins = collectLayerPlugins(root)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
// TODO: This is a workaround for backwards compatibility, since custom variants
|
|
|
|
|
// were historically sorted before screen/stackable variants.
|
2021-10-01 17:31:09 +02:00
|
|
|
let beforeVariants = [
|
|
|
|
|
variantPlugins['pseudoElementVariants'],
|
|
|
|
|
variantPlugins['pseudoClassVariants'],
|
|
|
|
|
]
|
2021-05-19 11:46:50 -04:00
|
|
|
let afterVariants = [
|
2021-10-01 17:31:09 +02:00
|
|
|
variantPlugins['directionVariants'],
|
|
|
|
|
variantPlugins['reducedMotionVariants'],
|
2022-05-23 17:40:14 +02:00
|
|
|
variantPlugins['prefersContrastVariants'],
|
2021-10-01 17:31:09 +02:00
|
|
|
variantPlugins['darkVariants'],
|
2021-10-27 10:21:02 -04:00
|
|
|
variantPlugins['printVariant'],
|
2021-10-01 17:31:09 +02:00
|
|
|
variantPlugins['screenVariants'],
|
2021-11-23 19:59:25 +00:00
|
|
|
variantPlugins['orientationVariants'],
|
2021-05-19 11:46:50 -04:00
|
|
|
]
|
|
|
|
|
|
|
|
|
|
return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function registerPlugins(plugins, context) {
|
|
|
|
|
let variantList = []
|
|
|
|
|
let variantMap = new Map()
|
2022-09-09 13:12:43 -04:00
|
|
|
context.variantMap = variantMap
|
|
|
|
|
|
|
|
|
|
let offsets = new Offsets()
|
|
|
|
|
context.offsets = offsets
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-09-16 14:47:41 +02:00
|
|
|
let classList = new Set()
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
let pluginApi = buildPluginApi(context.tailwindConfig, context, {
|
|
|
|
|
variantList,
|
|
|
|
|
variantMap,
|
|
|
|
|
offsets,
|
2021-09-16 14:47:41 +02:00
|
|
|
classList,
|
2021-05-19 11:46:50 -04:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
for (let plugin of plugins) {
|
|
|
|
|
if (Array.isArray(plugin)) {
|
|
|
|
|
for (let pluginItem of plugin) {
|
|
|
|
|
pluginItem(pluginApi)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2021-09-04 16:33:55 +02:00
|
|
|
plugin?.(pluginApi)
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
// Make sure to record bit masks for every variant
|
|
|
|
|
offsets.recordVariants(variantList, (variant) => variantMap.get(variant).length)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
|
|
|
|
// Build variantMap
|
2021-05-27 11:09:29 -04:00
|
|
|
for (let [variantName, variantFunctions] of variantMap.entries()) {
|
|
|
|
|
context.variantMap.set(
|
|
|
|
|
variantName,
|
2022-09-09 13:12:43 -04:00
|
|
|
variantFunctions.map((variantFunction, idx) => [
|
|
|
|
|
offsets.forVariant(variantName, idx),
|
|
|
|
|
variantFunction,
|
|
|
|
|
])
|
2021-05-27 11:09:29 -04:00
|
|
|
)
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
2021-09-16 14:47:41 +02:00
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
|
|
|
|
|
if (safelist.length > 0) {
|
2021-09-16 14:47:41 +02:00
|
|
|
let checks = []
|
|
|
|
|
|
|
|
|
|
for (let value of safelist) {
|
|
|
|
|
if (typeof value === 'string') {
|
2021-10-01 12:56:54 +02:00
|
|
|
context.changedContent.push({ content: value, extension: 'html' })
|
2021-09-16 14:47:41 +02:00
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (value instanceof RegExp) {
|
2021-09-30 21:16:01 -04:00
|
|
|
log.warn('root-regex', [
|
2021-10-01 11:47:02 -04:00
|
|
|
'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
|
|
|
|
|
'Update your `safelist` configuration to eliminate this warning.',
|
2022-01-19 15:09:13 -05:00
|
|
|
'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
|
2021-09-30 21:16:01 -04:00
|
|
|
])
|
2021-09-16 14:47:41 +02:00
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
checks.push(value)
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
if (checks.length > 0) {
|
|
|
|
|
let patternMatchingCount = new Map()
|
2022-02-07 10:24:30 -05:00
|
|
|
let prefixLength = context.tailwindConfig.prefix.length
|
2021-10-01 12:56:54 +02:00
|
|
|
|
|
|
|
|
for (let util of classList) {
|
|
|
|
|
let utils = Array.isArray(util)
|
|
|
|
|
? (() => {
|
|
|
|
|
let [utilName, options] = util
|
2022-02-07 10:24:30 -05:00
|
|
|
let values = Object.keys(options?.values ?? {})
|
|
|
|
|
let classes = values.map((value) => formatClass(utilName, value))
|
2021-12-14 20:55:26 +00:00
|
|
|
|
|
|
|
|
if (options?.supportsNegativeValues) {
|
2022-02-07 10:24:30 -05:00
|
|
|
// This is the normal negated version
|
|
|
|
|
// e.g. `-inset-1` or `-tw-inset-1`
|
2021-12-14 20:55:26 +00:00
|
|
|
classes = [...classes, ...classes.map((cls) => '-' + cls)]
|
2022-02-07 10:24:30 -05:00
|
|
|
|
|
|
|
|
// This is the negated version *after* the prefix
|
|
|
|
|
// e.g. `tw--inset-1`
|
|
|
|
|
// The prefix is already attached to util name
|
|
|
|
|
// So we add the negative after the prefix
|
|
|
|
|
classes = [
|
|
|
|
|
...classes,
|
|
|
|
|
...classes.map(
|
|
|
|
|
(cls) => cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
|
|
|
|
|
),
|
|
|
|
|
]
|
2021-12-14 20:55:26 +00:00
|
|
|
}
|
|
|
|
|
|
2022-07-04 16:37:38 -04:00
|
|
|
if ([].concat(options?.type).includes('color')) {
|
|
|
|
|
classes = [
|
|
|
|
|
...classes,
|
|
|
|
|
...classes.flatMap((cls) =>
|
|
|
|
|
Object.keys(context.tailwindConfig.theme.opacity).map(
|
|
|
|
|
(opacity) => `${cls}/${opacity}`
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-14 20:55:26 +00:00
|
|
|
return classes
|
2021-10-01 12:56:54 +02:00
|
|
|
})()
|
|
|
|
|
: [util]
|
|
|
|
|
|
|
|
|
|
for (let util of utils) {
|
|
|
|
|
for (let { pattern, variants = [] } of checks) {
|
|
|
|
|
// RegExp with the /g flag are stateful, so let's reset the last
|
|
|
|
|
// index pointer to reset the state.
|
|
|
|
|
pattern.lastIndex = 0
|
|
|
|
|
|
|
|
|
|
if (!patternMatchingCount.has(pattern)) {
|
|
|
|
|
patternMatchingCount.set(pattern, 0)
|
|
|
|
|
}
|
2021-09-16 14:47:41 +02:00
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
if (!pattern.test(util)) continue
|
2021-09-16 14:47:41 +02:00
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1)
|
2021-09-16 14:47:41 +02:00
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
context.changedContent.push({ content: util, extension: 'html' })
|
|
|
|
|
for (let variant of variants) {
|
|
|
|
|
context.changedContent.push({
|
|
|
|
|
content: variant + context.tailwindConfig.separator + util,
|
|
|
|
|
extension: 'html',
|
|
|
|
|
})
|
|
|
|
|
}
|
2021-09-16 14:47:41 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
for (let [regex, count] of patternMatchingCount.entries()) {
|
|
|
|
|
if (count !== 0) continue
|
2021-09-16 14:47:41 +02:00
|
|
|
|
2021-10-01 12:56:54 +02:00
|
|
|
log.warn([
|
2021-10-01 11:47:02 -04:00
|
|
|
`The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
|
|
|
|
|
'Fix this pattern or remove it from your `safelist` configuration.',
|
2022-01-19 15:09:13 -05:00
|
|
|
'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
|
2021-10-01 12:56:54 +02:00
|
|
|
])
|
|
|
|
|
}
|
2021-09-16 14:47:41 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-09-26 12:01:07 +02:00
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
let darkClassName = [].concat(context.tailwindConfig.darkMode ?? 'media')[1] ?? 'dark'
|
|
|
|
|
|
2022-02-10 18:06:41 +01:00
|
|
|
// A list of utilities that are used by certain Tailwind CSS utilities but
|
|
|
|
|
// that don't exist on their own. This will result in them "not existing" and
|
|
|
|
|
// sorting could be weird since you still require them in order to make the
|
2022-09-09 13:12:43 -04:00
|
|
|
// host utilities work properly. (Thanks Biology)
|
|
|
|
|
let parasiteUtilities = [
|
|
|
|
|
prefix(context, darkClassName),
|
|
|
|
|
prefix(context, 'group'),
|
|
|
|
|
prefix(context, 'peer'),
|
|
|
|
|
]
|
2022-02-16 11:03:00 +01:00
|
|
|
context.getClassOrder = function getClassOrder(classes) {
|
2022-09-09 13:12:43 -04:00
|
|
|
// Non-util classes won't be generated, so we default them to null
|
|
|
|
|
let sortedClassNames = new Map(classes.map((className) => [className, null]))
|
|
|
|
|
|
|
|
|
|
// Sort all classes in order
|
|
|
|
|
// Non-tailwind classes won't be generated and will be left as `null`
|
|
|
|
|
let rules = generateRules(new Set(classes), context)
|
|
|
|
|
rules = context.offsets.sort(rules)
|
|
|
|
|
|
|
|
|
|
let idx = BigInt(parasiteUtilities.length)
|
|
|
|
|
|
|
|
|
|
for (const [, rule] of rules) {
|
|
|
|
|
sortedClassNames.set(rule.raws.tailwind.candidate, idx++)
|
2022-02-10 18:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-16 11:03:00 +01:00
|
|
|
return classes.map((className) => {
|
|
|
|
|
let order = sortedClassNames.get(className) ?? null
|
2022-09-09 13:12:43 -04:00
|
|
|
let parasiteIndex = parasiteUtilities.indexOf(className)
|
2022-02-10 18:06:41 +01:00
|
|
|
|
2022-09-09 13:12:43 -04:00
|
|
|
if (order === null && parasiteIndex !== -1) {
|
2022-02-16 11:03:00 +01:00
|
|
|
// This will make sure that it is at the very beginning of the
|
|
|
|
|
// `components` layer which technically means 'before any
|
|
|
|
|
// components'.
|
2022-09-09 13:12:43 -04:00
|
|
|
order = BigInt(parasiteIndex)
|
2022-02-16 11:03:00 +01:00
|
|
|
}
|
2022-02-10 18:06:41 +01:00
|
|
|
|
2022-02-16 11:03:00 +01:00
|
|
|
return [className, order]
|
|
|
|
|
})
|
2022-02-10 18:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
2021-10-01 09:41:27 +01:00
|
|
|
// Generate a list of strings for autocompletion purposes, e.g.
|
|
|
|
|
// ['uppercase', 'lowercase', ...]
|
2022-02-10 18:06:41 +01:00
|
|
|
context.getClassList = function getClassList() {
|
2021-09-26 12:01:07 +02:00
|
|
|
let output = []
|
|
|
|
|
|
|
|
|
|
for (let util of classList) {
|
|
|
|
|
if (Array.isArray(util)) {
|
|
|
|
|
let [utilName, options] = util
|
2021-10-06 13:42:05 -04:00
|
|
|
let negativeClasses = []
|
2021-09-26 12:01:07 +02:00
|
|
|
|
2021-10-06 13:42:05 -04:00
|
|
|
for (let [key, value] of Object.entries(options?.values ?? {})) {
|
|
|
|
|
output.push(formatClass(utilName, key))
|
|
|
|
|
if (options?.supportsNegativeValues && negateValue(value)) {
|
|
|
|
|
negativeClasses.push(formatClass(utilName, `-${key}`))
|
|
|
|
|
}
|
2021-09-26 12:01:07 +02:00
|
|
|
}
|
2021-10-06 13:42:05 -04:00
|
|
|
|
|
|
|
|
output.push(...negativeClasses)
|
2021-09-26 12:01:07 +02:00
|
|
|
} else {
|
|
|
|
|
output.push(util)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return output
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
|
2022-09-14 13:27:01 -04:00
|
|
|
/**
|
|
|
|
|
* Mark as class as retroactively invalid
|
|
|
|
|
*
|
|
|
|
|
*
|
|
|
|
|
* @param {string} candidate
|
|
|
|
|
*/
|
|
|
|
|
function markInvalidUtilityCandidate(context, candidate) {
|
|
|
|
|
if (!context.classCache.has(candidate)) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Mark this as not being a real utility
|
|
|
|
|
context.notClassCache.add(candidate)
|
|
|
|
|
|
|
|
|
|
// Remove it from any candidate-specific caches
|
|
|
|
|
context.classCache.delete(candidate)
|
|
|
|
|
context.applyClassCache.delete(candidate)
|
|
|
|
|
context.candidateRuleMap.delete(candidate)
|
|
|
|
|
context.candidateRuleCache.delete(candidate)
|
|
|
|
|
|
|
|
|
|
// Ensure the stylesheet gets rebuilt
|
|
|
|
|
context.stylesheetCache = null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Mark as class as retroactively invalid
|
|
|
|
|
*
|
|
|
|
|
* @param {import('postcss').Node} node
|
|
|
|
|
*/
|
|
|
|
|
function markInvalidUtilityNode(context, node) {
|
|
|
|
|
let candidate = node.raws.tailwind.candidate
|
|
|
|
|
|
|
|
|
|
if (!candidate) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const entry of context.ruleCache) {
|
|
|
|
|
if (entry[1].raws.tailwind.candidate === candidate) {
|
|
|
|
|
context.ruleCache.delete(entry)
|
|
|
|
|
// context.postCssNodeCache.delete(node)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
markInvalidUtilityCandidate(context, candidate)
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-28 12:00:27 +02:00
|
|
|
export function createContext(tailwindConfig, changedContent = [], root = postcss.root()) {
|
2021-06-01 14:02:23 +02:00
|
|
|
let context = {
|
|
|
|
|
disposables: [],
|
|
|
|
|
ruleCache: new Set(),
|
2022-08-29 14:13:32 -04:00
|
|
|
candidateRuleCache: new Map(),
|
2021-06-01 14:02:23 +02:00
|
|
|
classCache: new Map(),
|
|
|
|
|
applyClassCache: new Map(),
|
|
|
|
|
notClassCache: new Set(),
|
|
|
|
|
postCssNodeCache: new Map(),
|
|
|
|
|
candidateRuleMap: new Map(),
|
|
|
|
|
tailwindConfig,
|
|
|
|
|
changedContent: changedContent,
|
|
|
|
|
variantMap: new Map(),
|
|
|
|
|
stylesheetCache: null,
|
2022-09-14 13:27:01 -04:00
|
|
|
|
|
|
|
|
markInvalidUtilityCandidate: (candidate) => markInvalidUtilityCandidate(context, candidate),
|
|
|
|
|
markInvalidUtilityNode: (node) => markInvalidUtilityNode(context, node),
|
2021-06-01 14:02:23 +02:00
|
|
|
}
|
|
|
|
|
|
2021-09-28 12:00:27 +02:00
|
|
|
let resolvedPlugins = resolvePlugins(context, root)
|
2021-06-01 14:02:23 +02:00
|
|
|
registerPlugins(resolvedPlugins, context)
|
|
|
|
|
|
|
|
|
|
return context
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
let contextMap = sharedState.contextMap
|
|
|
|
|
let configContextMap = sharedState.configContextMap
|
|
|
|
|
let contextSourcesMap = sharedState.contextSourcesMap
|
|
|
|
|
|
|
|
|
|
export function getContext(
|
|
|
|
|
root,
|
|
|
|
|
result,
|
2021-05-27 18:29:07 +02:00
|
|
|
tailwindConfig,
|
|
|
|
|
userConfigPath,
|
|
|
|
|
tailwindConfigHash,
|
|
|
|
|
contextDependencies
|
2021-05-19 11:46:50 -04:00
|
|
|
) {
|
|
|
|
|
let sourcePath = result.opts.from
|
|
|
|
|
let isConfigFile = userConfigPath !== null
|
|
|
|
|
|
|
|
|
|
env.DEBUG && console.log('Source path:', sourcePath)
|
|
|
|
|
|
2021-05-26 14:07:24 +01:00
|
|
|
let existingContext
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-05-26 14:07:24 +01:00
|
|
|
if (isConfigFile && contextMap.has(sourcePath)) {
|
|
|
|
|
existingContext = contextMap.get(sourcePath)
|
|
|
|
|
} else if (configContextMap.has(tailwindConfigHash)) {
|
|
|
|
|
let context = configContextMap.get(tailwindConfigHash)
|
|
|
|
|
contextSourcesMap.get(context).add(sourcePath)
|
|
|
|
|
contextMap.set(sourcePath, context)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-05-26 14:07:24 +01:00
|
|
|
existingContext = context
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-25 13:12:45 -05:00
|
|
|
let cssDidChange = hasContentChanged(sourcePath, root)
|
|
|
|
|
|
2021-05-26 14:07:24 +01:00
|
|
|
// If there's already a context in the cache and we don't need to
|
|
|
|
|
// reset the context, return the cached context.
|
|
|
|
|
if (existingContext) {
|
2021-05-27 18:29:07 +02:00
|
|
|
let contextDependenciesChanged = trackModified(
|
|
|
|
|
[...contextDependencies],
|
|
|
|
|
getFileModifiedMap(existingContext)
|
|
|
|
|
)
|
2022-02-25 13:12:45 -05:00
|
|
|
if (!contextDependenciesChanged && !cssDidChange) {
|
2021-05-26 14:07:24 +01:00
|
|
|
return [existingContext, false]
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// If this source is in the context map, get the old context.
|
|
|
|
|
// Remove this source from the context sources for the old context,
|
|
|
|
|
// and clean up that context if no one else is using it. This can be
|
|
|
|
|
// called by many processes in rapid succession, so we check for presence
|
|
|
|
|
// first because the first process to run this code will wipe it out first.
|
|
|
|
|
if (contextMap.has(sourcePath)) {
|
|
|
|
|
let oldContext = contextMap.get(sourcePath)
|
|
|
|
|
if (contextSourcesMap.has(oldContext)) {
|
|
|
|
|
contextSourcesMap.get(oldContext).delete(sourcePath)
|
|
|
|
|
if (contextSourcesMap.get(oldContext).size === 0) {
|
|
|
|
|
contextSourcesMap.delete(oldContext)
|
2021-06-07 18:49:38 +01:00
|
|
|
for (let [tailwindConfigHash, context] of configContextMap) {
|
|
|
|
|
if (context === oldContext) {
|
|
|
|
|
configContextMap.delete(tailwindConfigHash)
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-05-27 18:29:07 +02:00
|
|
|
for (let disposable of oldContext.disposables.splice(0)) {
|
|
|
|
|
disposable(oldContext)
|
|
|
|
|
}
|
2021-05-19 11:46:50 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
env.DEBUG && console.log('Setting up new context...')
|
|
|
|
|
|
2021-09-28 12:00:27 +02:00
|
|
|
let context = createContext(tailwindConfig, [], root)
|
2021-05-19 11:46:50 -04:00
|
|
|
|
2021-05-27 18:29:07 +02:00
|
|
|
trackModified([...contextDependencies], getFileModifiedMap(context))
|
2021-05-26 18:20:31 +02:00
|
|
|
|
2021-05-19 11:46:50 -04:00
|
|
|
// ---
|
|
|
|
|
|
|
|
|
|
// Update all context tracking state
|
|
|
|
|
|
|
|
|
|
configContextMap.set(tailwindConfigHash, context)
|
|
|
|
|
contextMap.set(sourcePath, context)
|
|
|
|
|
|
|
|
|
|
if (!contextSourcesMap.has(context)) {
|
|
|
|
|
contextSourcesMap.set(context, new Set())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
contextSourcesMap.get(context).add(sourcePath)
|
|
|
|
|
|
|
|
|
|
return [context, true]
|
|
|
|
|
}
|