Skip to content

Commit

Permalink
Feature flag generalized modifiers
Browse files Browse the repository at this point in the history
We’re putting a flag for modifiers in front of matchVariant and matchUtilities
  • Loading branch information
thecrypticace committed Oct 13, 2022
1 parent 895b672 commit c7cc38f
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 13 deletions.
1 change: 1 addition & 0 deletions src/featureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let featureFlags = {
],
experimental: [
'optimizeUniversalDefaults',
'generalizedModifiers',
// 'variantGrouping',
],
}
Expand Down
27 changes: 21 additions & 6 deletions src/lib/setupContextUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import isValidArbitraryValue from '../util/isValidArbitraryValue'
import { generateRules } from './generateRules'
import { hasContentChanged } from './cacheInvalidation.js'
import { Offsets } from './offsets.js'
import { flagEnabled } from '../featureFlags.js'

let MATCH_VARIANT = Symbol()

Expand Down Expand Up @@ -410,11 +411,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
}

return utilityModifier
}
},
}

let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')

let ruleSets = []
.concat(rule(value, extras))
.concat(modifiersEnabled ? rule(value, extras) : rule(value))
.filter(Boolean)
.map((declaration) => ({
[nameClass(identifier, modifier)]: declaration,
Expand Down Expand Up @@ -488,11 +491,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
}

return utilityModifier
}
},
}

let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')

let ruleSets = []
.concat(rule(value, extras))
.concat(modifiersEnabled ? rule(value, extras) : rule(value))
.filter(Boolean)
.map((declaration) => ({
[nameClass(identifier, modifier)]: declaration,
Expand Down Expand Up @@ -558,11 +563,17 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
let id = ++variantIdentifier // A unique identifier that "groups" these variables together.
let isSpecial = variant === '@'

let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')

for (let [key, value] of Object.entries(options?.values ?? {})) {
api.addVariant(
isSpecial ? `${variant}${key}` : `${variant}-${key}`,
Object.assign(
({ args, container }) => variantFn(value, { modifier: args.modifier, container }),
({ args, container }) =>
variantFn(
value,
modifiersEnabled ? { modifier: args.modifier, container } : { container }
),
{
[MATCH_VARIANT]: true,
}
Expand All @@ -574,7 +585,11 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
api.addVariant(
variant,
Object.assign(
({ args, container }) => variantFn(args.value, { modifier: args.modifier, container }),
({ args, container }) =>
variantFn(
args.value,
modifiersEnabled ? { modifier: args.modifier, container } : { container }
),
{
[MATCH_VARIANT]: true,
}
Expand Down
10 changes: 7 additions & 3 deletions src/util/pluginUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
} from './dataTypes'
import negateValue from './negateValue'
import { backgroundSize } from './validateFormalSyntax'
import { flagEnabled } from '../featureFlags.js'

export function updateAllClasses(selectors, updateClass) {
let parser = selectorParser((selectors) => {
Expand Down Expand Up @@ -230,9 +231,12 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
* @returns {Iterator<[value: string, type: string, modifier: string | null]>}
*/
export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
let canUseUtilityModifier = options.modifiers != null && (
options.modifiers === 'any' || typeof options.modifiers === 'object'
)
let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')

let canUseUtilityModifier =
modifiersEnabled &&
options.modifiers != null &&
(options.modifiers === 'any' || typeof options.modifiers === 'object')

let [modifier, utilityModifier] = canUseUtilityModifier
? splitUtilityModifier(rawModifier)
Expand Down
8 changes: 7 additions & 1 deletion tests/arbitrary-variants.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ test('variants without & or an at-rule are ignored', () => {

test('arbitrary variants are sorted after other variants', () => {
let config = {
content: [{ raw: html`<div class="underline lg:underline [&>*]:underline"></div>` }],
content: [{ raw: html`<div class="[&>*]:underline underline lg:underline"></div>` }],
corePlugins: { preflight: false },
}

Expand Down Expand Up @@ -709,6 +709,9 @@ it('should support supports', () => {

it('should be possible to use modifiers and arbitrary groups', () => {
let config = {
experimental: {
generalizedModifiers: true,
},
content: [
{
raw: html`
Expand Down Expand Up @@ -810,6 +813,9 @@ it('should be possible to use modifiers and arbitrary groups', () => {

it('should be possible to use modifiers and arbitrary peers', () => {
let config = {
experimental: {
generalizedModifiers: true,
},
content: [
{
raw: html`
Expand Down
19 changes: 16 additions & 3 deletions tests/match-utilities.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { run, html, css } from './util/run'

test('match utilities with modifiers', async () => {
let config = {
experimental: {
generalizedModifiers: true,
},

content: [
{
raw: html`<div class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]"></div> `,
Expand Down Expand Up @@ -62,6 +66,9 @@ test('match utilities with modifiers', async () => {

test('match utilities with modifiers in the config', async () => {
let config = {
experimental: {
generalizedModifiers: true,
},
content: [
{
raw: html`<div class="test test/foo test-1/foo test/[bar] test-1/[bar]"></div> `,
Expand Down Expand Up @@ -119,6 +126,9 @@ test('match utilities with modifiers in the config', async () => {

test('match utilities can omit utilities by returning null', async () => {
let config = {
experimental: {
generalizedModifiers: true,
},
content: [
{
raw: html`<div class="test test/good test/bad"></div> `,
Expand All @@ -130,9 +140,12 @@ test('match utilities can omit utilities by returning null', async () => {
({ matchUtilities, theme }) => {
matchUtilities(
{
test: (value, { modifier }) => (modifier === 'bad' ? null : {
color: `${value}_${modifier}`,
}),
test: (value, { modifier }) =>
modifier === 'bad'
? null
: {
color: `${value}_${modifier}`,
},
},
{
values: {
Expand Down
33 changes: 33 additions & 0 deletions tests/tailwind-screens.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,36 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async ()
`)
})
})

test('min screens', async () => {
let config = {
content: [{ raw: html`<div class="min-lg:font-bold"></div>` }],
}

let input = css`
@tailwind utilities;
@tailwind screens;
.foo {
color: black;
}
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
.hover\:font-bold:hover {
font-weight: 700;
}
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
}
.foo {
color: black;
}
`)
})
})

0 comments on commit c7cc38f

Please sign in to comment.