* run `pnpm update --recursive`
* update tests to reflect lightningcss bump
It looks like it's mainly (re-)ordering properties. Not 100% sure why
though.
* Fixes exports when importing CJS form ESM file
* Build a real ESM version of the postcss plugin
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* ensure we handle strings as-in
When encountering strings when using `segment` we didn't really treat
them as actual strings. This means that if you used any parens,
brackets, or curlies then we wanted them to be properly balanced.
This should not be the case, whenever we encounter a string, we want to
consume it as-is and don't want to worry about bracket balancing. We
will now consume it until the end of the string (and make sure that
escaped closing quotes are not seen as real closing quotes).
* update changelog
* drop unnecessary test
Already had this test
* ensure we utilities and variants defined
* add example test that parses with unbalanced brackets inside quotes
* improve changelog entry
* hoist comment
* Allow hyphen character in regex pattern to use support queries as is
* Update variants.test.ts
---------
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* remove automatic `var(…)` injection
There are a few properties that use "dashed-ident" values, this means
that you can use `--my-thing` as-is without the `var(…)` around it.
This causes issues because we are now injecting a `var(…)` where it's not
needed.
One potential solution is to create a list of properties where dashed
idents can be used. However, they can _also_ use CSS custom properties
that point to another dashed ident.
A workaround that some people used is adding a `_` in front of the
variable: `mt-[_--my-thing]` this way we don't automatically inject the
`var(…)` around it. This is a workaround and gross.
While the idea of automatic var injection is neat, this causes more
trouble than it's worth. Adding `var(…)` explicitly is better.
A side effect of this is that we can simplify the `candidate` data
structure because we don't need to track `dashedIdent` separately
anymore.
* update tests by adding `var(…)` explicitly
* update changelog
* skip initial character we just saw
Thanks Richard for noticing!
Co-authored-by: Richard van Velzen <richard@frank.nl>
* prevent calling `charCodeAt()` if we already computed the value
* update changelog
---------
Co-authored-by: Richard van Velzen <richard@frank.nl>
* implement custom `compare` for sorting purposes
This `compare` function compares two strings. However, once a number is
reached the numbers are compared as actual numbers instead of the string
representation.
E.g.:
```
p-1
p-2
p-10
p-20
```
Will be sorted as expected in this order, instead of
```
p-1
p-10
p-2
p-20
```
---
This should also make suggestions in the vscode extension more logical.
* update tests to reflect order changes
* update changelog
* reset `i` correctly
This makes the code more correct _and_ improves performance because the
`Number(…)` will now always deal with numbers.
On the tailwindcss.com codebase, sorting now goes from `~3.29ms` to
`~3.10ms`
* drop unreachable code
In this branch, it's guaranteed that numbers are _different_ which means
that they are never going to be the same thus unreachable code.
When we compare two strings such as:
```
foo-123-bar
foo-123-baz
```
Then all characters until the last character is the same character in
both positions. This means that "numbers" that are the same in the same
position will be compared as strings instead of numbers. But that is
fine because they are the same anyway.
* add fallback in case numbers are the same but strings are not
This can happen if we are sorting `0123` and `123`. The `Number`
representation will be equal, but the string is not.
Will rarely or even never happen. But if it does, this makes it
deterministic.
* re-word comment
* add more test cases with numbers in different spots with various lengths
* Update CHANGELOG.md
* cleanup, simplify which variables we increment
This also gets rid of some explanation that can now be omitted entirely.
---------
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* use shared tokens
* use token constants in candidate parser
* use token constants in `isColor` function
* add block now that `return null` goes to a new line
* Switch breakpoints to rem #8378
* Fix broken test
* Update snapshots
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Use charCodeAt instead of string comparison
* Rename some things
* Fix lint issues
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* reverse order of variants
This way variants work similar to how you would write them in CSS
itself.
This also allows us to remove the special "fixup" code that fixes the
position of some variants because they have to be in a specific order
(the end). Since the order wasn't intuitive we had to solve this with a
fixup.
This commit should allow us to remove this entirely, because now it is intuitive.
* update tests to reflect variant order change
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* ensure we wait in the `build` step as well
It looks like when running `astro build` we only run this `build` step
and not the `dev` step where we already use the `waitForRequestsIdle`
code.
Adding this to the `build` part as well does generate the correct
result.
* update changelog
* fix typo
* add comment
* Don’t run transforms more than necessary
* Don’t remove modules from the graph during SSR
* Update changelog
* Add `preview` script
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Don't read variables for shadow sizes
* Add UI test
* Handle key suffix in get function instead of ThemeKey
* Remove duplicate theme keys
* Format test in a less insane way
* Revert playground changes
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
When the arrays of colors were split, both smaller, and had different values to lookup an `includes` check was faster. Since they’ve been merged a Set is now beneficial.
Transform Tailwind-generated CSS with Vite CSS plugins. vite:css does useful things like transforming url() paths and inlining images. vite:css-post generates bundle hashes. Before this change, the CSS bundle hash wasn't changing when the generated CSS changed.
Also adds Vite 5.2 peerDependancy.
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* fix incorrect syntax for `translate-z`
This used to be `<length-percentage>`, but we dropped percentage support
because it's not valid in #13321 and I forgot about this one.
* update changelog
* Reorganize to co-locate rotate/skew/transform
* Make 3D rotations composable
* Uppercase axis in rotate functions
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* 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
