From ecc1590f461b99631311e88435c9b2ba7debe558 Mon Sep 17 00:00:00 2001 From: Khoo Hao Yit Date: Sun, 23 Oct 2022 08:45:17 +0000 Subject: [PATCH 1/3] Fix nested style have redundant `CSS` --- src/lib/generateRules.js | 2 +- tests/min-max-screen-variants.test.js | 45 +++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 3695876140b0..1882a8b38818 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -210,7 +210,7 @@ function applyVariant(variant, matches, context) { let container = postcss.root({ nodes: [rule.clone()] }) for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) { - let clone = containerFromArray ?? container.clone() + let clone = (containerFromArray ? containerFromArray : container).clone() let collectedFormats = [] function prepareBackup() { diff --git a/tests/min-max-screen-variants.test.js b/tests/min-max-screen-variants.test.js index cb6a06293d15..e8366afb14aa 100644 --- a/tests/min-max-screen-variants.test.js +++ b/tests/min-max-screen-variants.test.js @@ -660,3 +660,48 @@ it('warns when using min and max variants with mixed units (with no screens conf expect(warn).toHaveBeenCalledTimes(1) expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units']) }) + +it('should properly handle nested style', async () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + function ({ addUtilities }) { + addUtilities({ + '.2-wide-grid': { + display: 'grid', + '> *': { + 'grid-column': 'span 2', + }, + }, + }) + }, + ], + theme: { + screens: defaultScreens, + }, + } + + let input = css` + @tailwind utilities; + ` + + let result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + @media not all and (min-width: 768px) { + .max-md\:2-wide-grid { + display: grid; + } + .max-md\:2-wide-grid > * { + grid-column: span 2; + } + } + `) + + expect(warn).toHaveBeenCalledTimes(0) +}) From 2de1e1a7cc14e1309c859015d9e0898daf962138 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 24 Oct 2022 11:38:10 -0400 Subject: [PATCH 2/3] wip --- src/lib/generateRules.js | 2 +- tests/min-max-screen-variants.test.js | 45 --------------------------- tests/variants.test.js | 37 ++++++++++++++++++++++ 3 files changed, 38 insertions(+), 46 deletions(-) diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 1882a8b38818..f9fa374c186d 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -210,7 +210,7 @@ function applyVariant(variant, matches, context) { let container = postcss.root({ nodes: [rule.clone()] }) for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) { - let clone = (containerFromArray ? containerFromArray : container).clone() + let clone = (containerFromArray ?? container).clone() let collectedFormats = [] function prepareBackup() { diff --git a/tests/min-max-screen-variants.test.js b/tests/min-max-screen-variants.test.js index e8366afb14aa..cb6a06293d15 100644 --- a/tests/min-max-screen-variants.test.js +++ b/tests/min-max-screen-variants.test.js @@ -660,48 +660,3 @@ it('warns when using min and max variants with mixed units (with no screens conf expect(warn).toHaveBeenCalledTimes(1) expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units']) }) - -it('should properly handle nested style', async () => { - let config = { - content: [ - { - raw: html`
`, - }, - ], - corePlugins: { preflight: false }, - plugins: [ - function ({ addUtilities }) { - addUtilities({ - '.2-wide-grid': { - display: 'grid', - '> *': { - 'grid-column': 'span 2', - }, - }, - }) - }, - ], - theme: { - screens: defaultScreens, - }, - } - - let input = css` - @tailwind utilities; - ` - - let result = await run(input, config) - - expect(result.css).toMatchFormattedCss(css` - @media not all and (min-width: 768px) { - .max-md\:2-wide-grid { - display: grid; - } - .max-md\:2-wide-grid > * { - grid-column: span 2; - } - } - `) - - expect(warn).toHaveBeenCalledTimes(0) -}) diff --git a/tests/variants.test.js b/tests/variants.test.js index 45584fc3614a..e05c826fdfc2 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1029,3 +1029,40 @@ test('class inside pseudo-class function :has', () => { `) }) }) + +test('variant functions returning arrays should output correct results when nesting', async () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [ + function ({ addUtilities, addVariant }) { + addVariant('test', () => ['@media (test)']) + addUtilities({ + '.foo': { + display: 'grid', + '> *': { + 'grid-column': 'span 2', + }, + }, + }) + }, + ], + } + + let input = css` + @tailwind utilities; + ` + + let result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + @media (test) { + .test\:foo { + display: grid; + } + .test\:foo > * { + grid-column: span 2; + } + } + `) +}) From 557b733c81c274250d3b121da1ed4b02ea047907 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 24 Oct 2022 11:41:19 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cd35ec99b4b..c30c0166b271 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Escape special characters in resolved content base paths ([#9650](https://github.com/tailwindlabs/tailwindcss/pull/9650)) +- Don't reuse container for array returning variant functions ([#9644](https://github.com/tailwindlabs/tailwindcss/pull/9644)) ## [3.2.1] - 2022-10-21