Add @content support to @tailwindcss/cli
#14067
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
commented
Jul 29, 2024
philipp-spiess
approved these changes
Jul 29, 2024
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
3716b75
to
eaf5a20
Compare
RobinMalfait
changed the base branch from
feat/content-path
to
feat/add-content-support-to-core
adamwathan
reviewed
Jul 29, 2024
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
d69d260
to
cd37016
Compare
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
fef5964
to
dadb584
Compare
RobinMalfait
commented
Jul 29, 2024
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
546f5f5
to
c03ad86
Compare
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
2710729
to
105293e
Compare
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
2 times, most recently
from
55bc10c
to
6879b85
Compare
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
97683da
to
1c1bbca
Compare
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
521cbaa
to
ba6b356
Compare
RobinMalfait
force-pushed
the
feat/add-content-support-to-core
branch
from
1c1bbca
to
fb8228e
Compare
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
ba6b356
to
e2118b2
Compare
Base automatically changed from
feat/add-content-support-to-core
to
feat/add-content-support
August 1, 2024 16:00
philipp-spiess
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
e2118b2
to
a45b396
Compare
philipp-spiess
force-pushed
the
feat/add-content-support
branch
from
f2cd0b3
to
06f4d62
Compare
This currently invokes the `build` command directly. In a future PR we will add proper integration tests where the CLI is tested from the outside. For now, this will do.
This will use a variable to hold everything instead of destructuring such that it will be easier to completely replace them with new instances.
Otherwise `compiler.globs` is referring to the older compiler's globs and `input` refers to the older `input` as well. This commit now makes sure that we are working with the new input and compiler before re-compiling the CSS.
philipp-spiess
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
91447a2
to
6654f6b
Compare
We moved the `internal-postcss-fix-relative-paths` to `devDependencies`, but the lock file wasn't up to date yet.
Including the base directory
Proper incremental builds will be a separate PR.
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
e3c6245
to
8558f6e
Compare
This reverts commit 8558f6e.
This reverts commit fa3f288.
Instead of relying on CLI output, let's rely on changes made to the File
System itself.
The API looks like:
```
await waitForOutputFileChange(path, cb => {
// Do something
})
```
It will setup a watcher for the given `path`, once the watcher is ready,
we will invoke the callback.
Once the file on disk changes, we can resolve the wrapping promise.
We also have this helper in the v3 codebase, a rename might be good,
Let's see if this fixes flakey tests on CI or not.
RobinMalfait
force-pushed
the
feat/content-path-cli-watch-mode
branch
from
d73e82e
to
9559a98
Compare
philipp-spiess
approved these changes
Aug 5, 2024
philipp-spiess
added a commit
that referenced
this pull request
Aug 5, 2024
This is a continuation of #14048 where we specifically focus on the `@tailwindcss/cli`. This PR optimizes the globs such that we always have a clean `base` and the `glob` (which is the first dynamic part). This PR also refactors the CLI such that we can watch files defined by the `@content` at-rules in the CSS. The `@parcel/watcher` watches from a base path (not a glob), which means that we have to create a watcher for each glob's base. This PR also adds a `scanFiles` to the `scanDir` result, so that we can verify that a scanned file matches the globs we already know from `scanDir`. Co-authored-by: Philipp Spiess <[email protected]>
RobinMalfait
added a commit
that referenced
this pull request
Aug 7, 2024
This is a continuation of #14048 where we specifically focus on the `@tailwindcss/cli`. This PR optimizes the globs such that we always have a clean `base` and the `glob` (which is the first dynamic part). This PR also refactors the CLI such that we can watch files defined by the `@content` at-rules in the CSS. The `@parcel/watcher` watches from a base path (not a glob), which means that we have to create a watcher for each glob's base. This PR also adds a `scanFiles` to the `scanDir` result, so that we can verify that a scanned file matches the globs we already know from `scanDir`. 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 is a continuation of #14048 where we specifically focus on the
@tailwindcss/cli.This PR optimizes the globs such that we always have a clean
baseand theglob(which is the first dynamic part).This PR also refactors the CLI such that we can watch files defined by the
@contentat-rules in the CSS. The@parcel/watcherwatches from a base path (not a glob), which means that we have to create a watcher for each glob's base.This PR also adds a
scanFilesto thescanDirresult, so that we can verify that a scanned file matches the globs we already know fromscanDir.