wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Prepare for container queries setup (#9526)

Browse source 
* setup for container queries

* remove container query implementation itself

This will be moved to its own plugin.

* update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This commit is contained in:
Robin Malfait 2022-10-12 12:24:46 +02:00 • committed by GitHub
parent 8773fe6c96
commit 4338849ff4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added 'place-content-baseline' utility ([#9498](https://github.com/tailwindlabs/tailwindcss/pull/9498))
- Added 'place-items-baseline' utility ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
- Added 'content-baseline' utility ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
- Prepare for container queries setup ([#9526](https://github.com/tailwindlabs/tailwindcss/pull/9526))
### Fixed

3
src/lib/defaultExtractor.js
View file

@ -71,6 +71,9 @@ function* buildRegExps(context) {
let variantPatterns = [
// Without quotes
regex.any([
// This is here to provide special support for the `@` variant
regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
regex.pattern([/[^\s"'`\[\\]+/, separator]),
]),

3
src/lib/generateRules.js
View file

@ -128,7 +128,8 @@ function applyVariant(variant, matches, context) {
return matches
}
let args = {}
/** @type {{modifier: string | null, value: string | null}} */
let args = { modifier: null, value: null }
// Retrieve "modifier"
{

14
src/lib/offsets.js
View file

@ -10,7 +10,8 @@ import bigSign from '../util/bigSign'
* @typedef {object} VariantOption
* @property {number} id An unique identifier to identify `matchVariant`
* @property {function | undefined} sort The sort function
* @property {string} value The value we want to compare
* @property {string|null} value The value we want to compare
* @property {string|null} modifier The modifier that was used (if any)
*/
/**
@ -209,7 +210,16 @@ export class Offsets {
for (let bOptions of b.options) {
if (aOptions.id !== bOptions.id) continue
if (!aOptions.sort || !bOptions.sort) continue
let result = aOptions.sort(aOptions.value, bOptions.value)
let result = aOptions.sort(
{
value: aOptions.value,
modifier: aOptions.modifier,
},
{
value: bOptions.value,
modifier: bOptions.modifier,
}
)
if (result !== 0) return result
}
}

3
src/lib/setupContextUtils.js
View file

@ -520,10 +520,11 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
},
matchVariant(variant, variantFn, options) {
let id = ++variantIdentifier // A unique identifier that "groups" these variables together.
let isSpecial = variant === '@'
for (let [key, value] of Object.entries(options?.values ?? {})) {
api.addVariant(
`${variant}-${key}`,
isSpecial ? `${variant}${key}` : `${variant}-${key}`,
Object.assign(({ args, container }) => variantFn({ ...args, container, value }), {
[MATCH_VARIANT]: true,
}),

28
tests/match-variants.test.js
View file

@ -245,7 +245,7 @@ it('should be possible to sort variants', () => {
({ matchVariant }) => {
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
},
@ -292,7 +292,7 @@ it('should be possible to compare arbitrary variants and hardcoded variants', ()
example: '600px',
},
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
},
@ -349,13 +349,13 @@ it('should be possible to sort stacked arbitrary variants correctly', () => {
({ matchVariant }) => {
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
matchVariant('max', ({ value }) => `@media (max-width: ${value})`, {
sort(a, z) {
return parseInt(z) - parseInt(a)
return parseInt(z.value) - parseInt(a.value)
},
})
},
@ -414,13 +414,13 @@ it('should maintain sort from other variants, if sort functions of arbitrary var
({ matchVariant }) => {
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
matchVariant('max', ({ value }) => `@media (max-width: ${value})`, {
sort(a, z) {
return parseInt(z) - parseInt(a)
return parseInt(z.value) - parseInt(a.value)
},
})
},
@ -466,12 +466,12 @@ it('should sort arbitrary variants left to right (1)', () => {
({ matchVariant }) => {
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
matchVariant('max', ({ value }) => `@media (max-width: ${value})`, {
sort(a, z) {
return parseInt(z) - parseInt(a)
return parseInt(z.value) - parseInt(a.value)
},
})
},
@ -534,12 +534,12 @@ it('should sort arbitrary variants left to right (2)', () => {
({ matchVariant }) => {
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
return parseInt(a) - parseInt(z)
return parseInt(a.value) - parseInt(z.value)
},
})
matchVariant('max', ({ value }) => `@media (max-width: ${value})`, {
sort(a, z) {
return parseInt(z) - parseInt(a)
return parseInt(z.value) - parseInt(a.value)
},
})
},
@ -601,19 +601,19 @@ it('should guarantee that we are not passing values from other variants to the w
matchVariant('min', ({ value }) => `@media (min-width: ${value})`, {
sort(a, z) {
let lookup = ['100px', '200px']
if (lookup.indexOf(a) === -1 || lookup.indexOf(z) === -1) {
if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
throw new Error('We are seeing values that should not be there!')
}
return lookup.indexOf(a) - lookup.indexOf(z)
return lookup.indexOf(a.value) - lookup.indexOf(z.value)
},
})
matchVariant('max', ({ value }) => `@media (max-width: ${value})`, {
sort(a, z) {
let lookup = ['300px', '400px']
if (lookup.indexOf(a) === -1 || lookup.indexOf(z) === -1) {
if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
throw new Error('We are seeing values that should not be there!')
}
return lookup.indexOf(z) - lookup.indexOf(a)
return lookup.indexOf(z.value) - lookup.indexOf(a.value)
},
})
},

16
types/config.d.ts vendored
View file

@ -296,7 +296,21 @@ export interface PluginAPI {
addBase(base: CSSRuleObject | CSSRuleObject[]): void
// for registering custom variants
addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
matchVariant(name: string, cb: (options: { value: string }) => string | string[]): void
matchVariant(
name: string,
cb: (options: { value: string; modifier: string | null }) => string | string[]
): void
matchVariant<Values extends {}>(
name: string,
cb: (options: { value: string; modifier: string | null }) => string | string[],
options: {
values: Values
sort(
a: { value: keyof Values | string; modifier: string | null },
b: { value: keyof Values | string; modifier: string | null }
): number
}
): void
// for looking up values in the user’s theme configuration
theme: <TDefaultValue = Config['theme']>(
path?: string,