Skip to content

Commit 762564e

Browse files
committed
Fix applying utilities that depend on special resets
1 parent 00197fc commit 762564e

File tree

7 files changed

+64
-23
lines changed

7 files changed

+64
-23
lines changed

src/corePlugins/boxShadow.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ let shadowReset = {
88
},
99
}
1010

11-
module.exports = function ({ matchUtilities, jit: { theme } }) {
11+
module.exports = function ({ addBase, matchUtilities, jit: { theme } }) {
12+
addBase(shadowReset)
1213
matchUtilities({
1314
shadow: (modifier, { theme }) => {
1415
modifier = modifier === '' ? 'DEFAULT' : modifier
1516

1617
let value = transformValue(theme.boxShadow[modifier])
1718

18-
if (modifier === '' || value === undefined) {
19+
if (value === undefined) {
1920
return []
2021
}
2122

2223
return [
23-
[shadowReset, { respectVariants: false }],
2424
{
2525
[nameClass('shadow', modifier)]: {
2626
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,

src/corePlugins/ringWidth.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function safeCall(callback, defaultValue) {
1212
}
1313
}
1414

15-
module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
15+
module.exports = function ({ addBase, matchUtilities, addUtilities, jit: { theme } }) {
1616
let ringColorDefault = (([r, g, b]) => {
1717
return `rgba(${r}, ${g}, ${b}, ${dlv(theme, ['ringOpacity', 'DEFAULT'], '0.5')})`
1818
})(safeCall(() => toRgba(dlv(theme, ['ringColor', 'DEFAULT'])), ['147', '197', '253']))
@@ -28,6 +28,8 @@ module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
2828
},
2929
}
3030

31+
addBase(ringReset)
32+
3133
matchUtilities({
3234
ring: (modifier, { theme }) => {
3335
let value = asLength(modifier, theme['ringWidth'])
@@ -37,12 +39,6 @@ module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
3739
}
3840

3941
return [
40-
[
41-
ringReset,
42-
{
43-
respectVariants: false,
44-
},
45-
],
4642
{
4743
[nameClass('ring', modifier)]: {
4844
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,

src/lib/expandApplyAtRules.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,20 @@ function expandApplyAtRules(context) {
7979
* Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
8080
*/
8181
// TODO: Should we use postcss-selector-parser for this instead?
82-
function replaceSelector(selector, utilitySelector, candidate) {
82+
function replaceSelector(selector, utilitySelectors, candidate) {
8383
return selector
8484
.split(/\s*,\s*/g)
85-
.map((s) => utilitySelector.replace(`.${escape(candidate)}`, s))
85+
.map((s) => {
86+
let replaced = []
87+
for (let utilitySelector of utilitySelectors.split(/\s*,\s*/g)) {
88+
let replacedSelector = utilitySelector.replace(`.${escape(candidate)}`, s)
89+
if (replacedSelector === utilitySelector) {
90+
continue
91+
}
92+
replaced.push(replacedSelector)
93+
}
94+
return replaced.join(', ')
95+
})
8696
.join(', ')
8797
}
8898

src/lib/setupContext.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,21 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
436436
context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule])
437437
}
438438
},
439+
matchBase: function (base) {
440+
let offset = offsets.base++
441+
442+
for (let identifier in base) {
443+
let value = [].concat(base[identifier])
444+
445+
let withOffsets = value.map((rule) => [{ sort: offset, layer: 'base' }, rule])
446+
447+
if (!context.candidateRuleMap.has(identifier)) {
448+
context.candidateRuleMap.set(identifier, [])
449+
}
450+
451+
context.candidateRuleMap.get(identifier).push(...withOffsets)
452+
}
453+
},
439454
matchUtilities: function (utilities) {
440455
let offset = offsets.utilities++
441456

tests/01-sanity.test.css

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,15 @@
126126
}
127127
}
128128
}
129+
* {
130+
--tw-shadow: 0 0 #0000;
131+
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
132+
--tw-ring-offset-width: 0px;
133+
--tw-ring-offset-color: #fff;
134+
--tw-ring-color: rgba(59, 130, 246, 0.5);
135+
--tw-ring-offset-shadow: 0 0 #0000;
136+
--tw-ring-shadow: 0 0 #0000;
137+
}
129138
h1 {
130139
font-size: 1.5rem;
131140
font-weight: 700;
@@ -219,6 +228,24 @@ div {
219228
.aspect-h-4 {
220229
--tw-aspect-h: 4;
221230
}
231+
.test-apply-font-variant {
232+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
233+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
234+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
235+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
236+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
237+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
238+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
239+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
240+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
241+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
242+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
243+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
244+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
245+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
246+
--tw-numeric-spacing: tabular-nums;
247+
--tw-ordinal: ordinal;
248+
}
222249
.custom-component {
223250
background: #123456;
224251
}
@@ -267,9 +294,6 @@ div {
267294
.font-medium {
268295
font-weight: 500;
269296
}
270-
* {
271-
--tw-shadow: 0 0 #0000;
272-
}
273297
.shadow-sm {
274298
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
275299
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -280,14 +304,6 @@ div {
280304
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
281305
var(--tw-shadow);
282306
}
283-
* {
284-
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
285-
--tw-ring-offset-width: 0px;
286-
--tw-ring-offset-color: #fff;
287-
--tw-ring-color: rgba(59, 130, 246, 0.5);
288-
--tw-ring-offset-shadow: 0 0 #0000;
289-
--tw-ring-shadow: 0 0 #0000;
290-
}
291307
.filter-none {
292308
filter: none;
293309
}

tests/01-sanity.test.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
1414
></div>
1515
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
16+
<div class="test-apply-font-variant"></div>
1617
<div class="mt-6"></div>
1718
<div class="bg-black"></div>
1819
<div class="custom-util"></div>

tests/01-sanity.test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@ test('it works', () => {
7272
}
7373
}
7474
@layer components {
75+
.test-apply-font-variant {
76+
@apply ordinal tabular-nums;
77+
}
7578
.custom-component {
7679
background: #123456;
7780
}

0 commit comments

Comments
 (0)