* Use variables with fallbacks for utility classes
* Update playwright test
* rename `resolveBare` to `resolveValue`
* make private methods really private
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* fix `transform-gpu` translate syntax
* move `skewX` and `skewY` functions into the variable
* use `transform-[…]` with arbitrary values as-is
This will not have any fallbacks to the `skewX` or `skewY` functions.
The arbitrary values will be the only value that's used.
* use `--tw-skew-{x,y}` variables in `transform-cpu` and `transform-gpu`
* update tests
* drop `skewX` and `skewY` functions because they are embedded in the `--tw-skew-x` and `--tw-skew-y` CSS variables
* drop `transform-cpu` and `transform-gpu`
* add `translate-none`, `transform-none`, `rotate-none` and `scale-none`
* ensure `transform` creates a stacking context
* use `<transform-function>` instead of `<angle>`
* re-add `transform-gpu`
* drop the `,`, because `--tw-skew-x` and `--tw-skew-y` will always be defined by the `@property`
* `translate(0)` is not necessary because `--tw-skew-{x,y}` will always be defined
* add skew variables to `transform-gpu`
Otherwise skew's will be gone
* re-add `transform-cpu`
* make `themeKeys` optional and default to `[]`
* remove `themeKeys` that already map 1:1 to a number or percentage
These can be handled by bare values without issues.
* remove fallback theme key lookup
- In case of `columns`, bare values can be used for the amount of columns
- In case of `divide-width`, we can always look at `--border-width`
* drop theme keys from suggestions
* drop bare value support for `translate-{axis}`
* add todo
* Revert "remove `themeKeys` that already map 1:1 to a number or percentage"
This reverts commit ef3b47aaee6af563d900b6fa3be283d860ac738e.
* Revert "remove fallback theme key lookup"
This reverts commit 0a5fc2dd394ba9375313720c1d8190f64f246486.
* Revert "drop theme keys from suggestions"
This reverts commit 7179a19517367431516d6f1f74ba3b7cc2271fc1.
* Revert "add todo"
This reverts commit 7340cdfcf87a22482e0c2c3af2b17b832e90cbab.
* Remove bare value handling for perspective utilities
* move `perspective-123` example
This is now moved to the spot where we ensure that nothing is generated
at all. This prevents us from accidentally updating a snapshot and
missing a potential bug.
* update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* 3D rotation utilities
* Validate rotate values
* Replace forEach with for loop
* transform-style, transform-box, and backface-visibility utilities
* Tests for transform utilities
* 'perspective' utility
* Fix tests
* Remove unnecessary suggestion; move function comments
* scale-z
* Fix Intellisense test
* perspective-origin
* scale-3d
* Only include the z component of scale if it's defined
We want to avoid triggerring unnecessary 3D transformations.
* Comment the reason for setting --tw-rotate
* Test full bare rotate
* Fix merge
* Comment on rotate arbitrary value
* perspective bare values
Support `perspective-123` (but not `perspective-potato`)
* scale-3d as a static modifier to scale
Instead of scale-3d taking a separate scale, it modifies scale to apply in three dimensions.
* Test that scale-x overrides scale
* scale arbitrary values
Support arbitrary value for scale (e.g. `scale-[1_2_3.5]`).
* Specify rotation axis using a modifier
Support single rotation angles in line with the [CSS `rotate` property](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate). Using modifiers (e.g. `rotate-45/x`) makes it clearer that the axis of rotation is modified. Thanks @adamwathan for this suggestion.
Composing angles is only supported in CSS via a pipeline of `transform` functions. I'll add arbitrary value support to `transform` next as an escape hatch for those cases that need more complex transformations.
* Use property defaults for scale-3d
* `transform` arbitrary values
Support arbitrary values for `transform`. The `skew-x` and `skew-y` transforms are applied before any arbitrary transformations.
* Add translate-z and translate-3d
Both work the same way as scale-z and scale-3d.
* Add translate-[xyz]-px
* Comment on how skewX and skewY are applied
* Remove unnecessary suggest
* Simplify translate
* Fix up comment on rotate syntax
* Back to rotate-x and rotate-y rather than rotate modifiers
* 3D transform test fixes
* add validation for bare values
* add bare value validation to `row-span`, `row-start`, `row-end`, `row-span`, `row-start`, and `row-end`
* update changelog
* validate bare values in `utilities.functional` utilities
* mark candidates as invalid if the leftover value is an empty string
* Update packages/tailwindcss/src/candidate.ts
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* validate `from`, `via` and `to`
This way we make sure that the bare value ends with `%`, and the value
before it is a number.
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* add `@tailwindcss/optimize` as a separate package
* remove lightningcss from `tailwindcss`
* import `optimizeCss` from `@tailwindcss/optimize`
* ensure we use `src/` files in development
* move `devDependencies` after `dependencies`
Just for consistency
* inline `optimizeCss` in leaf packages
Instead of introducing a custom `@tailwindcss/optimize` package
* update changelog
* fix changelog
* Don't rely on existence of --default-transition-* variables in transition utilities
* Update changelog
* Add test with no default transition values defined
* Inline value for --default-transition-timing-function
This is more consistent with how things worked in v3 and ensures things will still work if the user suppresses the output of all CSS variables.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Support `@theme reference` without `@import`
* Fix test
* Update tests
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* ensure we don't crash on deleted files
* change return type of `compile` to include a `rebuild()` function
This will allow us in the future to perform incremental rebuilds after
the initial rebuild. This is purely the API change so that we can
prepare all the call sites to use this new API.
* set `@tailwind utilities` nodes
Instead of replacing the node that represents the `@tailwind utilities`
with the generated AST nodes from the rawCandidates, we will set the
nodes of the `@tailwind utilities` rule to the AST nodes instead.
This way we dont' have to remove and replace the `@tailwind utilities`
rule with `n` new nodes. This will later allow us to track the
`@tailwindcss utilities` rule itself and update its `nodes` for
incremental rebuilds.
This also requires a small change to the printer where we now need to
print the children of the `@tailwind utilities` rule. Note: we keep the
same `depth` as-if the `@tailwindcss utilities` rule was not there.
Otherwise additional indentation would be present.
* move sorting to the `ast.sort()` call
This will allow us to keep sorting AST nodes in a single spot.
* move parser functions to the `DesignSystem`
This allows us to put all the parsers in the `DesignSystem`, this allows
us to scope the parsers to the current design system (the current theme,
current utility values and variants).
The implementation of these parsers are also using a `DefaultMap`
implementation. This allows us to make use of caching and only parse a
candidate, parse a variant or compile AST nodes for a given raw
candidate once if we've already done this work in the past.
Again, this is scoped to the `DesignSystem` itself. This means that if
the corresponding theme changes, then we will create a new
`DesignSystem` entirely and the caches will be garbage collected. This
is important because a candidate like `bg-primary` can be invalid in
`DesignSystem` A, but can be valid in `DesignSystem` B and vice versa.
* ensure we sort variants alphabetically by root
For incremental rebuilds we don't know all the used variants upfront,
which means that we can't sort them upfront either (what we used to do).
This code now allows us to sort the variants deterministically when
sorting the variants themselves instead of relying on the fact that they
used to be sorted before.
The sort itself could change slightly compared to the previous
implementation (especially when you used stacked variants in your
candidates), but it will still be deterministic.
* replace `localeCompare` comparisons
Use cheaper comparisons than `localeCompare` when comparing 2 strings.
We currently don't care if it is 100% correctly sorted, but we just want
consistent sorting. This is currently faster compared to
`localeCompare`.
Another benefit is that `localeCompare` could result in
non-deterministic results if the CSS was generated on 2 separate
computers where the `locale` is different.
We could solve that by adding a dedicated locale, but it would still be
slower compared to this.
* track invalid candidates
When an incoming raw candidates doesn't produce any output, then we can
mark it as an invalid candidate. This will allow us to reduce the amount
of candidates to handle in incremental rebuilds.
* add initial incremental rebuild implementation
This includes a number of steps:
1. Track the `@tailwind utilities` rule, so that we can adjust its nodes
later without re-parsing the full incoming CSS.
2. Add the new incoming raw candidates to the existing set of
candidates.
3. Parse the merged set to `compileCandidates` (this can accept any
`Iterable<string>`, which means `string[]`, `Set<string>`, ...)
4. Get the new AST nodes, update the `@tailwind utilities` rule's nodes
and re-print the AST to CSS.
* improvement 1: ignore known invalid candidates
This will reduce the amount of candidates to handle. They would
eventually be skipped anyway, but now we don't even have to re-parse
(and hit a cache) at all.
* improvement 2: skip work, when generated AST is the same
Currently incremental rebuilds are additive, which means that we are not
keeping track if we should remove CSS again in development.
We can exploit this information, because now we can quickly check the
amoutn of generated AST nodes.
- If they are the same then nothing new is generated — this means that
we can re-use the previous compiled CSS. We don't even have to
re-print the AST because we already did do that work in the past.
- If there are more AST nodes, something new is generated — this means
that we should update the `@tailwind utilities` rule and re-print the
CSS. We can store the result for future incremental rebuilds.
* improvement 3: skip work if no new candidates are detected
- We already know a set of candidates from previous runs.
- We also already know a set of candidates that are invalid and don't
produce anything.
This means that an incremental rebuild could give us a new set of
candidates that either already exist or are invalid.
If nothing changes, then we can re-use the compiled CSS.
This actually happens more often than you think, and the bigger your
project is the better this optimization will be.
For example:
```
// Imagine file A exists:
<div class="flex items-center justify-center"></div>
<button class="text-red-500">Delete</button>
```
```
// Now you add a second file B:
<div class="text-red-500 flex"></div>
```
You just created a brand new file with a bunch of HTML elements and
classes, yet all of the candidates in file B already exist in file A, so
nothing changes to the actual generated CSS.
Now imagine the other hundreds of files that already contain hundreds of
classes.
The beauty of this optimization is two-fold:
- On small projects, compiling is very fast even without this check.
This means it is performant.
- On bigger projects, we will be able to re-use existing candidates.
This means it stays performant.
* remove `getAstNodeSize`
We can move this up the tree and move it to the `rebuild` function
instead.
* remove invalid candidate tracking from `DesignSystem`
This isn't used anywhere but only in the `rebuild` of the compile step.
This allows us to remove it entirely from core logic, and move it up the
chain where it is needed.
* replace `throwOnInvalidCandidate` with `onInvalidCanidate`
This was only needed for working with `@apply`, now this logic _only_
exists in the code path where we are handling `@apply`.
* update `compile` API signature
* update callsite of `compile()` function
* fix typo
* Reset borders, padding, and margin universally
Noticed iframes have a default border we weren't resetting, feels safest to just remove borders across the board and reintroduce them for form controls.
We were also resetting padding on an element by element basis but I can't think of any elements we are actually trying to avoid resetting padding on, so just reset it everywhere.
This also removes the left margin on file buttons that separates the button from the meta data about the currently selected file but I think this is fine, let the user decide how much space to put there intentionally like we do with other things.
* Include ::first-letter
Supports margin/padding/border (but not box-sizing) so should be in reset list.
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Vite plugin: stop checking CSS files that no longer exist
Fix a potential memory leak in the Vite plugin. If CSS files are created that include `@tailwind` and later deleted, remove them from the list of files checked.
Thanks to @timneutkens for highlighting this issue.
* Vite plugin: don't log when files are removed
* Add provenance to all packages
Based on #13097 by @saibotk
Add [provenance](https://docs.npmjs.com/generating-provenance-statements) for all published packages.
---
Co-authored-by: saibotk <git@saibotk.de>
* Document reason for id-token permission
* Update changelog
* only run Lightning CSS when passing `--minify` to the CLI
* only optimize the CSS when creating a production build
* add `optimize` option to PostCSS plugin
- The optimize option can be set to `true`, which will optimize
(unnesting, adding browser prefixes, lowering values) and minify
- The optimize option can also be set to `{ minify: false }`, which will
optimize but not minify.
* default `optimize` option to the true for `NODE_ENV=production`
* add `--optimize` flag to CLI
This will only optimize the CSS output without minification.
* update `--minify` description
* update changelog
* [v4] Add `font-stretch` utilities
Based on #12171 y @Gregory-Gerard.
Add [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) utilities. Naming with `font-stretch` rather than `stretch` since the latter isn't clearly associated with fonts. Named values (e.g. `font-stretch-ulta-expanded`) and percentages (e.g. `font-stretch-50`) are supported.
* add `WalkAction` to indicate how the `walk` function should behave
You can `Continue` its execution (the default behaviour), `Skip` walking
the current node, or `Stop` walking entirely.
* walk the nodes of `@theme` directly
There is no need to walk the `@theme` itself or to create a temporary
array here.
* improvement: skip walking
* only allow CSS variables inside `@theme`
* update error message
* Only set border-style for appropriate border side
Fixes#13121.
Something to consider is that this implementation will still have issues if we ever implement support for utilities like `border-r-dashed`. 6am and I just woke up and am going to the gym now but leaving this as a note to consider when I get back before merging :)
* Fix typos in test names
* Revert playground change
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Support old important modifier position
* update
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
In some environments, depending on the Node version importing a `.json`
file without a `with` or `assert` doesn't work.
Let's play it safe and use an `fs.readFileSync` instead.
* move `cli` to its own package `@tailwindcss/cli`
* minify builds when using `tsup`
* prefer tsup cli flag over tsup.config.ts file
* add `--clean`, to make sure `dist/` folders are cleaned before building
* make CLI esm only
* use version of `tailwindcss` instead of the version of `@tailwindcss/cli`
* only output `@property foo` once instead of N times
* compute the indent once
* improve performance by using strings and for-loops
* drop unnecessary new line
The pretty printing is fairly basic, but it adds some space between
properties `color: red;`, adds newlines after `;`, `{`, and `}`.
Last but not least, it indents nested CSS based on depth with 2 spaces.
