archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

hoist selectorParser setup code

Browse Source 
No need to re-create the selectorParser in every call.
This commit is contained in:
Robin Malfait 2020-08-16 16:54:35 +02:00 committed by Adam Wathan
parent fab4d7b8f6
commit 8ae2a32a0c
1 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/lib/substituteVariantsAtRules.js
View File

@ -6,14 +6,14 @@ import prefixSelector from '../util/prefixSelector'
function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
return generateVariantFunction(({ modifySelectors, separator }) => {
return modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `${selectorPrefix}${separator}${sel.value}`
sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoClass}` }))
})
}).processSync(selector)
const parser = selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `${selectorPrefix}${separator}${sel.value}`
sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoClass}` }))
})
})
return modifySelectors(({ selector }) => parser.processSync(selector))
})
}
@ -24,13 +24,12 @@ function ensureIncludesDefault(variants) {
const defaultVariantGenerators = config => ({
default: generateVariantFunction(() => {}),
'motion-safe': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-safe${separator}${sel.value}`
})
}).processSync(selector)
const parser = selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-safe${separator}${sel.value}`
})
})
const modified = modifySelectors(({ selector }) => parser.processSync(selector))
const mediaQuery = postcss.atRule({
name: 'media',
params: '(prefers-reduced-motion: no-preference)',
@ -39,42 +38,42 @@ const defaultVariantGenerators = config => ({
container.append(mediaQuery)
}),
'motion-reduce': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-reduce${separator}${sel.value}`
})
}).processSync(selector)
const parser = selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-reduce${separator}${sel.value}`
})
})
const modified = modifySelectors(({ selector }) => parser.processSync(selector))
const mediaQuery = postcss.atRule({
name: 'media',
params: '(prefers-reduced-motion: reduce)',
})
const mediaQuery = postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
mediaQuery.append(modified)
container.append(mediaQuery)
}),
'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
return modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `group-hover${separator}${sel.value}`
sel.parent.insertBefore(
sel,
selectorParser().astSync(prefixSelector(config.prefix, '.group:hover '))
)
})
}).processSync(selector)
const parser = selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `group-hover${separator}${sel.value}`
sel.parent.insertBefore(
sel,
selectorParser().astSync(prefixSelector(config.prefix, '.group:hover '))
)
})
})
return modifySelectors(({ selector }) => parser.processSync(selector))
}),
'group-focus': generateVariantFunction(({ modifySelectors, separator }) => {
return modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `group-focus${separator}${sel.value}`
sel.parent.insertBefore(
sel,
selectorParser().astSync(prefixSelector(config.prefix, '.group:focus '))
)
})
}).processSync(selector)
const parser = selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `group-focus${separator}${sel.value}`
sel.parent.insertBefore(
sel,
selectorParser().astSync(prefixSelector(config.prefix, '.group:focus '))
)
})
})
return modifySelectors(({ selector }) => parser.processSync(selector))
}),
hover: generatePseudoClassVariant('hover'),
'focus-within': generatePseudoClassVariant('focus-within'),