Skip to content

Commit

Permalink
Feature flag matchVariant API
Browse files Browse the repository at this point in the history
  • Loading branch information
thecrypticace committed May 31, 2022
1 parent d2fdf9e commit 34fd0fb
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 3 deletions.
2 changes: 1 addition & 1 deletion src/featureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ let defaults = {

let featureFlags = {
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
experimental: ['optimizeUniversalDefaults', 'variantGrouping', 'matchVariant'],
}

export function flagEnabled(config, flag) {
Expand Down
8 changes: 6 additions & 2 deletions src/lib/setupContextUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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))
Expand All @@ -496,7 +500,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
options
)
}
},
}
}

return api
Expand Down
6 changes: 6 additions & 0 deletions tests/match-variants.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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> `,
Expand Down Expand Up @@ -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> `,
Expand Down Expand Up @@ -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> `,
Expand Down Expand Up @@ -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>`,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>`,
Expand Down

0 comments on commit 34fd0fb

Please sign in to comment.