The implementation of v3's math operator normalization uses a safe-list
of function names. Need to add `sibling-index()` and `sibling-count()`
to this list otherwise when used inside math functions like `calc()`
they'll get spaces around the `-`.
This PR ensures that if we release v3 in the future, that we don't use
`latest` as the npm tag, but `v3-lts` instead.
Unfortunately we can't just use `3` or `v3` because they are not valid
and you will get an error when trying to publish.
Angular uses `v{n}-lts` for the versions they still support:
https://www.npmjs.com/package/@angular/core?activeTab=versions
Adding a tag is important, because omitting the `--tag` is the same as
`--tag latest`
Unfortunately, it’s not possible to intercept the `await import(…)` used
by newer versions. This means the Standalone CLI will not be able to
load ESM postcss config files. You still will using the npm package and
newer versions of Node.js.
Fixes#18678
When given a simple plugin like this:
```js
export default {
content: [{ raw: '!a' },],
plugins: [
({ addBase }) => addBase({
'@media (min-width: 1728px)': {
'.a': { 'padding-top': '1rem !important' },
'.b': { 'padding-right': '1rem !important' },
}
}),
],
}
```
If this plugin saw the utility `!a` it would correctly modify both rules
to eliminate any irrelevant classes. Unfortunately, in the case of the
2nd rule this meant it's left with an empty selector which is invalid.
We now detect this case and remove the rule if that happens.
Unfortunately for backwards compatibility purposes (with `loadConfig` at
least) we can't switch things to use `import(…)` because there's baked
in knowledge that the config is loaded synchronously for v3.
This PR does two things:
- Defers to `require(…)` which allows newer versions that support
`require(esm)` to work natively. This works around the need to switch to
`import(…)` for those versions.
- Allows newer versions of `postcss-load-config` enabling better
ESM+TypeScript support for PostCSS configs in the CLI.
We support v4, v5, and v6 of `postcss-load-config` simultaneously so any
of those versions should work. I've verified that newer node versions
seem to install v6 while earlier ones like Node v14 install v4 of
`postcss-load-config`. So this should be a backwards compatible change.
- [x] needs tests for `import.meta.resolve(…)`
- [x] needs tests for ESM postcss configs
Fixes#14152Fixes#14423
Fixes#15374
If we always use Jiti the problem should, in theory, go away (I hope).
It does mean that loading configs is slower than it would be if they're
written in CJS but 🤷♂️
Wanna get this running with the integration tests to see if anything
breaks.
This PR updates `lilconfig` from v2.1.0 to v3.1.3. Significant
improvements to this package include Windows absolute path support as
well as ESM config files support. This supersedes
https://github.com/tailwindlabs/tailwindcss/pull/14029 which has fallen
behind and has conflicts with the upstream branch. This is a critical
update for Next.js apps running in development which have dependencies
on packages that use an updated version of `lilconfig`. I understand
that v4 will not be using `lilconfig` but it's an important update for
users on v3.x in the meantime.
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This is a quick fix to an issue where the types for PluginsConfig don't
match those used in plugins like
[`@tailwindcss/container-queries`](https://github.com/tailwindlabs/tailwindcss-container-queries).
This was caught by TypeScript with [`exactOptionalPropertyTypes`](
https://www.typescriptlang.org/tsconfig/exactOptionalPropertyTypes.html)
enabled, where TypeScript checks if `undefined` can be supplied as a
value for optional types.
I felt that it made more sense to fix this here, as it makes the core
types more flexible, as opposed to each plugin needing to fix this
when/if they hit it.
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This works around an issue in Chrome where `::selection` does not read
from variables defined on `::selection` thus breaking all uses of color
utilities with the selection variant. e.g. `selection::bg-red-200`.
We now add a fallback value of `1` to all uses of
`var(--tw-bg-opacity)`, `var(--tw-text-opacity)`,
`var(--tw-border-opacity)`, etc… since Chrome treats the variable as if
it did not exist because it's not defined on the parent.
In Chrome 131 (until the change is rolled back) existing utilities like
these will not work:
- `selection:text-opacity-50`
- `selection:[--tw-text-opacity:0.5]`
Fixes#15000
---------
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
`boxShadow` accepts multiple shadows just like `dropShadow` does. This
patch fixes the TS typings to reflect that.
See demo showing that multiple shadows are supported (complete with it
incorrectly complaining that the config is bad) here:
https://play.tailwindcss.com/VHqWbbEIrz?file=config
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This PR adds a new `CODEOWNERS` file so that the
`@tailwindlabs/engineering` will be automatically requested for review
when changes are made to the repository.
This PR fixes some package vulnerabilities that you will see when
running `npm install`. This PR fixes that by bumping dependencies to get
rid of the vulnerabilities.
Fixes an issue reported by the React Aria Components team here:
https://github.com/adobe/react-spectrum/issues/7160
Basically `hidden="until-found"` behaves very differently than `hidden`
and doesn't actually use `display: none`, so we don't want to apply the
behavior we apply for the regular `hidden` attribute.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
In a large project, it's costly to repeatedly call the
function `micromatch.isMatch` that parses a glob pattern,
creates a regular expression, and tests the path name
against the regular expression. To optimize performance,
it's important to cache the parsing and creating process
before entering the loop.
For example, the content configuration in a project
looks like this
`['./pages/**/*.{ts,js}', './node_modules/pages/**/*.{ts,js}']`.
If the project has 10000 matched files and 10 glob patterns,
the function `micromatch.isMatch` will be called 100000 times.
---
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Prior to this PR, we'd put all of the `@defaults` (the CSS variables and
stuff) _after_ the `base` rules. This creates an issue when using
`optimizeUniversalDefaults` with CSS that looks like this:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
input {
@apply shadow;
}
}
```
…because the default shadow stuff ends up after the base `input` rules,
so the generated styles are like this:
```css
input {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
input {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
```
This means all of the actual shadow values for the input are reset and
the shadow doesn't work.
Fixes https://github.com/tailwindlabs/tailwindcss/issues/14426.
Lots of failing tests right because this changes a ton of stuff, albeit
in a totally inconsequential way. @thecrypticace if you could update
these for me this week that would be a huge help, just banging this fix
out quick while the kids are napping 😴
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This PR fixes an issue where using `anchor-size` in arbitrary values
resulted in the incorrect css.
Input: `w-[calc(anchor-size(width)+8px)]`
Output:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
width: calc(anchor - size(width) + 8px);
}
```
This PR fixes that, by generating the correct CSS:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
width: calc(anchor-size(width) + 8px);
}
```
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>
