Expose flattenColorPalette (#15318)

Resolves #15315 

It looks like we implemented this in Core but forgot to expose it from
the distributed package (the references are only used for testing
plugins internally right now). This exposes `flattenColorPalette` under
the old import path of `tailwindcss/lib/util/flattenColorPalette`.

## Test Plan

Added the following plugin to the Vite example and ensured it works as
expected:

```ts
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
import plugin from 'tailwindcss/plugin'

export default plugin(({ matchUtilities, theme }) => {
  matchUtilities(
    {
      'hover-bg': (value) => {
        return {
          '&:hover': {
            backgroundColor: value,
          },
        }
      },
    },
    { values: flattenColorPalette(theme('colors')) },
  )
})
```

<img width="462" alt="Screenshot 2024-12-06 at 11 47 44"
src="https://github.com/user-attachments/assets/11163390-053e-4c6e-8cb9-ae67184ad594">
This commit is contained in:
Philipp Spiess 2024-12-09 11:33:19 +01:00 • committed by GitHub
parent 94a3cff687
commit a7ebc9cda1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 28 additions and 5 deletions

View file

@ -7,14 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
- Nothing yet!
### Added
- Add support for `tailwindcss/lib/util/flattenColorPalette` exports ([#15318](https://github.com/tailwindlabs/tailwindcss/pull/15318))
### Fixed
- Fix dependency related warnings when using `@tailwindcss/postcss` on Windows ([#15321](https://github.com/tailwindlabs/tailwindcss/pull/15321))
## [4.0.0-beta.6] - 2024-12-06
### Fixed
- Ensure `@import "…" reference` never generates utilities ([#15307](https://github.com/tailwindlabs/tailwindcss/pull/15307))
- Fix dependency related warnings when using `@tailwindcss/postcss` on Windows
## [4.0.0-beta.5] - 2024-12-04

View file

@ -31,6 +31,10 @@
"require": "./src/compat/colors.cts",
"import": "./src/compat/colors.ts"
},
"./lib/util/flattenColorPalette": {
"require": "./src/compat/flatten-color-palette.cts",
"import": "./src/compat/flatten-color-palette.ts"
},
"./defaultTheme": {
"require": "./src/compat/default-theme.cts",
"import": "./src/compat/default-theme.ts"
@ -91,6 +95,10 @@
"require": "./dist/colors.js",
"import": "./dist/colors.mjs"
},
"./lib/util/flattenColorPalette": {
"require": "./dist/flatten-color-palette.js",
"import": "./dist/flatten-color-palette.mjs"
},
"./package.json": "./package.json",
"./index.css": "./index.css",
"./index": "./index.css",

View file

@ -1,7 +1,7 @@
import { describe, expect, test, vi } from 'vitest'
import { compile, type Config } from '..'
import { default as plugin } from '../plugin'
import { flattenColorPalette } from './flatten-color-palette'
import flattenColorPalette from './flatten-color-palette'
const css = String.raw

View file

@ -0,0 +1,8 @@
import flattenColorPalette from './flatten-color-palette.ts'
// This file exists so that `flatten-color-palette.ts` can be written one time
// but be compatible with both CJS and ESM. Without it we get a `.default`
// export when using `require` in CJS.
// @ts-ignore
export = flattenColorPalette

View file

@ -1,5 +1,5 @@
import { expect, test } from 'vitest'
import { flattenColorPalette } from './flatten-color-palette'
import flattenColorPalette from './flatten-color-palette'
test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
expect(

View file

@ -4,7 +4,7 @@ type Colors = {
[key: string | number]: string | Colors
}
export function flattenColorPalette(colors: Colors) {
export default function flattenColorPalette(colors: Colors) {
let result: Record<string, string> = {}
for (let [root, children] of Object.entries(colors ?? {})) {

View file

@ -10,6 +10,7 @@ export default defineConfig([
plugin: 'src/plugin.ts',
colors: 'src/compat/colors.ts',
'default-theme': 'src/compat/default-theme.ts',
'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
},
},
{
@ -21,6 +22,7 @@ export default defineConfig([
lib: 'src/index.cts',
colors: 'src/compat/colors.cts',
'default-theme': 'src/compat/default-theme.cts',
'flatten-color-palette': 'src/compat/flatten-color-palette.cts',
},
},
])