diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index d2e6d577577d..c346af61fff7 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -17,7 +17,7 @@ jobs: permissions: contents: write # for softprops/action-gh-release to create GitHub release - runs-on: macos-11 + runs-on: macos-12 timeout-minutes: 15 strategy: diff --git a/CHANGELOG.md b/CHANGELOG.md index 670daf5fd0d6..2b50934dd8c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Nothing yet! +## [3.4.5] - 2024-07-15 + +### Fixed + +- Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826)) +- Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830)) +- Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940)) +- Don't generate utilities like `px-1` unnecessarily when using utilities like `px-1.5` ([#13959](https://github.com/tailwindlabs/tailwindcss/pull/13959)) +- Always generate `-webkit-backdrop-filter` for `backdrop-*` utilities ([#13997](https://github.com/tailwindlabs/tailwindcss/pull/13997)) + ## [3.4.4] - 2024-06-05 ### Fixed @@ -2385,7 +2395,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.4...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.5...HEAD +[3.4.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.4...v3.4.5 [3.4.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.3...v3.4.4 [3.4.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.2...v3.4.3 [3.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.1...v3.4.2 diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index b53f8afaf388..31b362353fbf 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -134,51 +134,54 @@ describe('static build', () => { ) }) - it('can use a tailwind.config.ts configuration file', async () => { - await removeFile('tailwind.config.js') - await writeInputFile('index.html', html`
`) - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - ) - await writeInputFile( - '../tailwind.config.ts', - javascript` - import type { Config } from 'tailwindcss' - - export default { - content: ['./src/index.html'], - theme: { - extend: { - colors: { - primary: 'black', + it.each([['../tailwind.config.ts'], ['../tailwind.config.cts'], ['../tailwind.config.mts']])( + 'can use a %s configuration file', + async (path) => { + await removeFile('tailwind.config.js') + await writeInputFile('index.html', html`
`) + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + ) + await writeInputFile( + path, + javascript` + import type { Config } from 'tailwindcss' + + export default { + content: ['./src/index.html'], + theme: { + extend: { + colors: { + primary: 'black', + }, }, }, - }, - corePlugins: { - preflight: false, - }, - } satisfies Config - ` - ) - - await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', { - env: { NODE_ENV: 'production' }, - }) - - expect(await readOutputFile('main.css')).toIncludeCss( - css` - .bg-primary { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - } - ` - ) - }) + corePlugins: { + preflight: false, + }, + } satisfies Config + ` + ) + + await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', { + env: { NODE_ENV: 'production' }, + }) + + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .bg-primary { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + ` + ) + } + ) it('can read from a config file from an @config directive', async () => { await writeInputFile('index.html', html`
`) diff --git a/package-lock.json b/package-lock.json index bc61763c0b42..d649fab92f7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.4.4", + "version": "3.4.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.4.4", + "version": "3.4.5", "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", diff --git a/package.json b/package.json index 638bf88a41dc..3c5d64a89a73 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.4.4", + "version": "3.4.5", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/src/corePlugins.js b/src/corePlugins.js index 0c3f96b1751f..f3441f4b88a3 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -412,7 +412,7 @@ export let variantPlugins = { let check = normalize(value) let isRaw = /^\w*\s*\(/.test(check) - // Chrome has a bug where `(condtion1)or(condition2)` is not valid + // Chrome has a bug where `(condition1)or(condition2)` is not valid // But `(condition1) or (condition2)` is supported. check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check @@ -2596,7 +2596,7 @@ export let corePlugins = { { blur: (value) => { return { - '--tw-blur': `blur(${value})`, + '--tw-blur': value.trim() === '' ? ' ' : `blur(${value})`, '@defaults filter': {}, filter: cssFilterValue, } @@ -2751,8 +2751,9 @@ export let corePlugins = { { 'backdrop-blur': (value) => { return { - '--tw-backdrop-blur': `blur(${value})`, + '--tw-backdrop-blur': value.trim() === '' ? ' ' : `blur(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2768,6 +2769,7 @@ export let corePlugins = { return { '--tw-backdrop-brightness': `brightness(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2783,6 +2785,7 @@ export let corePlugins = { return { '--tw-backdrop-contrast': `contrast(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2798,6 +2801,7 @@ export let corePlugins = { return { '--tw-backdrop-grayscale': `grayscale(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2813,6 +2817,7 @@ export let corePlugins = { return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2828,6 +2833,7 @@ export let corePlugins = { return { '--tw-backdrop-invert': `invert(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2843,6 +2849,7 @@ export let corePlugins = { return { '--tw-backdrop-opacity': `opacity(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2858,6 +2865,7 @@ export let corePlugins = { return { '--tw-backdrop-saturate': `saturate(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2873,6 +2881,7 @@ export let corePlugins = { return { '--tw-backdrop-sepia': `sepia(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2896,9 +2905,13 @@ export let corePlugins = { addUtilities({ '.backdrop-filter': { '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, }, - '.backdrop-filter-none': { 'backdrop-filter': 'none' }, + '.backdrop-filter-none': { + '-webkit-backdrop-filter': 'none', + 'backdrop-filter': 'none', + }, }) }, diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js index 27e30fb9a621..fdcd8dd5d214 100644 --- a/src/lib/defaultExtractor.js +++ b/src/lib/defaultExtractor.js @@ -1,4 +1,5 @@ import * as regex from './regex' +import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly' export function defaultExtractor(context) { let patterns = Array.from(buildRegExps(context)) @@ -16,6 +17,30 @@ export function defaultExtractor(context) { } } + // Extract any subclasses from languages like Slim and Pug, eg: + // div.flex.px-5.underline + for (let result of results.slice()) { + let segments = splitAtTopLevelOnly(result, '.') + + for (let idx = 0; idx < segments.length; idx++) { + let segment = segments[idx] + if (idx >= segments.length - 1) { + results.push(segment) + continue + } + + // If the next segment is a number, discard both, for example seeing + // `px-1` and `5` means the real candidate was `px-1.5` which is already + // captured. + let next = parseInt(segments[idx + 1]) + if (isNaN(next)) { + results.push(segment) + } else { + idx++ + } + } + } + return results } } @@ -127,9 +152,6 @@ function* buildRegExps(context) { utility, ]) } - - // 5. Inner matches - yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g } // We want to capture any "special" characters diff --git a/src/lib/load-config.ts b/src/lib/load-config.ts index eab7d348ee43..eaff8e95b410 100644 --- a/src/lib/load-config.ts +++ b/src/lib/load-config.ts @@ -33,6 +33,17 @@ function lazyJiti() { export function loadConfig(path: string): Config { let config = (function () { + // Always use jiti for ESM or TS files + if ( + path && + (path.endsWith('.mjs') || + path.endsWith('.ts') || + path.endsWith('.cts') || + path.endsWith('.mts')) + ) { + return lazyJiti()(path) + } + try { return path ? require(path) : {} } catch { diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js index 9984a055eb24..85bdbd2059de 100644 --- a/src/util/dataTypes.js +++ b/src/util/dataTypes.js @@ -19,6 +19,7 @@ function isCSSFunction(value) { // More info: // - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope // - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident +// - https://www.w3.org/TR/css-anchor-position-1 // const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([ // Concrete properties @@ -26,11 +27,16 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([ 'timeline-scope', 'view-timeline-name', 'font-palette', + 'anchor-name', + 'anchor-scope', + 'position-anchor', + 'position-try-options', // Shorthand properties 'scroll-timeline', 'animation-timeline', 'view-timeline', + 'position-try', ]) // This is not a data type, but rather a function that can normalize the diff --git a/src/util/normalizeConfig.js b/src/util/normalizeConfig.js index 7e1a592decda..9600b3b2c625 100644 --- a/src/util/normalizeConfig.js +++ b/src/util/normalizeConfig.js @@ -274,9 +274,7 @@ export function normalizeConfig(config) { if (typeof transform === 'function') { transformers.DEFAULT = transform - } - - if (typeof transform === 'object' && transform !== null) { + } else if (typeof transform === 'object' && transform !== null) { Object.assign(transformers, transform) } diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js index 990e7aa8c8bc..85b27cb3b3cc 100644 --- a/src/util/parseAnimationValue.js +++ b/src/util/parseAnimationValue.js @@ -13,7 +13,7 @@ const TIMINGS = new Set([ ]) const TIMING_FNS = ['cubic-bezier', 'steps'] -const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count. +const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubic-bezier(a, b, c)` these don't count. const SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead. const TIME = /^(-?[\d.]+m?s)$/ const DIGIT = /^(\d+)$/ diff --git a/src/util/parseGlob.js b/src/util/parseGlob.js index 5c03f413d7e2..e1559807238f 100644 --- a/src/util/parseGlob.js +++ b/src/util/parseGlob.js @@ -15,8 +15,7 @@ export function parseGlob(pattern) { if (glob.substr(0, 2) === './') { glob = glob.substr(2) - } - if (glob.charAt(0) === '/') { + } else if (glob.charAt(0) === '/') { glob = glob.substr(1) } diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js index 2b5078949761..e082f4c38e60 100644 --- a/src/util/resolveConfigPath.js +++ b/src/util/resolveConfigPath.js @@ -6,6 +6,8 @@ const defaultConfigFiles = [ './tailwind.config.cjs', './tailwind.config.mjs', './tailwind.config.ts', + './tailwind.config.cts', + './tailwind.config.mts', ] function isObject(value) { diff --git a/src/util/splitAtTopLevelOnly.js b/src/util/splitAtTopLevelOnly.js index a749c7932ed9..62e55b6cf4c5 100644 --- a/src/util/splitAtTopLevelOnly.js +++ b/src/util/splitAtTopLevelOnly.js @@ -29,11 +29,7 @@ export function splitAtTopLevelOnly(input, separator) { } } - if (isEscaped) { - isEscaped = false - } else if (char === '\\') { - isEscaped = true - } + isEscaped = isEscaped ? false : char === '\\' if (char === '(' || char === '[' || char === '{') { stack.push(char) diff --git a/standalone-cli/package-lock.json b/standalone-cli/package-lock.json index b2520c81b874..f080054b6088 100644 --- a/standalone-cli/package-lock.json +++ b/standalone-cli/package-lock.json @@ -25,7 +25,7 @@ }, "..": { "name": "tailwindcss", - "version": "3.4.4", + "version": "3.4.5", "dev": true, "license": "MIT", "dependencies": { diff --git a/stubs/config.full.js b/stubs/config.full.js index 8eddd48984ba..cced152587ee 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -70,7 +70,7 @@ module.exports = { }, blur: { 0: '0', - none: '0', + none: '', sm: '4px', DEFAULT: '8px', md: '12px', diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 5a03f38dbf1b..32d7110828a8 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1055,54 +1055,81 @@ } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-\[1\.23\] { --tw-backdrop-brightness: brightness(1.23); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-\[0\.87\] { --tw-backdrop-contrast: contrast(0.87); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale-\[0\.42\] { --tw-backdrop-grayscale: grayscale(0.42); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-\[1\.57rad\] { --tw-backdrop-hue-rotate: hue-rotate(1.57rad); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert-\[0\.66\] { --tw-backdrop-invert: invert(0.66); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-\[22\%\] { --tw-backdrop-opacity: opacity(22%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-\[144\%\] { --tw-backdrop-saturate: saturate(144%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia-\[0\.38\] { --tw-backdrop-sepia: sepia(0.38); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1144,4 +1171,3 @@ grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } } - diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 49107dd91db7..57b887d6d4b6 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -974,6 +974,11 @@ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.blur-none { + --tw-blur: ; + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} .brightness-150 { --tw-brightness: brightness(1.5); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) @@ -1027,6 +1032,12 @@ var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-blur-none { + --tw-backdrop-blur: ; + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index bde7df67d93d..df41b849c582 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -129,7 +129,7 @@ test('basic usage', () => {
{ expect(extractions).toContain('text-gray-500') }) +test("classes with fractional numeric values don't also generate the whole number utility", async () => { + const extractions = defaultExtractor(` +
Hello world!
+ `) + + expect(extractions).toContain('px-1.5') + expect(extractions).toContain('py-2.75') + expect(extractions).not.toContain('px-1') + expect(extractions).not.toContain('5') + expect(extractions).not.toContain('py-2') + expect(extractions).not.toContain('75') +}) + test('multi-word + arbitrary values + quotes', async () => { const extractions = defaultExtractor(` grid-cols-['repeat(2)'] diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js index 224203ffe14c..ba995f43006f 100644 --- a/tests/normalize-data-types.test.js +++ b/tests/normalize-data-types.test.js @@ -112,7 +112,18 @@ it('should not automatically inject the `var()` for properties that accept ` { expect(result.css).toMatchFormattedCss(css` + .\[anchor-name\:--foo\] { + anchor-name: --foo; + } + .\[anchor-scope\:--foo\] { + anchor-scope: --foo; + } + .\[animation-timeline\:--foo\] { + animation-timeline: --foo; + } .\[color\:--foo\] { color: var(--foo); } - + .\[font-palette\:--foo\] { + font-palette: --foo; + } + .\[position-anchor\:--foo\] { + position-anchor: --foo; + } + .\[position-try-options\:--foo\] { + position-try-options: --foo; + } + .\[position-try\:--foo\] { + position-try: --foo; + } + .\[scroll-timeline-name\:--foo\] { + scroll-timeline-name: --foo; + } + .\[scroll-timeline\:--foo\] { + scroll-timeline: --foo; + } .\[timeline-scope\:--foo\] { timeline-scope: --foo; } + .\[view-timeline-name\:--foo\] { + view-timeline-name: --foo; + } + .\[view-timeline\:--foo\] { + view-timeline: --foo; + } `) }) })