Skip to content

Commit

Permalink
implement parallel variants
Browse files Browse the repository at this point in the history
  • Loading branch information
RobinMalfait committed May 27, 2021
1 parent 7ae608a commit b0128bf
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 40 deletions.
28 changes: 20 additions & 8 deletions src/jit/corePlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,35 @@ export default {
})
)

addVariant(
'marker',
addVariant('marker', [
transformAllSelectors((selector) => {
let variantSelector = updateAllClasses(selector, (className) => {
return `marker${config('separator')}${className}`
})

return `${variantSelector} *::marker`
}),
transformAllSelectors((selector) => {
return updateAllClasses(selector, (className, { withPseudo }) => {
return withPseudo(`marker${config('separator')}${className}`, '::marker')
})
})
)
}),
])

addVariant(
'selection',
addVariant('selection', [
transformAllSelectors((selector) => {
let variantSelector = updateAllClasses(selector, (className) => {
return `selection${config('separator')}${className}`
})

return `${variantSelector} *::selection`
}),
transformAllSelectors((selector) => {
return updateAllClasses(selector, (className, { withPseudo }) => {
return withPseudo(`selection${config('separator')}${className}`, '::selection')
})
})
)
}),
])

addVariant(
'before',
Expand Down
53 changes: 28 additions & 25 deletions src/jit/lib/generateRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ function applyVariant(variant, matches, context) {
}

if (context.variantMap.has(variant)) {
let [variantSort, applyThisVariant] = context.variantMap.get(variant)
let variantFunctionTuples = context.variantMap.get(variant)
let result = []

for (let [{ sort, layer, options }, rule] of matches) {
Expand All @@ -112,36 +112,39 @@ function applyVariant(variant, matches, context) {
let container = postcss.root()
container.append(rule.clone())

function modifySelectors(modifierFunction) {
container.each((rule) => {
if (rule.type !== 'rule') {
return
}

rule.selectors = rule.selectors.map((selector) => {
return modifierFunction({
get className() {
return getClassNameFromSelector(selector)
},
selector,
for (let [variantSort, variantFunction] of variantFunctionTuples) {
let clone = container.clone()
function modifySelectors(modifierFunction) {
clone.each((rule) => {
if (rule.type !== 'rule') {
return
}

rule.selectors = rule.selectors.map((selector) => {
return modifierFunction({
get className() {
return getClassNameFromSelector(selector)
},
selector,
})
})
})
return clone
}

let ruleWithVariant = variantFunction({
container: clone,
separator: context.tailwindConfig.separator,
modifySelectors,
})
return container
}

let ruleWithVariant = applyThisVariant({
container,
separator: context.tailwindConfig.separator,
modifySelectors,
})
if (ruleWithVariant === null) {
continue
}

if (ruleWithVariant === null) {
continue
let withOffset = [{ sort: variantSort | sort, layer, options }, clone.nodes[0]]
result.push(withOffset)
}

let withOffset = [{ sort: variantSort | sort, layer, options }, container.nodes[0]]
result.push(withOffset)
}

return result
Expand Down
28 changes: 21 additions & 7 deletions src/jit/lib/setupContextUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import isPlainObject from '../../util/isPlainObject'
import escapeClassName from '../../util/escapeClassName'
import nameClass from '../../util/nameClass'
import { coerceValue } from '../../util/pluginUtils'
import bigSign from '../../util/bigSign'
import corePlugins from '../corePlugins'
import * as sharedState from './sharedState'
import { env } from './sharedState'
Expand Down Expand Up @@ -152,9 +153,11 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
}

return {
addVariant(variantName, applyThisVariant, options = {}) {
addVariant(variantName, variantFunctions, options = {}) {
variantFunctions = [].concat(variantFunctions)

insertInto(variantList, variantName, options)
variantMap.set(variantName, applyThisVariant)
variantMap.set(variantName, variantFunctions)
},
postcss,
prefix: applyConfiguredPrefix,
Expand Down Expand Up @@ -445,17 +448,28 @@ function registerPlugins(plugins, context) {
}

reservedBits += 3n
context.variantOrder = variantList.reduce(
(map, variant, i) => map.set(variant, (1n << BigInt(i)) << reservedBits),
new Map()

let offset = 0
context.variantOrder = new Map(
variantList
.map((variant, i) => {
let variantFunctions = variantMap.get(variant).length
let bits = (1n << BigInt(i + offset)) << reservedBits
offset += variantFunctions - 1
return [variant, bits]
})
.sort(([, a], [, z]) => bigSign(a - z))
)

context.minimumScreen = [...context.variantOrder.values()].shift()

// Build variantMap
for (let [variantName, variantFunction] of variantMap.entries()) {
for (let [variantName, variantFunctions] of variantMap.entries()) {
let sort = context.variantOrder.get(variantName)
context.variantMap.set(variantName, [sort, variantFunction])
context.variantMap.set(
variantName,
variantFunctions.map((variantFunction, idx) => [sort << BigInt(idx), variantFunction])
)
}
}

Expand Down
16 changes: 16 additions & 0 deletions tests/jit/variants.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@
.first-line\:underline::first-line {
text-decoration: underline;
}
.marker\:text-lg *::marker {
font-size: 1.125rem;
line-height: 1.75rem;
}
.marker\:text-red-500 *::marker {
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
}
.marker\:text-lg::marker {
font-size: 1.125rem;
line-height: 1.75rem;
Expand All @@ -36,6 +44,14 @@
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
}
.selection\:bg-blue-500 *::selection {
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}
.selection\:text-white *::selection {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.selection\:bg-blue-500::selection {
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
Expand Down

0 comments on commit b0128bf

Please sign in to comment.