From 272d90be2812c3a89d19b9a5d41ec09037642517 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 12 May 2022 19:08:11 +0200 Subject: [PATCH] add `matchVariant` test --- tests/arbitrary-variants.test.js | 101 +++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index ffa4a70732d4..534091cfb470 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -405,3 +405,104 @@ test('with @apply', () => { `) }) }) + +test('partial arbitrary variants', () => { + let config = { + content: [ + { + raw: html` +
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + ({ addUtilities, matchVariant, matchUtilities }) => { + addUtilities({ + '.container-type-size': { 'container-type': 'size' }, + '.container-type-inline-size': { 'container-type': 'inline-size' }, + '.container-type-block-size': { 'container-type': 'block-size' }, + '.container-type-style': { 'container-type': 'style' }, + '.container-type-state': { 'container-type': 'state' }, + }) + + matchUtilities({ + container: (value) => { + return { + 'container-name': value, + } + }, + }) + + matchVariant({ + contain: (args) => { + if (args.includes(',')) { + let [name, query] = args.split(',') + let [type, value] = query.split(':') + return `@container ${name} (${ + { min: 'min-width', max: 'max-width' }[type] + }: ${value})` + } else if (args.includes(':')) { + let [type, value] = args.split(':') + return `@container (${{ min: 'min-width', max: 'max-width' }[type]}: ${value})` + } else { + return `@container (min-width: ${args})` + } + }, + }) + }, + ], + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .container-type-inline-size { + container-type: inline-size; + } + + .container-\[sidebar\] { + container-name: sidebar; + } + + @container sidebar (min-width: 500px) { + .contain-\[sidebar\2c min\:500px\]\:flex { + display: flex; + } + } + + @container sidebar (max-width: 500px) { + .contain-\[sidebar\2c max\:500px\]\:flex { + display: flex; + } + } + + @container (min-width: 500px) { + .contain-\[min\:500px\]\:flex { + display: flex; + } + } + + @container (max-width: 500px) { + .contain-\[max\:500px\]\:flex { + display: flex; + } + } + + @container (min-width: 500px) { + .contain-\[500px\]\:flex { + display: flex; + } + } + `) + }) +})