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

Commit ba366ad

Browse files
thecrypticacethecrypticace
committed
Add support for wildcards
We can now support class tokens like p-{*} to include all p- utilities classes automatically. This requires explicit plugin support because we don’t know what theme config goes with what plugin. Only the plugin does.
1 parent 94a88e6 commit ba366ad

File tree

6 files changed

+175
-1
lines changed

6 files changed

+175
-1
lines changed

‎src/corePlugins/padding.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
const { asValue, nameClass } = require('../pluginUtils')
22

3-
module.exports = function ({ matchUtilities, jit: { theme } }) {
3+
module.exports = function ({ matchUtilities, matchWildcards, jit: { theme } }) {
4+
matchWildcards({
5+
p: Object.keys(theme['padding']),
6+
px: Object.keys(theme['padding']),
7+
py: Object.keys(theme['padding']),
8+
pt: Object.keys(theme['padding']),
9+
pr: Object.keys(theme['padding']),
10+
pb: Object.keys(theme['padding']),
11+
pl: Object.keys(theme['padding']),
12+
})
13+
414
matchUtilities({
515
p: (modifier, { theme }) => {
616
let value = asValue(modifier, theme['padding'])

‎src/lib/generateRules.js

+5
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ function* resolveMatchedPlugins(classCandidate, context) {
173173
yield [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
174174
}
175175

176+
let wildcards = /^\{\*\}$/g
176177
let candidatePrefix = classCandidate
177178
let negative = false
178179

@@ -189,6 +190,10 @@ function* resolveMatchedPlugins(classCandidate, context) {
189190
if (context.candidateRuleMap.has(prefix)) {
190191
let rules = context.candidateRuleMap.get(prefix)
191192

193+
if (wildcards.test(modifier) && context.wildcardModifierList.has(prefix)) {
194+
modifiers = context.wildcardModifierList.get(prefix)
195+
}
196+
192197
for (const modifier of modifiers) {
193198
yield [rules, negative ? `-${modifier}` : modifier]
194199
}

‎src/lib/setupContext.js

+8
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
516516
context.candidateRuleMap.get(prefixedIdentifier).push(...withOffsets)
517517
}
518518
},
519+
520+
matchWildcards: function (modifierMap) {
521+
for (const [prefix, modifiers] of Object.entries(modifierMap)) {
522+
context.wildcardModifierList.set(prefix, modifiers)
523+
}
524+
},
525+
519526
matchUtilities: function (utilities, options) {
520527
let defaultOptions = {
521528
variants: [],
@@ -773,6 +780,7 @@ function setupContext(configOrPath) {
773780
variantMap: new Map(),
774781
stylesheetCache: null,
775782
fileModifiedMap: new Map(),
783+
wildcardModifierList: new Map(),
776784
}
777785

778786
// ---

‎tests/wildcards.test.css

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.p-0 {
2+
padding: 0px;
3+
}
4+
.p-1 {
5+
padding: 0.25rem;
6+
}
7+
.p-2 {
8+
padding: 0.5rem;
9+
}
10+
.p-3 {
11+
padding: 0.75rem;
12+
}
13+
.p-4 {
14+
padding: 1rem;
15+
}
16+
.p-5 {
17+
padding: 1.25rem;
18+
}
19+
.p-6 {
20+
padding: 1.5rem;
21+
}
22+
.p-7 {
23+
padding: 1.75rem;
24+
}
25+
.p-8 {
26+
padding: 2rem;
27+
}
28+
.p-9 {
29+
padding: 2.25rem;
30+
}
31+
.p-10 {
32+
padding: 2.5rem;
33+
}
34+
.p-11 {
35+
padding: 2.75rem;
36+
}
37+
.p-12 {
38+
padding: 3rem;
39+
}
40+
.p-14 {
41+
padding: 3.5rem;
42+
}
43+
.p-16 {
44+
padding: 4rem;
45+
}
46+
.p-20 {
47+
padding: 5rem;
48+
}
49+
.p-24 {
50+
padding: 6rem;
51+
}
52+
.p-28 {
53+
padding: 7rem;
54+
}
55+
.p-32 {
56+
padding: 8rem;
57+
}
58+
.p-36 {
59+
padding: 9rem;
60+
}
61+
.p-40 {
62+
padding: 10rem;
63+
}
64+
.p-44 {
65+
padding: 11rem;
66+
}
67+
.p-48 {
68+
padding: 12rem;
69+
}
70+
.p-52 {
71+
padding: 13rem;
72+
}
73+
.p-56 {
74+
padding: 14rem;
75+
}
76+
.p-60 {
77+
padding: 15rem;
78+
}
79+
.p-64 {
80+
padding: 16rem;
81+
}
82+
.p-72 {
83+
padding: 18rem;
84+
}
85+
.p-80 {
86+
padding: 20rem;
87+
}
88+
.p-96 {
89+
padding: 24rem;
90+
}
91+
.p-px {
92+
padding: 1px;
93+
}
94+
.p-0\.5 {
95+
padding: 0.125rem;
96+
}
97+
.p-1\.5 {
98+
padding: 0.375rem;
99+
}
100+
.p-2\.5 {
101+
padding: 0.625rem;
102+
}
103+
.p-3\.5 {
104+
padding: 0.875rem;
105+
}
106+
.p-4 {
107+
padding: 1rem;
108+
}

‎tests/wildcards.test.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Title</title>
8+
<link rel="stylesheet" href="./tailwind.css" />
9+
</head>
10+
<body>
11+
<div class="p-{*}"></div>
12+
<div class="p-4"></div>
13+
</body>
14+
</html>

‎tests/wildcards.test.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const postcss = require('postcss')
2+
const tailwind = require('../src/index.js')
3+
const fs = require('fs')
4+
const path = require('path')
5+
6+
function run(input, config = {}) {
7+
return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
8+
}
9+
10+
test('wildcards', () => {
11+
let config = {
12+
darkMode: 'class',
13+
purge: [path.resolve(__dirname, './wildcards.test.html')],
14+
corePlugins: { preflight: false },
15+
theme: {},
16+
plugins: [],
17+
}
18+
19+
let css = `
20+
@tailwind utilities;
21+
`
22+
23+
return run(css, config).then((result) => {
24+
let expectedPath = path.resolve(__dirname, './wildcards.test.css')
25+
let expected = fs.readFileSync(expectedPath, 'utf8')
26+
27+
expect(result.css).toMatchCss(expected)
28+
})
29+
})

0 commit comments

Comments
 (0)