Add `@content` support to `tailwindcss` by RobinMalfait · Pull Request #14079 · tailwindlabs/tailwindcss

RobinMalfait · 2024-07-29T13:51:49Z

This PR adds @content support to tailwindcss's core package. We will handle the @content and call the onContentPath function when it's encountered.

The @tailwindcss/cli, @tailwindcss/vite and @tailwindcss/postcss packages have to implement the onContentPath such that the necessary globs are scanned and watchers should be setup with this information.

Example usage:

@content "../../packages/my-sibling-package/src/components/*.tsx";

If you are in a monorepo setup, then you could point to other packages if you want. Another common use case is for Laravel projects if you want to point to Laravel blade files since they won't be covered by Vite's module graph:

/* ./resources/css/app.css */
@content "../views/*.blade.php"

Note: all globs are relative to the current file you are in.

crates/oxide/src/glob.rs

thecrypticace

The windows tests are failing but I think that's addressed by the other PR so this looks good afaict

This is not only about auto content detection anymore, but it's testing the `scan_dir` functionality. `scan_dir` contains auto content detection and will handle passed in globs.

Integrations have to implement the `onContentPath` to know about the globs found in `@content`.

All integrations will make use of this, so let's get rid of the option entirely.

On the Rust side, we will make sure to optimize the `globs` and merge it with the generated globs from the auto content detection.

This means that we don't need special casing of the absolute paths. And more importantly, we don't need to worry about Windows in this case either.

This now means that all the globs passed in are a `GlobEntry`, which contains the `base` and the `glob`.

@content

This PR adds `@content` support to `tailwindcss`'s core package. We will handle the `@content` and call the `onContentPath` function when it's encountered. The `@tailwindcss/cli`, `@tailwindcss/vite` and `@tailwindcss/postcss` packages have to implement the `onContentPath` such that the necessary globs are scanned and watchers should be setup with this information. Example usage: ```css @content "../../packages/my-sibling-package/src/components/*.tsx"; ``` If you are in a monorepo setup, then you could point to other packages if you want. Another common use case is for Laravel projects if you want to point to Laravel blade files since they won't be covered by Vite's module graph: ```css /* ./resources/css/app.css */ @content "../views/*.blade.php" ``` Note: all globs are relative to the current file you are in.

@content

This PR adds `@content` support to `tailwindcss`'s core package. We will handle the `@content` and call the `onContentPath` function when it's encountered. The `@tailwindcss/cli`, `@tailwindcss/vite` and `@tailwindcss/postcss` packages have to implement the `onContentPath` such that the necessary globs are scanned and watchers should be setup with this information. Example usage: ```css @content "../../packages/my-sibling-package/src/components/*.tsx"; ``` If you are in a monorepo setup, then you could point to other packages if you want. Another common use case is for Laravel projects if you want to point to Laravel blade files since they won't be covered by Vite's module graph: ```css /* ./resources/css/app.css */ @content "../views/*.blade.php" ``` Note: all globs are relative to the current file you are in.

@content

This PR adds `@content` support to `tailwindcss`'s core package. We will handle the `@content` and call the `onContentPath` function when it's encountered. The `@tailwindcss/cli`, `@tailwindcss/vite` and `@tailwindcss/postcss` packages have to implement the `onContentPath` such that the necessary globs are scanned and watchers should be setup with this information. Example usage: ```css @content "../../packages/my-sibling-package/src/components/*.tsx"; ``` If you are in a monorepo setup, then you could point to other packages if you want. Another common use case is for Laravel projects if you want to point to Laravel blade files since they won't be covered by Vite's module graph: ```css /* ./resources/css/app.css */ @content "../views/*.blade.php" ``` Note: all globs are relative to the current file you are in.

@source

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 <hello@philippspiess.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

@source

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] tailwindlabs/tailwindcss#14063 - [x] tailwindlabs/tailwindcss#14085 - [x] tailwindlabs/tailwindcss#14079 - [x] tailwindlabs/tailwindcss#14067 - [x] tailwindlabs/tailwindcss#14076 - [x] tailwindlabs/tailwindcss#14080 - [x] tailwindlabs/tailwindcss#14127 - [x] tailwindlabs/tailwindcss#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 <hello@philippspiess.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

This was referenced Jul 29, 2024

Add @source support #14078

Merged

Add support for explicit content path via @content #14048

Closed

adamwathan reviewed Jul 29, 2024

View reviewed changes

crates/oxide/src/glob.rs Outdated Show resolved Hide resolved

RobinMalfait force-pushed the feat/add-content-support-to-core branch from d69d260 to cd37016 Compare July 29, 2024 17:05

RobinMalfait force-pushed the feat/add-content-support branch from 1ee39a6 to 6d39204 Compare July 30, 2024 08:30

RobinMalfait force-pushed the feat/add-content-support-to-core branch from 2710729 to 105293e Compare July 30, 2024 08:48

philipp-spiess force-pushed the feat/add-content-support branch from 6d39204 to b078327 Compare July 30, 2024 12:06

RobinMalfait force-pushed the feat/add-content-support-to-core branch from 97683da to 1c1bbca Compare July 30, 2024 15:28

thecrypticace approved these changes Jul 30, 2024

View reviewed changes

RobinMalfait added 12 commits July 30, 2024 18:06

rename auto_content.rs to scan_dir.rs

b89cd3a

This is not only about auto content detection anymore, but it's testing the `scan_dir` functionality. `scan_dir` contains auto content detection and will handle passed in globs.

add @content support in tailwindcss

2ad447b

Integrations have to implement the `onContentPath` to know about the globs found in `@content`.

remove globs: true option from scanDir

32a5c46

All integrations will make use of this, so let's get rid of the option entirely.

add glob-match

7ee91fc

allow to pass in globs

6b12c32

On the Rust side, we will make sure to optimize the `globs` and merge it with the generated globs from the auto content detection.

add serial_test

0f1dda2

add tests

8851d60

assume all globs are relative with forward slashes

69aa578

This means that we don't need special casing of the absolute paths. And more importantly, we don't need to worry about Windows in this case either.

use to_string_lossy instead of path.display()

e98fc69

fix typo + apply clippy suggestions

9d307d1

return globs from compile()

b7f66f8

scan_dir globs accept Vec<GlobEntry> instead of just string globs

fb8228e

This now means that all the globs passed in are a `GlobEntry`, which contains the `base` and the `glob`.

RobinMalfait force-pushed the feat/add-content-support-to-core branch from 1c1bbca to fb8228e Compare July 30, 2024 16:06

philipp-spiess merged commit f2cd0b3 into feat/add-content-support Aug 1, 2024

philipp-spiess deleted the feat/add-content-support-to-core branch August 1, 2024 16:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add `@content` support to `tailwindcss`#14079

Add `@content` support to `tailwindcss`#14079
philipp-spiess merged 12 commits intofeat/add-content-supportfrom
feat/add-content-support-to-core

RobinMalfait commented Jul 29, 2024 •

edited

Loading

Uh oh!

Uh oh!

thecrypticace left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

RobinMalfait commented Jul 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

thecrypticace left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

RobinMalfait commented Jul 29, 2024 •

edited

Loading