Skip to content

Improve support for custom variants in group-*, peer-*, has-*, and not-* variants #14743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thecrypticace merged 24 commits into from
Oct 24, 2024
Merged

Improve support for custom variants in group-*, peer-*, has-*, and not-* variants #14743

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d141afa
Add function for depth-first AST traversal
thecrypticace Oct 17, 2024
aa5fc87
Fix intellisense variant selector calculation
thecrypticace Oct 14, 2024
f8143a6
Add Intellisense API benchmark
thecrypticace Oct 21, 2024
12b9fae
Use single rule for parallel variants when possible
thecrypticace Oct 17, 2024
5b5bfc9
Add path information to `visit`
thecrypticace Oct 17, 2024
bc391bc
Simplify nesting checks in compound variants
thecrypticace Oct 17, 2024
22673e5
Filter the kinds of rules compound variants support
thecrypticace Oct 21, 2024
6a03a06
Register compound variants with the kinds of rules they support
thecrypticace Oct 21, 2024
8dc719c
Let `not-*` variant handle simple conditional at rules
thecrypticace Oct 21, 2024
cc3e774
Update tests
thecrypticace Oct 21, 2024
414bc16
Update changelog
thecrypticace Oct 21, 2024
22e5614
Use bitfield enum
thecrypticace Oct 22, 2024
9f1a7d3
Compute compounds when using staticVariant
thecrypticace Oct 22, 2024
92e8d31
Add tests
thecrypticace Oct 22, 2024
fa3effb
Refactor
thecrypticace Oct 23, 2024
9e365df
Compute compunds for arbitrary variants
thecrypticace Oct 23, 2024
5b7e104
Compute compounds for `@variant`
thecrypticace Oct 23, 2024
4cc3f16
Compute compounds for `addVariant`
thecrypticace Oct 23, 2024
fb0eabf
Add tests
thecrypticace Oct 23, 2024
a1ab176
Update CHANGELOG.md
thecrypticace Oct 23, 2024
6ac6829
Apply suggestions from code review
thecrypticace Oct 23, 2024
a8ee1fb
Merge branch 'next' into feat/v4-not-tweaks
thecrypticace Oct 24, 2024
48139ad
Update changelog
thecrypticace Oct 24, 2024
ba33ae0
Merge branch 'next' into feat/v4-not-tweaks
thecrypticace Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Filter the kinds of rules compound variants support 
Right now there are only two possibilities:
- `false` — this means a variant never compounds
- `selector` — this means a variant only compounds if it does not produce at-rules
  • Loading branch information
@thecrypticace @RobinMalfait
thecrypticace authored and RobinMalfait committed Oct 24, 2024
commit 22673e552d55f324dc63c91ddaa8d99c5ad6153a
26 changes: 0 additions & 26 deletions packages/tailwindcss/src/candidate.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ it('should parse a simple utility with a variant', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
Expand Down Expand Up @@ -137,12 +136,10 @@ it('should parse a simple utility with stacked variants', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
{
"compounds": true,
"kind": "static",
"root": "focus",
},
Expand All @@ -166,7 +163,6 @@ it('should parse a simple utility with an arbitrary variant', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "arbitrary",
"relative": false,
"selector": "& p",
Expand Down Expand Up @@ -194,7 +190,6 @@ it('should parse a simple utility with a parameterized variant', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "functional",
"modifier": null,
"root": "data",
Expand Down Expand Up @@ -226,15 +221,13 @@ it('should parse compound variants with an arbitrary value as an arbitrary varia
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "compound",
"modifier": {
"kind": "named",
"value": "parent-name",
},
"root": "group",
"variant": {
"compounds": true,
"kind": "arbitrary",
"relative": false,
"selector": "& p",
Expand Down Expand Up @@ -265,15 +258,13 @@ it('should parse a simple utility with a parameterized variant and a modifier',
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "compound",
"modifier": {
"kind": "named",
"value": "parent-name",
},
"root": "group",
"variant": {
"compounds": true,
"kind": "functional",
"modifier": null,
"root": "aria",
Expand Down Expand Up @@ -308,25 +299,21 @@ it('should parse compound group with itself group-group-*', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "compound",
"modifier": {
"kind": "named",
"value": "parent-name",
},
"root": "group",
"variant": {
"compounds": true,
"kind": "compound",
"modifier": null,
"root": "group",
"variant": {
"compounds": true,
"kind": "compound",
"modifier": null,
"root": "group",
"variant": {
"compounds": true,
"kind": "static",
"root": "hover",
},
Expand All @@ -353,7 +340,6 @@ it('should parse a simple utility with an arbitrary media variant', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "arbitrary",
"relative": false,
"selector": "@media(width>=123px)",
Expand Down Expand Up @@ -478,7 +464,6 @@ it('should parse a utility with a modifier and a variant', () => {
},
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
Expand Down Expand Up @@ -895,7 +880,6 @@ it('should parse a static variant starting with @', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "@lg",
},
Expand All @@ -922,7 +906,6 @@ it('should parse a functional variant with a modifier', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "functional",
"modifier": {
"kind": "named",
Expand Down Expand Up @@ -957,7 +940,6 @@ it('should parse a functional variant starting with @', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "functional",
"modifier": null,
"root": "@",
Expand Down Expand Up @@ -989,7 +971,6 @@ it('should parse a functional variant starting with @ and a modifier', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "functional",
"modifier": {
"kind": "named",
Expand Down Expand Up @@ -1153,7 +1134,6 @@ it('should parse arbitrary properties with a variant', () => {
"value": "red",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
Expand All @@ -1179,12 +1159,10 @@ it('should parse arbitrary properties with stacked variants', () => {
"value": "red",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
{
"compounds": true,
"kind": "static",
"root": "focus",
},
Expand All @@ -1206,13 +1184,11 @@ it('should parse arbitrary properties that are important and using stacked arbit
"value": "red",
"variants": [
{
"compounds": true,
"kind": "arbitrary",
"relative": false,
"selector": "& p",
},
{
"compounds": true,
"kind": "arbitrary",
"relative": false,
"selector": "@media(width>=123px)",
Expand Down Expand Up @@ -1250,7 +1226,6 @@ it('should parse a variant containing an arbitrary string with unbalanced parens
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "functional",
"modifier": null,
"root": "string",
Expand Down Expand Up @@ -1298,7 +1273,6 @@ it('should parse candidates with a prefix', () => {
"root": "flex",
"variants": [
{
"compounds": true,
"kind": "static",
"root": "hover",
},
Expand Down
22 changes: 3 additions & 19 deletions packages/tailwindcss/src/candidate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,6 @@ export type Variant =
kind: 'arbitrary'
selector: string

// If true, it can be applied as a child of a compound variant
compounds: boolean

// Whether or not the selector is a relative selector
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector
relative: boolean
Expand All @@ -116,9 +113,6 @@ export type Variant =
| {
kind: 'static'
root: string

// If true, it can be applied as a child of a compound variant
compounds: boolean
}

/**
Expand All @@ -138,9 +132,6 @@ export type Variant =
root: string
value: ArbitraryVariantValue | NamedVariantValue | null
modifier: ArbitraryModifier | NamedModifier | null

// If true, it can be applied as a child of a compound variant
compounds: boolean
}

/**
Expand All @@ -157,9 +148,6 @@ export type Variant =
root: string
modifier: ArbitraryModifier | NamedModifier | null
variant: Variant

// If true, it can be applied as a child of a compound variant
compounds: boolean
}

export type Candidate =
Expand Down Expand Up @@ -511,7 +499,6 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
return {
kind: 'arbitrary',
selector,
compounds: true,
relative,
}
}
Expand Down Expand Up @@ -546,7 +533,6 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
return {
kind: 'static',
root,
compounds: designSystem.variants.compounds(root),
}
}

Expand All @@ -557,7 +543,6 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
root,
modifier: modifier === null ? null : parseModifier(modifier),
value: null,
compounds: designSystem.variants.compounds(root),
}
}

Expand All @@ -570,7 +555,6 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
kind: 'arbitrary',
value: decodeArbitraryValue(value.slice(1, -1)),
},
compounds: designSystem.variants.compounds(root),
}
}

Expand All @@ -579,7 +563,6 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
root,
modifier: modifier === null ? null : parseModifier(modifier),
value: { kind: 'named', value },
compounds: designSystem.variants.compounds(root),
}
}

Expand All @@ -588,14 +571,15 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia

let subVariant = designSystem.parseVariant(value)
if (subVariant === null) return null
if (subVariant.compounds === false) return null

// These two variants must be compatible when compounded
if (!designSystem.variants.compoundsWith(root, subVariant)) return null

return {
kind: 'compound',
root,
modifier: modifier === null ? null : { kind: 'named', value: modifier },
variant: subVariant,
compounds: designSystem.variants.compounds(root),
}
}
}
Expand Down
Loading