diff --git a/src/corePlugins/padding.js b/src/corePlugins/padding.js index 2b1e7e1..cf2a78e 100644 --- a/src/corePlugins/padding.js +++ b/src/corePlugins/padding.js @@ -1,6 +1,16 @@ const { asValue, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ matchUtilities, matchWildcards, jit: { theme } }) { + matchWildcards({ + p: Object.keys(theme['padding']), + px: Object.keys(theme['padding']), + py: Object.keys(theme['padding']), + pt: Object.keys(theme['padding']), + pr: Object.keys(theme['padding']), + pb: Object.keys(theme['padding']), + pl: Object.keys(theme['padding']), + }) + matchUtilities({ p: (modifier, { theme }) => { let value = asValue(modifier, theme['padding']) diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 046be38..f543786 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -173,6 +173,7 @@ function* resolveMatchedPlugins(classCandidate, context) { yield [context.candidateRuleMap.get(classCandidate), 'DEFAULT'] } + let wildcards = /^\{\*\}$/g let candidatePrefix = classCandidate let negative = false @@ -184,8 +185,19 @@ function* resolveMatchedPlugins(classCandidate, context) { } for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) { + let modifiers = [modifier] + if (context.candidateRuleMap.has(prefix)) { - yield [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier] + let rules = context.candidateRuleMap.get(prefix) + + if (wildcards.test(modifier) && context.wildcardModifierList.has(prefix)) { + modifiers = context.wildcardModifierList.get(prefix) + } + + for (const modifier of modifiers) { + yield [rules, negative ? `-${modifier}` : modifier] + } + return } } diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js index 49a354d..c30f253 100644 --- a/src/lib/setupContext.js +++ b/src/lib/setupContext.js @@ -516,6 +516,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs context.candidateRuleMap.get(prefixedIdentifier).push(...withOffsets) } }, + + matchWildcards: function (modifierMap) { + for (const [prefix, modifiers] of Object.entries(modifierMap)) { + context.wildcardModifierList.set(prefix, modifiers) + } + }, + matchUtilities: function (utilities, options) { let defaultOptions = { variants: [], @@ -773,6 +780,7 @@ function setupContext(configOrPath) { variantMap: new Map(), stylesheetCache: null, fileModifiedMap: new Map(), + wildcardModifierList: new Map(), } // --- diff --git a/tests/wildcards.test.css b/tests/wildcards.test.css new file mode 100644 index 0000000..26c5470 --- /dev/null +++ b/tests/wildcards.test.css @@ -0,0 +1,108 @@ +.p-0 { + padding: 0px; +} +.p-1 { + padding: 0.25rem; +} +.p-2 { + padding: 0.5rem; +} +.p-3 { + padding: 0.75rem; +} +.p-4 { + padding: 1rem; +} +.p-5 { + padding: 1.25rem; +} +.p-6 { + padding: 1.5rem; +} +.p-7 { + padding: 1.75rem; +} +.p-8 { + padding: 2rem; +} +.p-9 { + padding: 2.25rem; +} +.p-10 { + padding: 2.5rem; +} +.p-11 { + padding: 2.75rem; +} +.p-12 { + padding: 3rem; +} +.p-14 { + padding: 3.5rem; +} +.p-16 { + padding: 4rem; +} +.p-20 { + padding: 5rem; +} +.p-24 { + padding: 6rem; +} +.p-28 { + padding: 7rem; +} +.p-32 { + padding: 8rem; +} +.p-36 { + padding: 9rem; +} +.p-40 { + padding: 10rem; +} +.p-44 { + padding: 11rem; +} +.p-48 { + padding: 12rem; +} +.p-52 { + padding: 13rem; +} +.p-56 { + padding: 14rem; +} +.p-60 { + padding: 15rem; +} +.p-64 { + padding: 16rem; +} +.p-72 { + padding: 18rem; +} +.p-80 { + padding: 20rem; +} +.p-96 { + padding: 24rem; +} +.p-px { + padding: 1px; +} +.p-0\.5 { + padding: 0.125rem; +} +.p-1\.5 { + padding: 0.375rem; +} +.p-2\.5 { + padding: 0.625rem; +} +.p-3\.5 { + padding: 0.875rem; +} +.p-4 { + padding: 1rem; +} diff --git a/tests/wildcards.test.html b/tests/wildcards.test.html new file mode 100644 index 0000000..152f24d --- /dev/null +++ b/tests/wildcards.test.html @@ -0,0 +1,14 @@ + + + + + + + Title + + + +
+
+ + diff --git a/tests/wildcards.test.js b/tests/wildcards.test.js new file mode 100644 index 0000000..33f9bb2 --- /dev/null +++ b/tests/wildcards.test.js @@ -0,0 +1,29 @@ +const postcss = require('postcss') +const tailwind = require('../src/index.js') +const fs = require('fs') +const path = require('path') + +function run(input, config = {}) { + return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) +} + +test('wildcards', () => { + let config = { + darkMode: 'class', + purge: [path.resolve(__dirname, './wildcards.test.html')], + corePlugins: { preflight: false }, + theme: {}, + plugins: [], + } + + let css = ` + @tailwind utilities; + ` + + return run(css, config).then((result) => { + let expectedPath = path.resolve(__dirname, './wildcards.test.css') + let expected = fs.readFileSync(expectedPath, 'utf8') + + expect(result.css).toMatchCss(expected) + }) +})