Skip to content

Commit

Permalink
Remove text color variable from marker pseudo class
Browse files Browse the repository at this point in the history
  • Loading branch information
thecrypticace committed Jun 13, 2022
1 parent 52e785a commit 1c29ae8
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 9 deletions.
21 changes: 20 additions & 1 deletion src/corePlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
8 changes: 6 additions & 2 deletions src/lib/generateRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand Down
10 changes: 4 additions & 6 deletions tests/variants.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 1c29ae8

Please sign in to comment.