Add @content support to @tailwindcss/vite
#14076
Merged
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
RobinMalfait
changed the title
@content in @tailwindcss/vite@content support to @tailwindcss/cli
RobinMalfait
changed the title
@content support to @tailwindcss/cli@content support to @tailwindcss/vite
philipp-spiess
approved these changes
Jul 29, 2024
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
from
5701019
to
619c5ec
Compare
RobinMalfait
changed the base branch from
feat/content-path-cli-watch-mode
to
feat/add-content-support-to-core
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
2 times, most recently
from
2710729
to
105293e
Compare
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
2 times, most recently
from
3666bc3
to
fabad24
Compare
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
97683da
to
1c1bbca
Compare
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
from
fabad24
to
549dcee
Compare
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
1c1bbca
to
fb8228e
Compare
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
from
549dcee
to
60849b4
Compare
Base automatically changed from
feat/add-content-support-to-core
to
feat/add-content-support
August 1, 2024 16:00
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
from
60849b4
to
f42e3ed
Compare
philipp-spiess
force-pushed
the
feat/add-content-support
branch
from
f2cd0b3
to
06f4d62
Compare
RobinMalfait
force-pushed
the
feat/content-path-vite
branch
from
f42e3ed
to
54087b9
Compare
philipp-spiess
force-pushed
the
feat/add-content-support
branch
from
9579da7
to
0f2425d
Compare
Vite exposes an `addWatchFile` function that passes the passed in contents directly to `chokidar`. Because of this, passing in globs just work as well.
philipp-spiess
force-pushed
the
feat/content-path-vite
branch
from
54087b9
to
44780ad
Compare
philipp-spiess
force-pushed
the
feat/content-path-vite
branch
3 times, most recently
from
401bb71
to
f54dc33
Compare
philipp-spiess
force-pushed
the
feat/content-path-vite
branch
from
f54dc33
to
cad839e
Compare
philipp-spiess
force-pushed
the
feat/content-path-vite
branch
4 times, most recently
from
aa32a3a
to
0ab64f9
Compare
philipp-spiess
force-pushed
the
feat/content-path-vite
branch
from
0ab64f9
to
caa00b6
Compare
RobinMalfait
added a commit
that referenced
this pull request
Aug 7, 2024
This PR makes sure that when you use `@content`, that these files are also being watched if you are using Vite. In Vite we rely on the module graph instead, but sometimes it can be useful to watch files outside of the module graph. E.g.: A Laravel project, where you are watching `*.blade.php` files. --------- Co-authored-by: Philipp Spiess <[email protected]>
RobinMalfait
added a commit
that referenced
this pull request
Aug 7, 2024
This PR is an umbrella PR where we will add support for the new `@source` directive. This will allow you to add explicit content glob patterns if you want to look for Tailwind classes in other files that are not automatically detected yet. Right now this is an addition to the existing auto content detection that is automatically enabled in the `@tailwindcss/postcss` and `@tailwindcss/cli` packages. The `@tailwindcss/vite` package doesn't use the auto content detection, but uses the module graph instead. From an API perspective there is not a lot going on. There are only a few things that you have to know when using the `@source` directive, and you probably already know the rules: 1. You can use multiple `@source` directives if you want. 2. The `@source` accepts a glob pattern so that you can match multiple files at once 3. The pattern is relative to the current file you are in 4. The pattern includes all files it is matching, even git ignored files 1. The motivation for this is so that you can explicitly point to a `node_modules` folder if you want to look at `node_modules` for whatever reason. 6. Right now we don't support negative globs (starting with a `!`) yet, that will be available in the near future. Usage example: ```css /* ./src/input.css */ @import "tailwindcss"; @source "../laravel/resources/views/**/*.blade.php"; @source "../../packages/monorepo-package/**/*.js"; ``` It looks like the PR introduced a lot of changes, but this is a side effect of all the other plumbing work we had to do to make this work. For example: 1. We added dedicated integration tests that run on Linux and Windows in CI (just to make sure that all the `path` logic is correct) 2. We Have to make sure that the glob patterns are always correct even if you are using `@import` in your CSS and use `@source` in an imported file. This is because we receive the flattened CSS contents where all `@import`s are inlined. 3. We have to make sure that we also listen for changes in the files that match any of these patterns and trigger a rebuild. PRs: - [x] #14063 - [x] #14085 - [x] #14079 - [x] #14067 - [x] #14076 - [x] #14080 - [x] #14127 - [x] #14135 Once all the PRs are merged, then this umbrella PR can be merged. > [!IMPORTANT] > Make sure to merge this without rebasing such that each individual PR ends up on the main branch. --------- Co-authored-by: Philipp Spiess <[email protected]> Co-authored-by: Jordan Pittman <[email protected]> Co-authored-by: Adam Wathan <[email protected]>
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 makes sure that when you use
@content, that these files are also being watched if you are using Vite.In Vite we rely on the module graph instead, but sometimes it can be useful to watch files outside of the module graph. E.g.: A Laravel project, where you are watching
*.blade.phpfiles.