From f5010f592afd2e3b8d4fd1d8abfc62712b0271a7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 18 Nov 2020 15:11:25 -0500 Subject: [PATCH 01/17] Update changelog --- CHANGELOG.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3d518d231e2..cc7b91d6869e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- Nothing yet! + +## [2.0.1] - 2020-11-18 + +- Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags. + +## [2.0.0] - 2020-11-18 + ### Added - Add redesigned color palette ([#2623](https://github.com/tailwindlabs/tailwindcss/pull/2623), [700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc), [#2633](https://github.com/tailwindlabs/tailwindcss/pull/2633)) @@ -1295,7 +1303,9 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.25...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.1...HEAD +[2.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0...v2.0.1 +[2.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.6...v2.0.0 [2.0.0-alpha.25]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.24...v2.0.0-alpha.25 [2.0.0-alpha.24]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.23...v2.0.0-alpha.24 [2.0.0-alpha.23]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.22...v2.0.0-alpha.23 From 195ffe9f5037872a4871fbe0772f726f0514b755 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 19 Nov 2020 17:02:58 +0100 Subject: [PATCH 02/17] make some changes to compat mode --- scripts/compat.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/scripts/compat.js b/scripts/compat.js index 4a8e8dfb4202..b4fef57894ba 100644 --- a/scripts/compat.js +++ b/scripts/compat.js @@ -37,10 +37,16 @@ if (process.argv.includes('--prepare')) { // 5. Remove peerDependencies delete packageJson.peerDependencies - // 6. Write package.json with the new contents + // 6. Use new name + packageJson.name = '@tailwindcss/postcss7-compat' + + // 7. Make sure you can publish + packageJson.publishConfig = { access: 'public' } + + // 8. Write package.json with the new contents fs.writeFileSync(fromRootPath('package.json'), JSON.stringify(packageJson, null, 2), 'utf8') - // 7. Print some useful information to make publishing easy + // 9. Print some useful information to make publishing easy console.log() console.log('You can safely publish `tailwindcss` in PostCSS 7 compatibility mode:\n') console.log( From 27fd1f9883997bb6cfde2bd6bde7981e23866ffb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 19 Nov 2020 12:39:00 -0500 Subject: [PATCH 03/17] Only run coverage in CI --- .github/workflows/nodejs.yml | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 7be71d1e0bd2..6b64cb4dc0e6 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -37,7 +37,7 @@ jobs: env: CI: true - run: npm run prepublishOnly - - run: npm test + - run: npm test -- --coverage env: CI: true - run: bash <(curl -s --retry 5 --retry-delay 2 --connect-timeout 2 https://codecov.io/bash) diff --git a/package.json b/package.json index bfd5f3b4a691..6767a605e1bf 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "rebuild-fixtures": "npm run babelify && babel-node scripts/rebuildFixtures.js", "prepublishOnly": "npm run babelify && babel-node scripts/build.js", "style": "eslint .", - "test": "jest && eslint .", + "test": "jest", + "posttest": "npm run style", "compat": "node scripts/compat.js --prepare", "compat:restore": "node scripts/compat.js --restore" }, @@ -96,7 +97,6 @@ ] }, "jest": { - "collectCoverage": true, "testTimeout": 30000, "setupFilesAfterEnv": [ "/jest/customMatchers.js" From 3ea5e18c243cf00bc4d317c7d2282b528b7cdb70 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 19 Nov 2020 12:40:56 -0500 Subject: [PATCH 04/17] Add failing test for complex apply scenario MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @RobinMalfait Something to look at when you have time 🤔 --- __tests__/applyAtRule.test.js | 91 +++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index e9fe54998be5..4cab89e1f36a 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -558,6 +558,97 @@ test('you can apply utilities with multi-class selectors like group-hover varian }) test('you can apply classes recursively', () => { + const input = ` + .baz { + color: blue; + } + .bar { + @apply baz px-4; + } + .foo { + @apply bar; + } + ` + const expected = ` + .baz { + color: blue; + } + .bar { + padding-left: 1rem; + padding-right: 1rem; + color: blue; + } + .foo { + padding-left: 1rem; + padding-right: 1rem; + color: blue; + } + ` + + expect.assertions(2) + + return run(input).then((result) => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) + +test.skip('you can apply complex classes recursively', () => { + const input = ` + .button { + @apply rounded-xl px-6 py-2 hover:text-white focus:border-opacity-100; + } + + .button-yellow { + @apply button bg-yellow-600 text-gray-200; + } + ` + const expected = ` + .button:focus { + --tw-border-opacity: 1; + } + .button { + border-radius: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .button:hover { + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); + } + .button-yellow:focus { + --tw-border-opacity: 1; + } + .button-yellow { + border-radius: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .button-yellow:hover { + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); + } + .button-yellow { + --tw-bg-opacity: 1; + background-color: rgba(217, 119, 6, var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(229, 231, 235, var(--tw-text-opacity)); + } + ` + + expect.assertions(2) + + return run(input).then((result) => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) + +test('you can apply classes recursively out of order', () => { const input = ` .foo { @apply bar; From 1e0fc09e0a634868398d1f303ba13f4fa37a5c02 Mon Sep 17 00:00:00 2001 From: Stefan Fisk Date: Thu, 26 Nov 2020 14:53:58 +0100 Subject: [PATCH 05/17] Fix !important on multiple selectors #2823 (#2824) * Add failing test for #2823 * cleanup string literals * use prettier for toMatchCSS diffs * make sure that importants are applied correctly Co-authored-by: Robin Malfait --- __tests__/applyAtRule.test.js | 74 +++++++++++++++++++------- jest/customMatchers.js | 1 - src/lib/substituteClassApplyAtRules.js | 14 ++++- 3 files changed, 68 insertions(+), 21 deletions(-) diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index 4cab89e1f36a..36a8629312a3 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -1002,14 +1002,10 @@ describe('using apply with the prefix option', () => { test('a "Did You Mean" suggestion is omitted if a similar class cannot be identified.', () => { const input = ` - .foo { @apply anteater; } - ` + .foo { @apply anteater; } + ` - const config = resolveConfig([ - { - ...defaultConfig, - }, - ]) + const config = resolveConfig([{ ...defaultConfig }]) expect.assertions(1) @@ -1109,7 +1105,7 @@ test('you can apply classes to a rule with multiple selectors', () => { @apply float-left opacity-50 hover:opacity-100 md:float-right; } } - ` + ` const expected = ` @supports (display: grid) { @@ -1134,6 +1130,48 @@ test('you can apply classes to a rule with multiple selectors', () => { }) }) +test('you can apply classes to a rule with multiple selectors with important and a prefix enabled', () => { + const input = ` + @supports (display: grid) { + .foo, h1 > .bar * { + @apply tw-float-left tw-opacity-50 hover:tw-opacity-100 md:tw-float-right; + } + } + ` + + const expected = ` + @supports (display: grid) { + .foo, h1 > .bar * { + float: left; + opacity: 0.5; + } + + .foo:hover, h1 > .bar *:hover { + opacity: 1; + } + + @media (min-width: 768px) { + .foo, h1 > .bar * { + float: right; + } + } + } + ` + + const config = resolveConfig([ + { + ...defaultConfig, + prefix: 'tw-', + important: true, + }, + ]) + + return run(input, config).then((result) => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) + test('you can apply classes in a nested rule', () => { const input = ` .selector { @@ -1241,11 +1279,11 @@ test('declarations within a rule that uses @apply can be !important', () => { ` const expected = ` - .foo { - text-align: center; - float: left; - display: block !important; - } + .foo { + text-align: center; + float: left; + display: block !important; + } ` expect.assertions(2) @@ -1266,11 +1304,11 @@ test('declarations within a rule that uses @apply with !important remain not !im ` const expected = ` - .foo { - text-align: center !important; - float: left; - display: block !important; - } + .foo { + text-align: center !important; + float: left; + display: block !important; + } ` expect.assertions(2) diff --git a/jest/customMatchers.js b/jest/customMatchers.js index 32fbd588674f..e5e5b4348566 100644 --- a/jest/customMatchers.js +++ b/jest/customMatchers.js @@ -2,7 +2,6 @@ import prettier from 'prettier' import diff from 'jest-diff' function format(input) { - return input return prettier.format(input, { parser: 'css', printWidth: 100, diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 9763118c4fa7..95e4bce3165e 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/src/lib/substituteClassApplyAtRules.js @@ -242,11 +242,21 @@ function processApplyAtRules(css, lookupTree, config) { : (util) => util.rule.nodes.forEach((n) => afterRule.append(n.clone())) ) - const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), (root) => + rulesToInsert.forEach((rule) => { + if (rule.type === 'atrule') { + rule.walkRules((rule) => { + rule.__tailwind = { ...rule.__tailwind, important } + }) + } else { + rule.__tailwind = { ...rule.__tailwind, important } + } + }) + + const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), (root) => { root.walkDecls((d) => { d.important = important }) - ) + }) const mergedRules = mergeAdjacentRules(nearestParentRule, [...nodes, afterRule]) From 152202916c173d4102752b7f464ab9763c906530 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 26 Nov 2020 15:05:06 +0100 Subject: [PATCH 06/17] Allow for recursively applying user defined classes (#2832) --- __tests__/applyAtRule.test.js | 21 ++++++++++++++------- src/lib/substituteClassApplyAtRules.js | 25 +++++++++++++++++++------ 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index 36a8629312a3..df8da5bf32f1 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -593,7 +593,7 @@ test('you can apply classes recursively', () => { }) }) -test.skip('you can apply complex classes recursively', () => { +test('you can apply complex classes recursively', () => { const input = ` .button { @apply rounded-xl px-6 py-2 hover:text-white focus:border-opacity-100; @@ -603,10 +603,12 @@ test.skip('you can apply complex classes recursively', () => { @apply button bg-yellow-600 text-gray-200; } ` + const expected = ` .button:focus { --tw-border-opacity: 1; } + .button { border-radius: 0.75rem; padding-top: 0.5rem; @@ -614,13 +616,23 @@ test.skip('you can apply complex classes recursively', () => { padding-left: 1.5rem; padding-right: 1.5rem; } + .button:hover { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } + + .button-yellow { + --tw-bg-opacity: 1; + background-color: rgba(217, 119, 6, var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(229, 231, 235, var(--tw-text-opacity)); + } + .button-yellow:focus { --tw-border-opacity: 1; } + .button-yellow { border-radius: 0.75rem; padding-top: 0.5rem; @@ -628,16 +640,11 @@ test.skip('you can apply complex classes recursively', () => { padding-left: 1.5rem; padding-right: 1.5rem; } + .button-yellow:hover { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } - .button-yellow { - --tw-bg-opacity: 1; - background-color: rgba(217, 119, 6, var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgba(229, 231, 235, var(--tw-text-opacity)); - } ` expect.assertions(2) diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 95e4bce3165e..7c7c89adc88d 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/src/lib/substituteClassApplyAtRules.js @@ -96,7 +96,7 @@ function buildUtilityMap(css, lookupTree) { let index = 0 const utilityMap = {} - function handle(rule) { + function handle(getRule, rule) { const utilityNames = extractUtilityNames(rule.selector) utilityNames.forEach((utilityName, i) => { @@ -108,16 +108,29 @@ function buildUtilityMap(css, lookupTree) { index, utilityName, classPosition: i, - get rule() { - return cloneRuleWithParent(rule) - }, + ...getRule(rule), }) index++ }) } - lookupTree.walkRules(handle) - css.walkRules(handle) + // Lookup tree is the big lookup tree, making the rule lazy allows us to save + // some memory because we don't need everything. + lookupTree.walkRules( + handle.bind(null, (rule) => ({ + get rule() { + return cloneRuleWithParent(rule) + }, + })) + ) + + // This is the end user's css. This might contain rules that we want to + // apply. We want immediate copies of everything in case that we have user + // defined classes that are recursively applied. Down below we are modifying + // the rules directly. We could do a better solution where we keep track of a + // dependency tree, but that is a bit more complex. Might revisit later, + // we'll see how this turns out! + css.walkRules(handle.bind(null, (rule) => ({ rule: cloneRuleWithParent(rule) }))) return utilityMap } From 6a41c0d73e5b6e7f03ae359727386b1b566fde8a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 26 Nov 2020 16:12:47 +0100 Subject: [PATCH 07/17] add test to verify that apply on multiple selectors work Fixes: #2906 --- __tests__/applyAtRule.test.js | 37 +++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index df8da5bf32f1..13f7b8ef907f 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -1179,6 +1179,43 @@ test('you can apply classes to a rule with multiple selectors with important and }) }) +test('you can apply classes to multiple selectors at the same time, removing important', () => { + const input = ` + .multiple p, + .multiple ul, + .multiple ol { + @apply mt-5; + } + + .multiple h2, + .multiple h3, + .multiple h4 { + @apply mt-8; + } + ` + + const expected = ` + .multiple p, + .multiple ul, + .multiple ol { + margin-top: 1.25rem; + } + + .multiple h2, + .multiple h3, + .multiple h4 { + margin-top: 2rem; + } + ` + + const config = resolveConfig([{ ...defaultConfig, important: true }]) + + return run(input, config).then((result) => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) + test('you can apply classes in a nested rule', () => { const input = ` .selector { From fa4296c1242a02610aa81e50da6b7f8e82d39369 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Fri, 27 Nov 2020 04:56:59 +0000 Subject: [PATCH 08/17] Update prettier to version 2.2.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6767a605e1bf..16ff588b2048 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "eslint-plugin-prettier": "^3.1.4", "jest": "^26.6.3", "postcss": "^8.0.9", - "prettier": "^2.1.2", + "prettier": "^2.2.0", "rimraf": "^3.0.0" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index bf1bb6c9d293..ebba18b902f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4637,10 +4637,10 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5" - integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg== +prettier@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b" + integrity sha512-yYerpkvseM4iKD/BXLYUkQV5aKt4tQPqaGW6EsZjzyu0r7sVZZNPJW4Y8MyKmicp6t42XUPcBVA+H6sB3gqndw== pretty-format@^26.6.2: version "26.6.2" From 9c39c3efdc7f40cdb1fb6cf2dd363355533c714a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 27 Nov 2020 15:40:14 +0100 Subject: [PATCH 09/17] update changelog --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc7b91d6869e..c82c1e918017 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix issue with `@apply` not working as expected with `!important` inside an atrule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824)) +- Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832)) ## [2.0.1] - 2020-11-18 From 2d0c686f4a4a7c8972a50de5acb05e1429e524d1 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Fri, 27 Nov 2020 23:12:57 +0000 Subject: [PATCH 10/17] Update eslint to version 7.14.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 16ff588b2048..9d8032f63d69 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "autoprefixer": "^10.0.2", "babel-jest": "^26.6.3", "clean-css": "^4.1.9", - "eslint": "^7.12.1", + "eslint": "^7.14.0", "eslint-config-prettier": "^6.15.0", "eslint-plugin-prettier": "^3.1.4", "jest": "^26.6.3", diff --git a/yarn.lock b/yarn.lock index ebba18b902f4..1fd9d8f05762 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2356,10 +2356,10 @@ eslint-visitor-keys@^2.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8" integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ== -eslint@^7.12.1: - version "7.12.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.12.1.tgz#bd9a81fa67a6cfd51656cdb88812ce49ccec5801" - integrity sha512-HlMTEdr/LicJfN08LB3nM1rRYliDXOmfoO4vj39xN6BLpFzF00hbwBoqHk8UcJ2M/3nlARZWy/mslvGEuZFvsg== +eslint@^7.14.0: + version "7.14.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.14.0.tgz#2d2cac1d28174c510a97b377f122a5507958e344" + integrity sha512-5YubdnPXrlrYAFCKybPuHIAH++PINe1pmKNc5wQRB9HSbqIK1ywAnntE3Wwua4giKu0bjligf1gLF6qxMGOYRA== dependencies: "@babel/code-frame" "^7.0.0" "@eslint/eslintrc" "^0.2.1" From ba753cf1721af9314e2a41fdf932a121cd6add95 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Sun, 29 Nov 2020 00:26:03 +0000 Subject: [PATCH 11/17] Update postcss to version 8.1.10 --- package.json | 2 +- yarn.lock | 22 +++++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9d8032f63d69..8d92c08f0c3a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "eslint-config-prettier": "^6.15.0", "eslint-plugin-prettier": "^3.1.4", "jest": "^26.6.3", - "postcss": "^8.0.9", + "postcss": "^8.1.10", "prettier": "^2.2.0", "rimraf": "^3.0.0" }, diff --git a/yarn.lock b/yarn.lock index 1fd9d8f05762..e3980247ab82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4084,6 +4084,11 @@ nanoid@^3.1.16: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64" integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w== +nanoid@^3.1.18: + version "3.1.18" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.18.tgz#0680db22ab01c372e89209f5d18283d98de3e96d" + integrity sha512-rndlDjbbHbcV3xi+R2fpJ+PbGMdfBxz5v1fATIQFq0DP64FsicQdwnKLy47K4kZHdRpmQXtz24eGsxQqamzYTA== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -4610,7 +4615,17 @@ postcss@^6.0.9: source-map "^0.6.1" supports-color "^5.4.0" -postcss@^8.0.9, postcss@^8.1.6: +postcss@^8.1.10: + version "8.1.10" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.10.tgz#129834f94c720554d2cfdaeb27d5542ac4a026ea" + integrity sha512-iBXEV5VTTYaRRdxiFYzTtuv2lGMQBExqkZKSzkJe+Fl6rvQrA/49UVGKqB+LG54hpW/TtDBMGds8j33GFNW7pg== + dependencies: + colorette "^1.2.1" + nanoid "^3.1.18" + source-map "^0.6.1" + vfile-location "^3.2.0" + +postcss@^8.1.6: version "8.1.7" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.7.tgz#ff6a82691bd861f3354fd9b17b2332f88171233f" integrity sha512-llCQW1Pz4MOPwbZLmOddGM9eIJ8Bh7SZ2Oj5sxZva77uVaotYDsYTch1WBTNu7fUY0fpWp0fdt7uW40D4sRiiQ== @@ -5715,6 +5730,11 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" +vfile-location@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c" + integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA== + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" From d41ec713a677850cbb95e324ebd2a25ce471dad1 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Mon, 30 Nov 2020 22:41:29 +0000 Subject: [PATCH 12/17] Update @babel/core to version 7.12.9 --- package.json | 2 +- yarn.lock | 82 +++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 63 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 8d92c08f0c3a..de07cf878cb7 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ ], "devDependencies": { "@babel/cli": "^7.11.6", - "@babel/core": "^7.12.3", + "@babel/core": "^7.12.9", "@babel/node": "^7.0.0", "@babel/preset-env": "^7.0.0", "autoprefixer": "^10.0.2", diff --git a/yarn.lock b/yarn.lock index e3980247ab82..527b1afaf85b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -56,19 +56,19 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@^7.12.3": - version "7.12.3" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8" - integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g== +"@babel/core@^7.12.9": + version "7.12.9" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8" + integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ== dependencies: "@babel/code-frame" "^7.10.4" - "@babel/generator" "^7.12.1" + "@babel/generator" "^7.12.5" "@babel/helper-module-transforms" "^7.12.1" - "@babel/helpers" "^7.12.1" - "@babel/parser" "^7.12.3" - "@babel/template" "^7.10.4" - "@babel/traverse" "^7.12.1" - "@babel/types" "^7.12.1" + "@babel/helpers" "^7.12.5" + "@babel/parser" "^7.12.7" + "@babel/template" "^7.12.7" + "@babel/traverse" "^7.12.9" + "@babel/types" "^7.12.7" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.1" @@ -96,6 +96,15 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.12.5": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de" + integrity sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A== + dependencies: + "@babel/types" "^7.12.5" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -342,14 +351,14 @@ "@babel/traverse" "^7.10.4" "@babel/types" "^7.10.4" -"@babel/helpers@^7.12.1": - version "7.12.1" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.1.tgz#8a8261c1d438ec18cb890434df4ec768734c1e79" - integrity sha512-9JoDSBGoWtmbay98efmT2+mySkwjzeFeAL9BuWNoVQpkPFQF8SIIFUfY5os9u8wVzglzoiPRSW7cuJmBDUt43g== +"@babel/helpers@^7.12.5": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.5.tgz#1a1ba4a768d9b58310eda516c449913fe647116e" + integrity sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA== dependencies: "@babel/template" "^7.10.4" - "@babel/traverse" "^7.12.1" - "@babel/types" "^7.12.1" + "@babel/traverse" "^7.12.5" + "@babel/types" "^7.12.5" "@babel/highlight@^7.10.4": version "7.10.4" @@ -384,10 +393,10 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.2.tgz#9d2fcf24cafe85333ab0aff9f26b81bba356004d" integrity sha512-LMN+SqTiZEonUw4hQA0A3zG8DnN0E1F4K107LbDDUnC+0chML1rvWgsHloC9weB4RmZweE0uhFq0eGX7Nr/PBQ== -"@babel/parser@^7.12.3": - version "7.12.3" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd" - integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw== +"@babel/parser@^7.12.7": + version "7.12.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.7.tgz#fee7b39fe809d0e73e5b25eecaf5780ef3d73056" + integrity sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg== "@babel/plugin-proposal-async-generator-functions@^7.10.4": version "7.10.4" @@ -936,6 +945,15 @@ "@babel/parser" "^7.10.4" "@babel/types" "^7.10.4" +"@babel/template@^7.12.7": + version "7.12.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc" + integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/parser" "^7.12.7" + "@babel/types" "^7.12.7" + "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5", "@babel/traverse@^7.7.4": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564" @@ -966,6 +984,21 @@ globals "^11.1.0" lodash "^4.17.19" +"@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9": + version "7.12.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f" + integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.12.5" + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.11.0" + "@babel/parser" "^7.12.7" + "@babel/types" "^7.12.7" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.19" + "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15" @@ -984,6 +1017,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.5", "@babel/types@^7.12.7": + version "7.12.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13" + integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" From d1ef88a61b2f7b42b211d1b31b214e6add0c19be Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 2 Dec 2020 21:45:04 +0100 Subject: [PATCH 13/17] ring defaults (#2951) * add ring defaults Fixes #2911 * add tests for the ringWidth utility + defaults * update changelog --- CHANGELOG.md | 4 ++ __tests__/plugins/ringWidth.test.js | 104 ++++++++++++++++++++++++++++ src/plugins/ringOffsetColor.js | 2 +- src/plugins/ringOffsetWidth.js | 2 +- src/plugins/ringWidth.js | 4 +- 5 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 __tests__/plugins/ringWidth.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index c82c1e918017..684a2775e1f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix issue with `@apply` not working as expected with `!important` inside an atrule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824)) - Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832)) +### Added + +- Add default values for the `ring` utility ([#2951](https://github.com/tailwindlabs/tailwindcss/pull/2951)) + ## [2.0.1] - 2020-11-18 - Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags. diff --git a/__tests__/plugins/ringWidth.test.js b/__tests__/plugins/ringWidth.test.js new file mode 100644 index 000000000000..6f929229fbfb --- /dev/null +++ b/__tests__/plugins/ringWidth.test.js @@ -0,0 +1,104 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/ringWidth' + +test('ring widths', () => { + const config = { + theme: { + ringWidth: { + 4: '4px', + }, + ringOffsetWidth: { + 4: '4px', + }, + ringColor: { + black: '#000', + }, + ringOffsetColor: { + white: '#fff', + }, + ringOpacity: { + 50: '.5', + }, + }, + variants: { + ringColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + expect(utilities).toEqual([ + [ + { + '*': { + '--tw-ring-color': 'rgba(147, 197, 253, 0.5)', + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-color': '#fff', + '--tw-ring-offset-shadow': '0 0 #0000', + '--tw-ring-offset-width': '0px', + '--tw-ring-shadow': '0 0 #0000', + }, + }, + { + respectImportant: false, + }, + ], + [ + { + '.ring-4': { + '--tw-ring-offset-shadow': + 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', + '--tw-ring-shadow': + 'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)', + 'box-shadow': + 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', + }, + '.ring-inset': { + '--tw-ring-inset': 'inset', + }, + }, + undefined, + ], + ]) +}) + +test('ring widths with defaults', () => { + const config = { + theme: { + ringWidth: {}, + ringOffsetWidth: { + DEFAULT: '2px', + }, + ringOffsetColor: { + DEFAULT: 'pink', + }, + }, + variants: { + ringColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + expect(utilities).toEqual([ + [ + { + '*': { + '--tw-ring-color': 'rgba(147, 197, 253, 0.5)', + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-color': 'pink', + '--tw-ring-offset-shadow': '0 0 #0000', + '--tw-ring-offset-width': '2px', + '--tw-ring-shadow': '0 0 #0000', + }, + }, + { respectImportant: false }, + ], + [ + { + '.ring-inset': { + '--tw-ring-inset': 'inset', + }, + }, + undefined, + ], + ]) +}) diff --git a/src/plugins/ringOffsetColor.js b/src/plugins/ringOffsetColor.js index 59c98c4691e7..00953bc488c7 100644 --- a/src/plugins/ringOffsetColor.js +++ b/src/plugins/ringOffsetColor.js @@ -7,7 +7,7 @@ export default function () { return function ({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('ringOffsetColor')) const utilities = _.fromPairs( - _.map(colors, (value, modifier) => { + _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { return [ nameClass('ring-offset', modifier), { diff --git a/src/plugins/ringOffsetWidth.js b/src/plugins/ringOffsetWidth.js index 7a78a99e30e1..2d927efe59ff 100644 --- a/src/plugins/ringOffsetWidth.js +++ b/src/plugins/ringOffsetWidth.js @@ -4,7 +4,7 @@ import nameClass from '../util/nameClass' export default function () { return function ({ addUtilities, theme, variants }) { const utilities = _.fromPairs( - _.map(theme('ringOffsetWidth'), (value, modifier) => { + _.map(_.omit(theme('ringOffsetWidth'), 'DEFAULT'), (value, modifier) => { return [ nameClass('ring-offset', modifier), { diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js index 60bd5ecdad09..d2300620f0a8 100644 --- a/src/plugins/ringWidth.js +++ b/src/plugins/ringWidth.js @@ -20,8 +20,8 @@ export default function () { { '*': { '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-ring-offset-width': '0px', - '--tw-ring-offset-color': '#fff', + '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'), + '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), '--tw-ring-color': ringColorDefault, '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', From f12458a61f4fef091b4991699a8d88fbbce51037 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Thu, 10 Dec 2020 07:12:45 +0000 Subject: [PATCH 14/17] Update eslint-plugin-prettier to version 3.2.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index de07cf878cb7..7854091079a2 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "clean-css": "^4.1.9", "eslint": "^7.14.0", "eslint-config-prettier": "^6.15.0", - "eslint-plugin-prettier": "^3.1.4", + "eslint-plugin-prettier": "^3.2.0", "jest": "^26.6.3", "postcss": "^8.1.10", "prettier": "^2.2.0", diff --git a/yarn.lock b/yarn.lock index 527b1afaf85b..7328bd22256e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2366,10 +2366,10 @@ eslint-config-prettier@^6.15.0: dependencies: get-stdin "^6.0.0" -eslint-plugin-prettier@^3.1.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2" - integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg== +eslint-plugin-prettier@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.2.0.tgz#af391b2226fa0e15c96f36c733f6e9035dbd952c" + integrity sha512-kOUSJnFjAUFKwVxuzy6sA5yyMx6+o9ino4gCdShzBNx4eyFRudWRYKCFolKjoM40PEiuU6Cn7wBLfq3WsGg7qg== dependencies: prettier-linter-helpers "^1.0.0" From eac11cf57d4a98afd2d53725f5e63c5b01df7d06 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 11 Dec 2020 15:03:49 +0100 Subject: [PATCH 15/17] Performance improvements + memory leak fix (#3032) * fix memory leak * add optional condition to hasAtRule * use known tree to handle `@apply` when required `@tailwind` at rules exists Otherwise we will generate the lookup tree. * only generate the missing `@tailwind` atrules when using `@apply` * update perf config to reflect 2.0 changes * update changelog * ensure lookup tree is correctly cached based on used tailwind atrules --- CHANGELOG.md | 1 + __tests__/applyAtRule.test.js | 44 ++++++++++++++-- perf/tailwind.config.js | 12 ++--- src/lib/substituteClassApplyAtRules.js | 69 ++++++++++++++++---------- src/processTailwindFeatures.js | 2 + src/util/disposables.js | 22 ++++++++ src/util/useMemo.js | 15 ++++-- 7 files changed, 125 insertions(+), 40 deletions(-) create mode 100644 src/util/disposables.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 684a2775e1f6..78f4c2df9e23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix issue with `@apply` not working as expected with `!important` inside an atrule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824)) - Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832)) +- Fix memory leak, and broken `@apply` when splitting up files ([#3032](https://github.com/tailwindlabs/tailwindcss/pull/3032)) ### Added diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index 13f7b8ef907f..3cf53394c26d 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -337,16 +337,17 @@ test('you can apply utility classes that do not actually exist as long as they w }) }) -test('the shadow lookup is only used if no @tailwind rules were in the source tree', () => { +test('shadow lookup will be constructed when we have missing @tailwind atrules', () => { const input = ` @tailwind base; + .foo { @apply mt-4; } ` expect.assertions(1) - return run(input).catch((e) => { - expect(e).toMatchObject({ name: 'CssSyntaxError' }) + return run(input).then((result) => { + expect(result.css).toContain(`.foo { margin-top: 1rem;\n}`) }) }) @@ -1362,3 +1363,40 @@ test('declarations within a rule that uses @apply with !important remain not !im expect(result.warnings().length).toBe(0) }) }) + +test('lookup tree is correctly cached based on used tailwind atrules', async () => { + const input1 = ` + @tailwind utilities; + + .foo { @apply mt-4; } + ` + + const input2 = ` + @tailwind components; + + .foo { @apply mt-4; } + ` + + let config = { + corePlugins: [], + plugins: [ + function ({ addUtilities, addComponents }) { + addUtilities({ '.mt-4': { marginTop: '1rem' } }, []) + addComponents({ '.container': { maxWidth: '500px' } }, []) + }, + ], + } + + let output1 = await run(input1, config) + let output2 = await run(input2, config) + + expect(output1.css).toMatchCss(` + .mt-4 { margin-top: 1rem; } + .foo { margin-top: 1rem; } + `) + + expect(output2.css).toMatchCss(` + .container { max-width: 500px; } + .foo { margin-top: 1rem; } + `) +}) diff --git a/perf/tailwind.config.js b/perf/tailwind.config.js index 7fb2125aae9e..5211607402b6 100644 --- a/perf/tailwind.config.js +++ b/perf/tailwind.config.js @@ -1,14 +1,12 @@ +let colors = require('../colors') module.exports = { - future: 'all', - experimental: 'all', purge: [], + darkMode: 'class', theme: { - extend: {}, + extend: { colors }, }, variants: [ 'responsive', - 'motion-safe', - 'motion-reduce', 'group-hover', 'group-focus', 'hover', @@ -19,10 +17,6 @@ module.exports = { 'visited', 'disabled', 'checked', - 'first', - 'last', - 'odd', - 'even', ], plugins: [], } diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 7c7c89adc88d..90a3e4544206 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/src/lib/substituteClassApplyAtRules.js @@ -11,15 +11,25 @@ import substituteScreenAtRules from './substituteScreenAtRules' import prefixSelector from '../util/prefixSelector' import { useMemo } from '../util/useMemo' -function hasAtRule(css, atRule) { - let foundAtRule = false - - css.walkAtRules(atRule, () => { - foundAtRule = true - return false - }) +function hasAtRule(css, atRule, condition) { + let found = false + + css.walkAtRules( + atRule, + condition === undefined + ? () => { + found = true + return false + } + : (node) => { + if (condition(node)) { + found = true + return false + } + } + ) - return foundAtRule + return found } function cloneWithoutChildren(node) { @@ -298,7 +308,7 @@ function processApplyAtRules(css, lookupTree, config) { return css } -let defaultTailwindTree = null +let defaultTailwindTree = new Map() export default function substituteClassApplyAtRules(config, getProcessedPlugins, configChanged) { return function (css) { @@ -307,15 +317,29 @@ export default function substituteClassApplyAtRules(config, getProcessedPlugins, return css } - // Tree already contains @tailwind rules, don't prepend default Tailwind tree - if (hasAtRule(css, 'tailwind')) { + let requiredTailwindAtRules = ['base', 'components', 'utilities'] + if ( + hasAtRule(css, 'tailwind', (node) => { + let idx = requiredTailwindAtRules.indexOf(node.params) + if (idx !== -1) requiredTailwindAtRules.splice(idx, 1) + if (requiredTailwindAtRules.length <= 0) return true + return false + }) + ) { + // Tree already contains all the at rules (requiredTailwindAtRules) return processApplyAtRules(css, postcss.root(), config) } - // Tree contains no @tailwind rules, so generate all of Tailwind's styles and - // prepend them to the user's CSS. Important for