diff --git a/src/corePlugins.js b/src/corePlugins.js index f1ad4a823d24..553297a3979b 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -21,7 +21,26 @@ export let variantPlugins = { addVariant('first-letter', '&::first-letter') addVariant('first-line', '&::first-line') - addVariant('marker', ['& *::marker', '&::marker']) + addVariant('marker', ({ container }) => { + let toRemove = ['--tw-text-opacity'] + + container.walkDecls((decl) => { + if (toRemove.includes(decl.prop)) { + decl.remove() + + return + } + + for (const varName of toRemove) { + if (decl.value.includes(`/ var(${varName})`)) { + decl.value = decl.value.replace(`/ var(${varName})`, '') + } + } + }) + + return ['& *::marker', '&::marker'] + }) + addVariant('selection', ['& *::selection', '&::selection']) addVariant('file', '&::file-selector-button') diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index aba688a01ac2..9b8500bef662 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -163,8 +163,8 @@ function applyVariant(variant, matches, context) { let container = postcss.root({ nodes: [rule.clone()] }) - for (let [variantSort, variantFunction] of variantFunctionTuples) { - let clone = container.clone() + for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) { + let clone = containerFromArray ?? container.clone() let collectedFormats = [] function prepareBackup() { @@ -233,6 +233,10 @@ function applyVariant(variant, matches, context) { // reserving additional X places for these 'unknown' variants in between. variantSort | BigInt(idx << ruleWithVariant.length), variantFunction, + + // If the clone has been modified we have to pass that back + // though so each rule can use the modified container + clone.clone(), ]) } continue diff --git a/tests/variants.test.css b/tests/variants.test.css index 535ffa23177e..293ff24a4b22 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -111,17 +111,15 @@ font-size: 1.125rem; line-height: 1.75rem; } -.marker\:text-red-500 *::marker { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); -} .marker\:text-lg::marker { font-size: 1.125rem; line-height: 1.75rem; } +.marker\:text-red-500 *::marker { + color: rgb(239 68 68); +} .marker\:text-red-500::marker { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68); } .selection\:bg-blue-500 *::selection { --tw-bg-opacity: 1;