tailwindcss/src/util/pluginUtils.js

281 lines
6.8 KiB
JavaScript
Raw Normal View History

import selectorParser from 'postcss-selector-parser'
import escapeCommas from './escapeCommas'
import { withAlphaValue } from './withAlphaVariable'
import isKeyframeRule from './isKeyframeRule'
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
import {
normalize,
length,
number,
percentage,
url,
color as validateColor,
genericName,
familyName,
image,
absoluteSize,
relativeSize,
position,
lineWidth,
} from './dataTypes'
2021-06-04 10:32:49 -04:00
export function applyPseudoToMarker(selector, marker, state, join) {
let states = [state]
let markerIdx = selector.indexOf(marker + ':')
if (markerIdx !== -1) {
let existingMarker = selector.slice(markerIdx, selector.indexOf(' ', markerIdx))
states = states.concat(
selector.slice(markerIdx + marker.length + 1, existingMarker.length).split(':')
)
selector = selector.replace(existingMarker, '')
}
return join(`${[marker, ...states].join(':')}`, selector)
}
export function updateAllClasses(selectors, updateClass) {
let parser = selectorParser((selectors) => {
selectors.walkClasses((sel) => {
let updatedClass = updateClass(sel.value, {
withPseudo(className, pseudo) {
sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `${pseudo}` }))
return className
},
})
sel.value = updatedClass
if (sel.raws && sel.raws.value) {
sel.raws.value = escapeCommas(sel.raws.value)
}
})
})
let result = parser.processSync(selectors)
return result
}
export function updateLastClasses(selectors, updateClass) {
let parser = selectorParser((selectors) => {
selectors.each((sel) => {
let lastClass = sel.filter(({ type }) => type === 'class').pop()
if (lastClass === undefined) {
return
}
let updatedClass = updateClass(lastClass.value, {
withPseudo(className, pseudo) {
lastClass.parent.insertAfter(lastClass, selectorParser.pseudo({ value: `${pseudo}` }))
return className
},
})
lastClass.value = updatedClass
if (lastClass.raws && lastClass.raws.value) {
lastClass.raws.value = escapeCommas(lastClass.raws.value)
}
})
})
let result = parser.processSync(selectors)
return result
}
function splitByNotEscapedCommas(str) {
let chunks = []
let currentChunk = ''
for (let i = 0; i < str.length; i++) {
if (str[i] === ',' && str[i - 1] !== '\\') {
chunks.push(currentChunk)
currentChunk = ''
} else {
currentChunk += str[i]
}
}
chunks.push(currentChunk)
return chunks
}
export function transformAllSelectors(transformSelector, { wrap, withRule } = {}) {
return ({ container }) => {
container.walkRules((rule) => {
if (isKeyframeRule(rule)) {
return rule
}
let transformed = splitByNotEscapedCommas(rule.selector).map(transformSelector).join(',')
rule.selector = transformed
if (withRule) {
withRule(rule)
}
return rule
})
if (wrap) {
let wrapper = wrap()
let nodes = container.nodes
container.removeAll()
wrapper.append(nodes)
container.append(wrapper)
}
}
}
export function transformAllClasses(transformClass, { wrap, withRule } = {}) {
return ({ container }) => {
container.walkRules((rule) => {
let selector = rule.selector
let variantSelector = updateAllClasses(selector, transformClass)
rule.selector = variantSelector
if (withRule) {
withRule(rule)
}
return rule
})
if (wrap) {
let wrapper = wrap()
let nodes = container.nodes
container.removeAll()
wrapper.append(nodes)
container.append(wrapper)
}
}
}
export function transformLastClasses(transformClass, { wrap, withRule } = {}) {
return ({ container }) => {
container.walkRules((rule) => {
let selector = rule.selector
let variantSelector = updateLastClasses(selector, transformClass)
rule.selector = variantSelector
if (withRule) {
withRule(rule)
}
return rule
})
if (wrap) {
let wrapper = wrap()
let nodes = container.nodes
container.removeAll()
wrapper.append(nodes)
container.append(wrapper)
}
}
}
export function asValue(modifier, lookup = {}, { validate = () => true } = {}) {
let value = lookup[modifier]
if (value !== undefined) {
return value
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
if (!isArbitraryValue(modifier)) {
return undefined
}
value = modifier.slice(1, -1)
if (!validate(value)) {
return undefined
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
return normalize(value)
}
function isArbitraryValue(input) {
return input.startsWith('[') && input.endsWith(']')
}
function splitAlpha(modifier) {
let slashIdx = modifier.lastIndexOf('/')
if (slashIdx === -1 || slashIdx === modifier.length - 1) {
return [modifier]
}
return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
}
export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
if (lookup[modifier] !== undefined) {
return lookup[modifier]
}
let [color, alpha] = splitAlpha(modifier)
if (lookup[color] !== undefined) {
if (isArbitraryValue(alpha)) {
return withAlphaValue(lookup[color], alpha.slice(1, -1))
}
if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
return undefined
}
return withAlphaValue(lookup[color], tailwindConfig.theme.opacity[alpha])
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
return asValue(modifier, lookup, { validate: validateColor })
}
export function asLookupValue(modifier, lookup = {}) {
return lookup[modifier]
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
function guess(validate) {
return (modifier, lookup) => {
return asValue(modifier, lookup, { validate })
}
}
let typeMap = {
any: asValue,
color: asColor,
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
url: guess(url),
image: guess(image),
length: guess(length),
percentage: guess(percentage),
position: guess(position),
lookup: asLookupValue,
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
'generic-name': guess(genericName),
'family-name': guess(familyName),
number: guess(number),
'line-width': guess(lineWidth),
'absolute-size': guess(absoluteSize),
'relative-size': guess(relativeSize),
}
let supportedTypes = Object.keys(typeMap)
function splitAtFirst(input, delim) {
let idx = input.indexOf(delim)
if (idx === -1) return [undefined, input]
return [input.slice(0, idx), input.slice(idx + 1)]
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
export function coerceValue(types, modifier, values, tailwindConfig) {
if (isArbitraryValue(modifier)) {
let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':')
if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
return []
}
if (value.length > 0 && supportedTypes.includes(explicitType)) {
return [asValue(`[${value}]`, values, tailwindConfig), explicitType]
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
// Find first matching type
for (let type of [].concat(types)) {
let result = typeMap[type](modifier, values, tailwindConfig)
if (result) return [result, type]
}
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
return []
}