Support loading config files via `@config` #14239

thecrypticace · 2024-08-22T20:15:54Z

In Tailwind v4 the CSS file is the main entry point to your project and is generally configured via @theme. However, given that all v3 projects were configured via a tailwind.config.js file we definitely need to support those. This PR adds support for loading existing Tailwind config files by adding an @config directive to the CSS — similar to how v3 supported multiple config files except that this is now required to use a config file.

You can load a config file like so:

@import "tailwindcss";
@config "./path/to/tailwind.config.js";

A few notes:

Both CommonJS and ESM config files are supported (loaded directly via import() in Node)
This is not yet supported in Intellisense or Prettier — should hopefully land next week
TypeScript is not yet supported in the config file — this will be handled in a future PR.

packages/@tailwindcss-node/src/get-module-dependencies.ts

packages/tailwindcss/src/compat/config/resolve-config.ts

packages/tailwindcss/src/compat/merge-into-theme.ts

packages/tailwindcss/src/index.ts

packages/@tailwindcss-node/src/esm-cache.hook.mts

adamwathan

Amazing work getting this working dudes! 🤩 This is a beefy one so I think would be best to do a real review together on a call on Monday morning.

adamwathan · 2024-08-31T00:10:29Z

packages/@tailwindcss-cli/src/commands/build/index.ts

+        let resolvedPath = path.resolve(inputBasePath, pluginPath)
+        fullRebuildPaths.push(Promise.resolve([resolvedPath]))
+        fullRebuildPaths.push(getModuleDependencies(resolvedPath))
+        return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then(


What does the query string stuff do here?

It serves as a way to "bust" the cache for the file. ESM doesn't have the equivalent of a require cache in Node so we have to use this to ensure the file is loaded fresh.

adamwathan · 2024-08-31T00:13:23Z

packages/@tailwindcss-cli/src/commands/build/index.ts

+        if (configPath[0] !== '.') {
+          return import(configPath).then((m) => m.default ?? m)
        }

-        return import(pluginPath).then((m) => m.default ?? m)
+        let resolvedPath = path.resolve(inputBasePath, configPath)
+        fullRebuildPaths.push(Promise.resolve([resolvedPath]))
+        fullRebuildPaths.push(getModuleDependencies(resolvedPath))
+        return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then(
+          (m) => m.default ?? m,
+        )


This looks identical to the code for loading plugins, makes me wonder if we should either extract this so we don't have to keep it in sync, or if we should replace loadPlugin and loadConfig with something else that makes more sense, like maybe that's not what we're actually doing here and it's more about loading JS or resolving a module or some other terminology? Not sure 🤔

We talked about exactly this and were both wondering the same thing. I think we can pretty likely merge these two — only thing is if we want to handle errors differently or something.

adamwathan · 2024-08-31T00:14:29Z

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -128,17 +132,34 @@ export async function handle(args: Result<ReturnType<typeof options>>) {

  let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd()
  let inputBasePath = path.dirname(path.resolve(inputFile))
+  let fullRebuildPaths: Promise<string[]>[] = [Promise.resolve(cssImportPaths)]


Do we need to make this an array of arrays just because we want to store these promises before they are resolved and we have no way to store it as a flat list in the first place? Seems fine if so but weird quirk if it's not actually necessary.

yeah it's because we want to store the promises to be resolved later. Maybe there's something else we could do here though. 🤔

adamwathan · 2024-08-31T01:34:48Z

packages/@tailwindcss-node/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tailwindcss/node",


Could this be an internal package like some of our others or do we need to actually publish it?

I think it needs to be because of how the import works otherwise we'll have to duplicate these files into each package + configure the exports (which is something we could do — I just think it's probably a worse tradeoff)

packages/@tailwindcss-node/src/get-module-dependencies.ts

philipp-spiess · 2024-09-02T09:00:16Z

packages/tailwindcss/src/index.ts

+  for (let file of resolvedConfig.content.files) {
+    if ('raw' in file) {
+      throw new Error(
+        `Error in the config file/plugin/preset. The \`content\` key contains a \`raw\` entry:\n\n${JSON.stringify(file, null, 2)}\n\nThis feature is not currently supported.`,
+      )
+    }
+
+    globs.push(file.pattern)
+  }


Note that this currently throws away file.base. We'll be fixing this up with another change briefly.

packages/@tailwindcss-node/package.json

packages/@tailwindcss-node/src/esm-cache.loader.mts

packages/@tailwindcss-node/src/get-module-dependencies.ts

packages/@tailwindcss-node/src/require-cache.cts

packages/@tailwindcss-node/src/get-module-dependencies.ts

packages/tailwindcss/src/compat/config.test.ts

packages/tailwindcss/src/compat/dark-mode.ts

…dencies between our clients

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

CHANGELOG.md

To make TypeScript more happy.

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

Builds on #14239 — that PR needs to be merged first. This PR allows plugins defined with `plugin.withOptions` to receive options in CSS when using `@plugin` as long as the options are simple key/value pairs. For example, the following is now valid and will include the forms plugin with only the base styles enabled: ```css @plugin "@tailwindcss/forms" { strategy: base; } ``` We handle `null`, `true`, `false`, and numeric values as expected and will convert them to their JavaScript equivalents. Comma separated values are turned into arrays. All other values are converted to strings. For example, in the following plugin definition, the options that are passed to the plugin will be the correct types: - `debug` will be the boolean value `true` - `threshold` will be the number `0.5` - `message` will be the string `"Hello world"` - `features` will be the array `["base", "responsive"]` ```css @plugin "my-plugin" { debug: false; threshold: 0.5; message: Hello world; features: base, responsive; } ``` If you need to pass a number or boolean value as a string, you can do so by wrapping the value in quotes: ```css @plugin "my-plugin" { debug: "false"; threshold: "0.5"; message: "Hello world"; } ``` When duplicate options are encountered the last value wins: ```css @plugin "my-plugin" { message: Hello world; message: Hello plugin; /* this will be the value of `message` */ } ``` It's important to note that this feature is **only available for plugins defined with `plugin.withOptions`**. If you try to pass options to a plugin that doesn't support them, you'll get an error message when building: ```css @plugin "my-plugin" { debug: false; threshold: 0.5; } /* Error: The plugin "my-plugin" does not accept options */ ``` Additionally, if you try to pass in more complex values like objects or selectors you'll get an error message: ```css @plugin "my-plugin" { color: { red: 100; green: 200; blue: 300 }; } /* Error: Objects are not supported in `@plugin` options. */ ``` ```css @plugin "my-plugin" { .some-selector > * { primary: "blue"; secondary: "green"; } } /* Error: `@plugin` can only contain declarations. */ ``` --------- Co-authored-by: Philipp Spiess <hello@philippspiess.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

…uilds (#14269) Fixes #14205 Fixes #14106 This PR reworks the Vite extension in order to supprt `lightningcss` as the pre-processor, enable faster rebuilds, and adds support for `vite build --watch` mode. To make this change possible, we've done two major changes to the extension that have caused the other changes. ## 1. Tailwind CSS is a preprocessor We now run all of our modifications in `enforce: 'pre'`. This means that Tailwind CSS now gets the untransformed CSS files rather than the one already going through postcss or lightningcss. We do this because Tailwind CSS _is_ a preprocessor at the same level as those tools and we do sometimes use the language in ways that [creates problems when it's the input for other bundlers](#14269). The correct solution here is to make Tailwind not depend on any other transformations. The main reason we were not using the `enforce: 'pre'` phase in Vite before was becuase we relied on the `@import` flattening of postcss so we now have to do this manually. `@import` flattening is now a concern that every Tailwind V4 client has to deal with so this might actually be something we want to inline into tailwindcss in the future. ## 2. A Vite config can have multiple Tailwind roots This is something that we have not made very explicit in the previous iteration of the Vite plugin but we have to support multiple Tailwind roots in a single Vite workspace. A Tailwind root is a CSS file that is used to configure Tailwind. Technically, any CSS file can be the input for `tailwindcss` but you have to add certain rules (e.g. `@import "tailwindcss";`) to make the compiler do something. A workspace can have multiple of these rules (e.g. by having different Tailwind configures for different sub-pages). With the addition of [support for `@source` rules](#14078) and [JS config files](#14239), Tailwind roots become more complex and can have a custom list of _dependencies_ (that is other JavaScript modules the compiler includes as part of these new rules). In order to _only rebuild the roots we need to_, we have to make this separation very clear. --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me> Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

thecrypticace requested a review from philipp-spiess August 23, 2024 09:46

philipp-spiess reviewed Aug 23, 2024

View reviewed changes

philipp-spiess force-pushed the feat/v4-config-files branch from 7f1ea32 to 514d27d Compare August 26, 2024 14:39

philipp-spiess marked this pull request as ready for review August 26, 2024 14:59

philipp-spiess requested a review from adamwathan August 26, 2024 14:59

thecrypticace mentioned this pull request Aug 26, 2024

Support plugin options in CSS #14264

Merged

philipp-spiess reviewed Aug 29, 2024

View reviewed changes

packages/@tailwindcss-node/src/esm-cache.hook.mts Outdated Show resolved Hide resolved

philipp-spiess mentioned this pull request Aug 30, 2024

Rework Vite plugin to support lightningcss pre processor and fast rebuilds #14269

Merged

adamwathan reviewed Aug 31, 2024

View reviewed changes

philipp-spiess reviewed Sep 2, 2024

View reviewed changes

RobinMalfait reviewed Sep 2, 2024

View reviewed changes

thecrypticace added 19 commits September 2, 2024 15:53

Use resolveConfig to normalize plugins

7f5ee2c

Add support for presets

542a2a3

Allow resolve config to take in optional paths alongside configs

a54bf8a

Add config helper

d2dbc3f

Load config files via @config directive

08a7501

Merge sources from config files

75576d0

Allow configuring dark mode from configs

0a9edd3

Add config test

444b238

Work on theme value merging

40caaa7

Ensure CSS variants and utilities always take precedence

81e0ee9

Format code

4fa5945

prettier

4228903

wip

921cf8e

Handle inline theme keys in resolveWith

74b607e

Update tests

967ea3b

Upgrade merged theme keys from colors.* to color-*

67c1dc1

Add integration tests

6c0b9b1

update test

2f5b108

wip

f4abaed

philipp-spiess and others added 15 commits September 2, 2024 15:53

Add the @tailwindcss/node module to handle shared node specific depen…

f7e1c84

…dencies between our clients

WIP

97d6103

Fix js config file and plugin dependnecy rebuilds for vite

07e79aa

Revert change to integrations/postcss/index.test.ts

cdadd63

Fix esm cache hook for esm usage with vitest

294a4b1

Only reset the require cache for build dependencies

7d7c0f7

Add the same workaround for postcss esm

439f8b0

Make getModuleDependencies async

7d97d94

Make the ESM cache hook ESM-only

3ab5c82

Don't block on module dependency resolution

359fb31

Rename to applyConfigToTheme

e75e99a

Rename resolveInternal to extractConfigs

b6f434f

Add change log and improve error messages

8661ec2

Do not register ESM hook in Bun

b1b960d

Fix typo

44ad8ce

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

philipp-spiess force-pushed the feat/v4-config-files branch from ff3554d to ae63a57 Compare September 2, 2024 13:57

Adress PR feedback

3a8dd7a

philipp-spiess force-pushed the feat/v4-config-files branch from ae63a57 to 3a8dd7a Compare September 2, 2024 13:58

adamwathan reviewed Sep 2, 2024

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

RobinMalfait and others added 6 commits September 2, 2024 17:18

move common loadPlugin and loadConfig to @tailwindcss/node

0da9884

ignore dynamic import

b7266fb

To make TypeScript more happy.

inline esm-cache-hook, and generate CJS and ESM separately

aa32928

Update CHANGELOG.md

46c304b

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

loop over files instead of characters

16d174e

cleanup CHANGELOG

eb23b17

RobinMalfait approved these changes Sep 2, 2024

View reviewed changes

RobinMalfait merged commit 52012d9 into next Sep 2, 2024
3 checks passed

RobinMalfait deleted the feat/v4-config-files branch September 2, 2024 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support loading config files via `@config` #14239

Support loading config files via `@config` #14239

thecrypticace commented Aug 22, 2024

adamwathan left a comment

adamwathan Aug 31, 2024

thecrypticace Sep 1, 2024

adamwathan Aug 31, 2024

thecrypticace Sep 1, 2024

adamwathan Aug 31, 2024

thecrypticace Sep 1, 2024

adamwathan Aug 31, 2024

thecrypticace Sep 1, 2024

philipp-spiess Sep 2, 2024

Support loading config files via @config #14239

Support loading config files via @config #14239

Conversation

thecrypticace commented Aug 22, 2024

adamwathan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Support loading config files via `@config` #14239

Support loading config files via `@config` #14239