archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Feature flag matchVariant API

Browse Source
This commit is contained in:
Jordan Pittman 2022-05-31 13:15:14 -04:00
parent d2fdf9eb09
commit 34fd0fb82a
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/featureFlags.js
View File

@ -7,7 +7,7 @@ let defaults = {
let featureFlags = {
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
experimental: ['optimizeUniversalDefaults', 'variantGrouping', 'matchVariant'],
}
export function flagEnabled(config, flag) {

8
src/lib/setupContextUtils.js
View File

@ -4,6 +4,7 @@ import postcss from 'postcss'
import dlv from 'dlv'
import selectorParser from 'postcss-selector-parser'
import { flagEnabled } from '../featureFlags.js'
import transformThemeValue from '../util/transformThemeValue'
import parseObjectStyles from '../util/parseObjectStyles'
import prefixSelector from '../util/prefixSelector'
@ -484,7 +485,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
insertInto(variantList, variantName, options)
variantMap.set(variantName, variantFunctions)
},
matchVariant: function (variants, options) {
}
if (flagEnabled(tailwindConfig, 'matchVariant')) {
api.matchVariant = function (variants, options) {
for (let variant in variants) {
for (let [k, v] of Object.entries(options?.values ?? {})) {
api.addVariant(`${variant}-${k}`, variants[variant](v))
@ -496,7 +500,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
options
)
}
},
}
}
return api

6
tests/match-variants.test.js
View File

@ -2,6 +2,7 @@ import { run, html, css } from './util/run'
test('partial arbitrary variants', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@ -37,6 +38,7 @@ test('partial arbitrary variants', () => {
test('partial arbitrary variants with at-rules', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@ -75,6 +77,7 @@ test('partial arbitrary variants with at-rules', () => {
test('partial arbitrary variants with at-rules and placeholder', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@ -113,6 +116,7 @@ test('partial arbitrary variants with at-rules and placeholder', () => {
test('partial arbitrary variants with default values', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div class="tooltip-bottom:mt-2 tooltip-top:mb-2"></div>`,
@ -155,6 +159,7 @@ test('partial arbitrary variants with default values', () => {
test('matched variant values maintain the sort order they are registered in', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div
@ -209,6 +214,7 @@ test('matched variant values maintain the sort order they are registered in', ()
test('matchVariant can return an array of format strings from the function', () => {
let config = {
experimental: { matchVariant: true },
content: [
{
raw: html`<div class="test-[a,b,c]:underline"></div>`,