Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit eea2e26

Browse files
committed
Don't apply !important to direct children of at-rules or in keyframes
1 parent 14852fc commit eea2e26

7 files changed

+51
-7
lines changed

src/lib/collapseAdjacentRules.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
let comparisonMap = {
2-
atrule: 'params',
3-
rule: 'selector',
2+
atrule: ['name', 'params'],
3+
rule: ['selector'],
44
}
55
let types = new Set(Object.keys(comparisonMap))
66

@@ -18,11 +18,11 @@ function collapseAdjacentRules(context) {
1818
return
1919
}
2020

21-
let property = comparisonMap[node.type]
21+
let properties = comparisonMap[node.type]
2222

2323
if (node.type === 'atrule' && node.name === 'font-face') {
2424
currentRule = node
25-
} else if (node[property] === currentRule[property]) {
25+
} else if (properties.every((property) => node[property] === currentRule[property])) {
2626
currentRule.append(node.nodes)
2727
node.remove()
2828
} else {

src/lib/generateRules.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,20 @@ function* resolveMatches(candidate, context) {
213213
}
214214
}
215215

216+
function inKeyframes(d) {
217+
return (
218+
d.parent.parent && d.parent.parent.type === 'atrule' && d.parent.parent.name === 'keyframes'
219+
)
220+
}
221+
222+
function makeImportant(rule) {
223+
rule.walkDecls((d) => {
224+
if (d.parent.type === 'rule' && !inKeyframes(d)) {
225+
d.important = true
226+
}
227+
})
228+
}
229+
216230
function generateRules(candidates, context) {
217231
let allRules = []
218232

@@ -239,9 +253,7 @@ function generateRules(candidates, context) {
239253

240254
return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
241255
if (context.tailwindConfig.important === true && options.respectImportant) {
242-
rule.walkDecls((d) => {
243-
d.important = true
244-
})
256+
makeImportant(rule)
245257
}
246258
return [sort | context.layerOrder[layer], rule]
247259
})

tests/04-important-boolean.test.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,26 @@
3838
.btn {
3939
button: yes !important;
4040
}
41+
@font-face {
42+
font-family: Inter;
43+
}
44+
@page {
45+
margin: 1cm;
46+
}
4147
.custom-component {
4248
font-weight: 700;
4349
}
4450
.custom-important-component {
4551
text-align: center !important;
4652
}
53+
@keyframes spin {
54+
to {
55+
transform: rotate(360deg);
56+
}
57+
}
58+
.animate-spin {
59+
animation: spin 1s linear infinite !important;
60+
}
4761
.font-bold {
4862
font-weight: 700 !important;
4963
}

tests/04-important-boolean.test.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div class="container"></div>
22
<div class="btn"></div>
3+
<div class="animate-spin"></div>
34
<div class="custom-util"></div>
45
<div class="custom-component"></div>
56
<div class="custom-important-component"></div>

tests/04-important-boolean.test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,17 @@ test('important boolean', () => {
2424
},
2525
{ respectImportant: true }
2626
)
27+
addComponents(
28+
{
29+
'@font-face': {
30+
'font-family': 'Inter',
31+
},
32+
'@page': {
33+
margin: '1cm',
34+
},
35+
},
36+
{ respectImportant: true }
37+
)
2738
addUtilities(
2839
{
2940
'.custom-util': {

tests/09-collapse-adjacent-rules.test.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
font-family: 'Gilroy';
2525
src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
2626
}
27+
@page {
28+
margin: 1cm;
29+
}
2730
.font-bold {
2831
font-weight: 700;
2932
}

tests/09-collapse-adjacent-rules.test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ test('collapse adjacent rules', () => {
2727
src: url("/fonts/Gilroy.woff2") format("woff2"),
2828
url("/fonts/Gilroy.woff") format("woff");
2929
}
30+
@page {
31+
margin: 1cm;
32+
}
3033
@tailwind components;
3134
@tailwind utilities;
3235
@layer base {

0 commit comments

Comments
 (0)