Inject @config "..." when a tailwind.config.{js,ts,...} is detected
#14635
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
thecrypticace
force-pushed
the
feat/codemod-stylesheet-graphs
branch
from
efe9ac4 to
faed6a8
Compare
thecrypticace
force-pushed
the
feat/codemod-inject-at-config
branch
from
f5978b6 to
b406485
Compare
thecrypticace
force-pushed
the
feat/codemod-stylesheet-graphs
branch
from
1b2705f to
bc60358
Compare
thecrypticace
force-pushed
the
feat/codemod-inject-at-config
branch
from
b406485 to
7a39ad7
Compare
thecrypticace
force-pushed
the
feat/codemod-stylesheet-graphs
branch
from
bc60358 to
15bea44
Compare
thecrypticace
force-pushed
the
feat/codemod-inject-at-config
branch
2 times, most recently
from
088e23f to
bfcbcb5
Compare
packages/@tailwindcss-upgrade/src/codemods/migrate-at-config.ts
Outdated
Show resolved
Hide resolved
packages/@tailwindcss-upgrade/src/codemods/migrate-at-config.ts
Outdated
Show resolved
Hide resolved
RobinMalfait
force-pushed
the
feat/codemod-inject-at-config
branch
from
cf0be89 to
f1513ab
Compare
Comment on lines
39
to
42
| // Inject the `@config` in a sensible place | ||
| // 1. Above the first `@theme` | ||
| // 2. Below the last `@import` | ||
| // 3. At the top of the file |
There was a problem hiding this comment.
This is going to be the place for adding the CSS config if we can migrate the JS config. Maybe we can make the "what is injected" here dynamic so we can decide in the JS config migrator what we need in the css?
There was a problem hiding this comment.
Yep I think once this PR is merged that we can abstract this to a function if we want. Not sure if that's necessary for this PR yet.
There might be some additional logic where we might want to control the order of @config, @theme, injected @variants and so on.
There was a problem hiding this comment.
Haha yep I would need it right away, let's pair on this afterwards 👍
thecrypticace
force-pushed
the
feat/codemod-stylesheet-graphs
branch
from
15bea44 to
589d0e8
Compare
thecrypticace
force-pushed
the
feat/codemod-inject-at-config
branch
from
d242cca to
baa6ffb
Compare
integrations/upgrade/index.test.ts
Outdated
|
|
||
| --- ./src/input.css --- | ||
| @import 'tailwindcss'; | ||
| @config "../tailwind.config.js";" |
There was a problem hiding this comment.
Suggested change
| @config "../tailwind.config.js";" | |
| @config "../tailwind.config.js"; |
Inject the `@config` in a sensible place: 1. Above the first `@theme` 2. Below the last `@import` 3. At the top of the file
If you have a setup where you have an index.css file, which in turn imports 2 new files with Tailwind CSS imports. In that case we want to inject the `@config` into the root, not in the individual files. Input: ``` --- ./src/root.4.css --- /* Inject missing @config due to nested imports with tailwind imports */ @import './root.4/base.css'; @import './root.4/utilities.css'; --- ./src/root.4/base.css --- @import 'tailwindcss/base'; --- ./src/root.4/utilities.css --- @import 'tailwindcss/utilities'; ``` Output: ``` --- ./src/root.4.css --- /* Inject missing @config due to nested imports with tailwind imports */ @import './root.4/base.css'; @import './root.4/utilities.css'; @config "../tailwind.config.ts"; --- ./src/root.4/base.css --- @import 'tailwindcss/theme' layer(theme); @import 'tailwindcss/preflight' layer(base); --- ./src/root.4/utilities.css --- @import 'tailwindcss/utilities' layer(utilities);" ```
This is the same setup as in `./packages/@tailwindcss-vite/src/index.ts`
If a non-root file contains `@import "tailwindcss"` (without its individual imports), then we can inject the `@config` in this file as well. This makes it more co-located with where you setup Tailwind CSS
This reverts commit d40e230.
thecrypticace
force-pushed
the
feat/codemod-inject-at-config
branch
from
baa6ffb to
754190e
Compare
If not, some files could look weird: ``` @import "tailwind.css";" ``` Which feels wrong, but the last `"` is coming from the `toMatchInlineSnapshot()` function.
thecrypticace
approved these changes
Oct 10, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR injects a
@config "…"in the CSS file if a JS based config has been found.We will try to inject the
@configin a sensible place:@theme@import