From 3504b1580905b2a57eeb7b018c2c4b73c5b02260 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 7 Jul 2022 13:55:06 -0400 Subject: [PATCH 1/5] Update CHANGELOG.md --- CHANGELOG.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cb8594b33528..f2d3edc502ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,15 +13,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Support default `font-weight`s in font size utilities ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763)) - +- Support configuring a default `font-weight` for each font size utility ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763)) +- Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774)) + ### Fixed -- Allows fallback values in plugin API helpers ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762)) -- Fix usage of postcss.config.js in standalone CLI ([#8769](https://github.com/tailwindlabs/tailwindcss/pull/8769)) -- Fix usage of special-character prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772)) -- Don’t prefix selectors in arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773)) -- Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774)) +- Improve types to support fallback values in the CSS-in-JS syntax used in plugin APIs ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762)) +- Support including `tailwindcss` and `autoprefixer` in `postcss.config.js` in standalone CLI ([#8769](https://github.com/tailwindlabs/tailwindcss/pull/8769)) +- Fix using special-characters as prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772)) +- Don’t prefix classes used within arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773)) - Add more explicit types for the default theme ([#8780](https://github.com/tailwindlabs/tailwindcss/pull/8780)) ## [3.1.4] - 2022-06-21 From b4e637e2e096a9d6f2210efba9541f6fd4f28e56 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 11 Jul 2022 10:00:10 -0400 Subject: [PATCH 2/5] Revert "Update postcss-load-config to version 4.0.1 (#8686)" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit c47e66613f1d1072f7a71278d2ebee090af3010c. Node 12 reached EOL on 30 April 2022 after which there will be no more bugfix or security releases. This is one reason why `postcss-load-config` dropped support for Node 10 *and* 12. However, as we still support Node 12 in Tailwind CSS v3, we can’t upgrade to `postcss-load-config` 4.0. --- package-lock.json | 39 +++++++++++---------------------------- package.json | 2 +- 2 files changed, 12 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8c681c6ff597..b5e0641dc342 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "postcss": "^8.4.14", "postcss-import": "^14.1.0", "postcss-js": "^4.0.0", - "postcss-load-config": "^4.0.1", + "postcss-load-config": "^3.1.4", "postcss-nested": "5.0.6", "postcss-selector-parser": "^6.0.10", "postcss-value-parser": "^4.2.0", @@ -5566,15 +5566,15 @@ } }, "node_modules/postcss-load-config": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", - "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", "dependencies": { "lilconfig": "^2.0.5", - "yaml": "^2.1.1" + "yaml": "^1.10.2" }, "engines": { - "node": ">= 14" + "node": ">= 10" }, "funding": { "type": "opencollective", @@ -5593,14 +5593,6 @@ } } }, - "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz", - "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==", - "engines": { - "node": ">= 14" - } - }, "node_modules/postcss-merge-longhand": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.6.tgz", @@ -6670,7 +6662,6 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, "engines": { "node": ">= 6" } @@ -10775,19 +10766,12 @@ } }, "postcss-load-config": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", - "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", "requires": { "lilconfig": "^2.0.5", - "yaml": "^2.1.1" - }, - "dependencies": { - "yaml": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz", - "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==" - } + "yaml": "^1.10.2" } }, "postcss-merge-longhand": { @@ -11509,8 +11493,7 @@ "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yargs": { "version": "17.5.1", diff --git a/package.json b/package.json index 046dfd5d41c6..4014cf952020 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "postcss": "^8.4.14", "postcss-import": "^14.1.0", "postcss-js": "^4.0.0", - "postcss-load-config": "^4.0.1", + "postcss-load-config": "^3.1.4", "postcss-nested": "5.0.6", "postcss-selector-parser": "^6.0.10", "postcss-value-parser": "^4.2.0", From 6f928a83cc4158e9e8e543d10b0b38905029233f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 11 Jul 2022 10:35:59 -0400 Subject: [PATCH 3/5] Update changelog --- CHANGELOG.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2d3edc502ff..3e85064a6b96 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix usage on Node 12.x ([b4e637e](https://github.com/tailwindlabs/tailwindcss/commit/b4e637e2e096a9d6f2210efba9541f6fd4f28e56)) ## [3.1.5] - 2022-07-07 @@ -15,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Support configuring a default `font-weight` for each font size utility ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763)) - Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774)) - + ### Fixed - Improve types to support fallback values in the CSS-in-JS syntax used in plugin APIs ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762)) From deefbf5aafdfc6d65843eb9382b4d1295ec26628 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 11 Jul 2022 10:47:17 -0400 Subject: [PATCH 4/5] Handle theme keys with slashes when using `theme()` in CSS (#8831) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix lookup of `theme(…)` paths with slashes in them * Update changelog --- CHANGELOG.md | 1 + src/lib/evaluateTailwindFunctions.js | 56 ++++++++++++++++++------- tests/evaluateTailwindFunctions.test.js | 48 +++++++++++++++++++++ 3 files changed, 90 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e85064a6b96..fdad0f12d678 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 - Fix usage on Node 12.x ([b4e637e](https://github.com/tailwindlabs/tailwindcss/commit/b4e637e2e096a9d6f2210efba9541f6fd4f28e56)) +- Handle theme keys with slashes when using `theme()` in CSS ([#8831](https://github.com/tailwindlabs/tailwindcss/pull/8831)) ## [3.1.5] - 2022-07-07 diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js index 4fcfa83d9f47..327581493bb2 100644 --- a/src/lib/evaluateTailwindFunctions.js +++ b/src/lib/evaluateTailwindFunctions.js @@ -157,26 +157,52 @@ let nodeTypePropertyMap = { decl: 'value', } -export default function ({ tailwindConfig: config }) { - let functions = { - theme: (node, path, ...defaultValue) => { - // Strip quotes from beginning and end of string - // This allows the alpha value to be present inside of quotes - path = path.replace(/^['"]+|['"]+$/g, '') +/** + * @param {string} path + * @returns {Iterable<[path: string, alpha: string|undefined]>} + */ +function* toPaths(path) { + // Strip quotes from beginning and end of string + // This allows the alpha value to be present inside of quotes + path = path.replace(/^['"]+|['"]+$/g, '') - let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/) - let alpha = undefined + let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/) + let alpha = undefined - if (matches) { - path = matches[1] - alpha = matches[2] - } + yield [path, undefined] + + if (matches) { + path = matches[1] + alpha = matches[2] + + yield [path, alpha] + } +} - let { isValid, value, error } = validatePath( +/** + * + * @param {any} config + * @param {string} path + * @param {any} defaultValue + */ +function resolvePath(config, path, defaultValue) { + const results = Array.from(toPaths(path)).map(([path, alpha]) => { + return Object.assign(validatePath(config, path, defaultValue, { opacityValue: alpha }), { + resolvedPath: path, + alpha, + }) + }) + + return results.find((result) => result.isValid) ?? results[0] +} + +export default function ({ tailwindConfig: config }) { + let functions = { + theme: (node, path, ...defaultValue) => { + let { isValid, value, error, alpha } = resolvePath( config, path, - defaultValue.length ? defaultValue : undefined, - { opacityValue: alpha } + defaultValue.length ? defaultValue : undefined ) if (!isValid) { diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index b5e97a396a72..b7e630a20bdf 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -1135,3 +1135,51 @@ test('Theme functions with alpha with quotes value around color only', () => { expect(result.warnings().length).toBe(0) }) }) + +it('can find values with slashes in the theme key while still allowing for alpha values ', () => { + let input = css` + .foo00 { + color: theme(colors.foo-5); + } + .foo01 { + color: theme(colors.foo-5/10); + } + .foo02 { + color: theme(colors.foo-5/10/25); + } + .foo03 { + color: theme(colors.foo-5 / 10); + } + .foo04 { + color: theme(colors.foo-5/10 / 25); + } + ` + + return runFull(input, { + theme: { + colors: { + 'foo-5': '#050000', + 'foo-5/10': '#051000', + 'foo-5/10/25': '#051025', + }, + }, + }).then((result) => { + expect(result.css).toMatchCss(css` + .foo00 { + color: #050000; + } + .foo01 { + color: #051000; + } + .foo02 { + color: #051025; + } + .foo03 { + color: rgb(5 0 0 / 10); + } + .foo04 { + color: rgb(5 16 0 / 25); + } + `) + }) +}) From aee196ef4705673788b40071b838d64f3ebabc69 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 11 Jul 2022 15:56:46 -0400 Subject: [PATCH 5/5] 3.1.6 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b5e0641dc342..98254b6ba8d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.1.5", + "version": "3.1.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.1.5", + "version": "3.1.6", "license": "MIT", "dependencies": { "arg": "^5.0.2", diff --git a/package.json b/package.json index 4014cf952020..4490a25a1c47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.1.5", + "version": "3.1.6", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js",