wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

MAKE IT WORK

Browse source
This commit is contained in:
Adam Wathan 2021-06-30 17:08:53 -04:00
parent b540c4bdeb
commit 6756a82a67
3 changed files with 17 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/jit/lib/optimizeUniversalRules.js
View file

@ -45,21 +45,19 @@ export default function collapseAdjacentRules() {
for (let universal of universals) {
let selectors = new Set()
let rule = postcss.rule()
let universalRule = postcss.rule()
universal.walkDecls((decl) => {
let variable = decl.prop
let rules = variableNodeMap.get(universal.params)
for (let node of variableNodeMap.get(variable) ?? []) {
for (let selector of extractElementSelector(node.selector)) {
selectors.add(selector)
}
for (let rule of rules) {
for (let selector of extractElementSelector(rule.selector)) {
selectors.add(selector)
}
})
}
rule.selectors = [...selectors]
rule.append(universal.clone().nodes)
universal.before(rule)
universalRule.selectors = [...selectors]
universalRule.append(universal.nodes)
universal.before(universalRule)
universal.remove()
}
}

2
src/jit/processTailwindFeatures.js
View file

@ -46,9 +46,7 @@ export default function processTailwindFeatures(setupContext) {
expandApplyAtRules(context)(root, result)
evaluateTailwindFunctions(context)(root, result)
substituteScreenAtRules(context)(root, result)
console.time('Optimizer')
optimizeUniversalRules(context)(root, result)
console.timeEnd('Optimizer')
collapseAdjacentRules(context)(root, result)
}
}

16
tests/jit/optimize-universal-selectors.test.js
View file

@ -492,12 +492,12 @@ test('with shadows', async () => {
mode: 'jit',
purge: [
{
raw: '<div class="shadow md:shadow-xl ring-1 ring-black/25 transform"></div>',
raw: '<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>',
},
],
theme: {},
plugins: [],
corePlugins: ['boxShadow', 'ringColor', 'ringWidth', 'transform'],
corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
}
let css = `
@ -508,6 +508,12 @@ test('with shadows', async () => {
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.shadow,
.md\\:shadow-xl {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
.ring-1 {
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
@ -517,12 +523,6 @@ test('with shadows', async () => {
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
.shadow,
.md\\:shadow-xl {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
/* --- */
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);