After shipping the new warning that prevents unexpected scanning of all
dependencies in 3.4.8, we noticed that it was firing more often than we
wanted to.
The heuristics we added works by finding broad glob patterns (once that
contain `/**/`) and when those are found and are the _sole pattern used
to match a file of a known-large directory_, we were showing the
warning. The motivation for this is that we have seen time and time
again that an incorrect config like `/**/*.js` can cause recursive scans
through _all_ dependencies including many minified libraries which
greatly impacts performance.
In #14140, we were adding two known-large directory names:
- `node_modules` (used by npm)
- `vendor` (used by PHP)
The problem with the `vendor` name though is that it is more generic
than we would like it and there are legit use cases to have a folder
named `vendor` inside your component folder. Additionally, PHP vendors
behave a bit differently and it's not super common to have minified
build files in that folder (which is one of the main reasons for the
slow builds). Because of this, we decided to revert the change for
`vendor` and only scan for `node_modules` going forward.
When you use a glob pattern in your `content` configuration that is too
broad, it could be that you are accidentally including files that you
didn't intend to include. E.g.: all of `node_modules`
This has been documented in the [Tailwind CSS
documentation](https://tailwindcss.com/docs/content-configuration#pattern-recommendations),
but it's still something that a lot of people run into.
This PR will try to detect those patterns and show a big warning to let
you know if you may have done something wrong.
We will show a warning if all of these conditions are true:
1. We detect `**` in the glob pattern
2. _and_ you didn't explicitly use `node_modules` in the glob pattern
3. _and_ we found files that include `node_modules` in the file path
4. _and_ no other globs exist that explicitly match the found file
With these rules in place, the DX has nice trade-offs:
1. Very simple projects (that don't even have a `node_modules` folder),
can simply use `./**/*` because while resolving actual files we won't
see files from `node_modules` and thus won't warn.
2. If you use `./src/**` and you do have a `node_modules`, then we also
won't complain (unless you have a `node_modules` folder in the `./src`
folder).
3. If you work with a 3rd party library that you want to make changes
to. Using an explicit match like `./node_modules/my-package/**/*` is
allowed because `node_modules` is explicitly mentioned.
Note: this only shows a warning, it does not stop the process entirely.
The warning will be show when the very first file in the `node_modules`
is detected.
<!--
👋 Hey, thanks for your interest in contributing to Tailwind!
**Please ask first before starting work on any significant new
features.**
It's never a fun experience to have your pull request declined after
investing a lot of time and effort into a new feature. To avoid this
from happening, we request that contributors create an issue to first
discuss any significant new features. This includes things like adding
new utilities, creating new at-rules, or adding new component examples
to the documentation.
https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md
-->
---------
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
We bundle cssnano in our CLI and it's on an older version that does not
handle nested CSS correctly. This PR updates it to the latest version of
v6.x
Fixes#14092
Fixes#14026
See #14040 for the v4 fix
When translating `data-` and `aria-` modifiers with attribute selectors,
we currently do not wrap the target attribute in quotes. This only works
for keywords (purely alphabetic words) but breaks as soon as there are
numbers or things like spaces in the attribute:
```html
<div data-id="foo" class="data-[id=foo]:underline">underlined</div>
<div data-id="f1" class="data-[id=1]:underline">not underlined</div>
<div data-id="foo bar" class="data-[id=foo_bar]:underline">not underlined</div>
```
Since it's fairly common to have attribute selectors with `data-` and
`aria-` modifiers, this PR will now wrap the attribute in quotes unless
these are already wrapped.
| Tailwind Modifier | CSS Selector |
| ------------- | ------------- |
| `.data-[id=foo]` | `[data-id='foo']` |
| `.data-[id='foo']` | `[data-id='foo']` |
| `.data-[id=foo_i]` | `[data-id='foo i']` |
| `.data-[id='foo'_i]` | `[data-id='foo' i]` |
| `.data-[id=123]` | `[data-id='123']` |
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Avoid over-extracting utilities from candidates with decimal values
Prevent candidates like `px-1.5` from generating both the `px-1.5` class and the `px-1` class.
* Update CHANGELOG.md
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add `tailwind.config.cts` and `tailwind.config.mts` as default config files
* always use jiti when working with ESM or TS files
* update changelog
* add integration test for `.cts` and `.mts` configuration files
* Added tests to verify that classes are prefixed when using `has-*` variants with arbitrary values
* Fix test
* Don't prefix classes in arbitrary values in `has-*` variants
* Update changelog
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Fix multiple <alpha-value> in color definitions
Fixes#13716
* Update CHANGELOG.md
* Use `replace` with global regex
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* drop nesting detection for `@tailwind`
* drop separate nesting detection entirely
* detect nesting only when using `@apply` with a class that uses nesting
* drop unnecessary `important` config
* add test to verify applying nested user CSS errors
* add error reason to tests
* update `@apply` error message
* fixing double x-large absolute size
x-large appears twice in the set of absolute sizes.
I believe the second one is meant to be 'xx-large'.
* update changelog
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Reset letter spacing for form elements
Some browsers, such as Chrome, set `letter-spacing: normal` for form elements. For consistency with the other styles, it should be set to `inherit` by Preflight.
* wip
* Update changelog
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* remove all oxide related code
* Update lightningcss to version 1.24.1
* update tests to match bumped Lightning CSS output
---------
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
