Commit graph

434 commits

Author SHA1 Message Date
Eran Hirsch
243226887f Reset dialog element styles (#11069)
* disable useragent styling for dialog

* nits

* Update src/css/preflight.css

* Simplify dialog reset

We don’t want to reset everything here. Just the padding should be enough.

* Update test

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-07-13 11:50:34 -04:00
Dany Castillo
1fb7486165 Make font settings propagate into buttons, inputs, etc. (#10940)
* Make font settings propagate into buttons, inputs, etc.

* update source-maps test due to preflight change

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-07-13 11:48:35 -04:00
Jordan Pittman
24c6a99474 Escape animation names when prefixes contain special characters (#11470)
* Escape animation names when prefixes contain special characters

* Update changelog
2023-07-13 11:48:35 -04:00
Jordan Pittman
61cf624e4b Move unknown pseudo elements outside of :is (#11345)
* More pseudo elements outside of `:is` by default

* Update changelog
2023-07-13 11:48:35 -04:00
Robin Malfait
63403d84a2 Ensure repeating-conic-gradient is detected as an image (#11180)
* ensure `repeating-conic-gradient` is detected as an image
* update changelog
2023-07-13 11:48:35 -04:00
Jordan Pittman
79b5b12af1 Fix parsing of theme() inside calc() when there are no spaces around operators (#11157)
* Refactor

* Don’t resolve functions for anything not using theme or screen

* Normalize math operators inside calc when handling functions

* Inline postcss-value-parser

* Treat all functions the same as calc

* Remove workaround for calc + operators without spaces

* Remove `postcss-value-parser` dependency

* Update lockfile

* Update sourcemaps

* Update changelog

* Update `value-parser` formatting

* Stop prettier from complaining
2023-07-13 11:48:34 -04:00
Jordan Pittman
7b4de46d2f Fix issues with some pseudo-elements (#11111)
* Fix issues with some pseudo-elements

We’ve included pseudo elements for backdrop, marker, placeholder, and selection and they were all “jumpable” before we made changes in v3.3.2. Ideally they wouldn’t be because if they ever eventually have any interactivity that could become a problem.

* Update changelog
2023-07-13 11:46:19 -04:00
Robin Malfait
9bb45cd162
Normalize arbitrary modifiers (#11057)
* ensure we normalize the arbitrary modifiers

This applies the same rules as arbitrary values. The `_` can be used in
place of a space. If you _do_ want an underscore, you can escape it with
`\_` (`\\_` in JavaScript).

* update changelog
2023-04-21 21:42:58 +02:00
Robin Malfait
0e2b4510a2
Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)
* ensure that last `]` doesn't stop the match

Given this input:
```html
<div class="[width:_calc(theme(spacing[5])_+_theme(spacing[5]))]"></div>
```

Then we would expect the match to be this:
```
[width:_calc(theme(spacing[5])_+_theme(spacing[5]))]
```

However, with the `?`, then it would stop and result in:
```
[width:_calc(theme(spacing[5])_+_theme(spacing[5]
```

Which makes it incomplete because the `))]` are missing at the end.

* update changelog
2023-04-19 23:06:33 +02:00
Robin Malfait
72bc31867b
Replace __OXIDE__ at build time to prevent @tailwindcss/oxide leaks in the stable engine (#10988)
* replace `env.OXIDE` with global `__OXIDE__`

This will allow us to replace the `__OXIDE__` at build time, and fully
remove the branches from the final code so that there is not even any
reference to `@tailwindcss/oxide` on the stable engine.

* update changelog

* use `env.ENGINE` in integration tests

* drop oxide branching for the PostCSS plugin for now

This is currently a redirect to the same file, so doesn't hurt.

* Enable better dead-code elimination

* Update CLI tests

Fix indentation

* Fix indentation

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-04-18 12:19:20 +02:00
Matei Simtinică
9f860197c9
Fix gradient stop positions with transparent colors and/or variants (#11002)
* fixed gradient stop for default transparent

* Inherit gradient stop positions when using variants

* Update tests

* Update changelog

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-04-13 16:12:12 -04:00
Jordan Pittman
e3a9d5f53b
Don’t move unknown pseudo-elements to the end of selectors (#10962)
* Don’t move `::deep` pseudo element to end of selector when using `@apply`

* Update changelog

* Move pseudo-elements in two passes

* Rewrite pseudo-element relocation logic

* Update test

`::test` is an unknown pseudo element and therefore may be actionable _and_ nestable

* Add tests

* Simplify tests

* Simplify

* run tests on CI multiple times

This works around the timeouts/flakeyness of GitHub Actions

* Update formatting

* Add comment

* Mark webkit peusdo elements as terminal

* update comment

* only execute the `global-setup` once

* Simplify

NO SORT FN YAY

* Use typedefs

* Update changelog

* Update changelog

* update again

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-04-07 10:45:47 -04:00
Jordan Pittman
467a39e0d5
Don’t move ::ng-deep pseudo element to end of selector when using @apply (#10943)
* Don’t move `::ng-deep` pseudo element

* Update changelog
2023-04-04 12:46:20 -04:00
Jordan Pittman
0ecc4642fc
Pull pseudo elements outside of :is and :has when using @apply (#10903)
* Pull pseudo elements outside of `:is` and `:has` when using `@apply`

* Update changelog

* Refactor

* Update important selector handling for :is and :has

* fixup

* fixup

* trigger CI

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-03-29 21:37:26 +02:00
Robin Malfait
51157717da
Add gradient color stop position utilities (#10886)
* add gradient color stop positions

* update tests to include gradient position color stop reset values

* add dedicated color stop position tests

* use `%` sign in the name of the uility

* update changelog

* ensure `length` values and css variables work
2023-03-28 15:39:00 +02:00
Robin Malfait
5b77b42574
Reset all properties when using line-clamp-none (#10876)
* reset other properties on `line-clamp-none`

* update CHANGELOG
2023-03-27 18:56:14 +02:00
Jordan Pittman
1d505e9c8c Revert "Remove blocklisted classes from autocomplete (#10844)"
This reverts commit f1473f53bb.
2023-03-23 15:18:49 -04:00
Jordan Pittman
f1473f53bb
Remove blocklisted classes from autocomplete (#10844)
* Remove blocklisted classes from autocomplete

* Update changelog

* Don't unnecessary loop over classes

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-03-23 15:03:56 -04:00
Adam Wathan
266f0292ba
Use :is to make important selector option insensitive to DOM order (#10835)
* Use `:is` to make important selector option insensitive to DOM order

* WIP

* add `applyImportantSelector` helper

* use new `applyImportantSelector`

* update tests

* remove unnecessary slice adjustment

Not 100% sure.

* update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-03-21 17:50:44 +01:00
Robin Malfait
e4482c7596
ensure stacking dark and rtl variants with pseudo elements works as expected 2023-03-21 15:32:16 +01:00
Adam Wathan
bac5ecf004
Add list-style-image support (#10817)
* add `listStyle` instead of `listStyleType`

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

* add `listStyleType` related deprecation warnings

* Implement list-style-image as separate plugin

* Remove unused code, update tests

* Always generate `list-none`, don't pull it from theme

* Gracefully handle missing listStyleType configuration

* Just use `list-image-*` fuck it

* Update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Peter Neupauer <peter@neupauer.sk>
2023-03-20 14:40:35 -04:00
Robin Malfait
8132de6660
refactor log.warn checks in tests 2023-03-17 14:49:36 +01:00
Robin Malfait
7e9a53f6cb
Enable ESM and TS based config files (#10785)
* add `jiti` and `detective-typescript` dependencies

* use `jiti` and `detective-typescript`

Instead of `detective`, this way we will be able to support
`tailwind.config.ts` files and `ESM` files.

* use `@swc/core` instead of the built-in `babel` form `jiti`

* update changelog

* add `jiti` and `detective-typescript` dependencies to `stable`

* use `sucrase` to transform the configs

* add `sucrase` dependency to `stable` engine

* make loading the config easier

* use abstracted loading config utils

* WIP: make `load` related files public API

* use new config loader in PostCSS plugin

* add list of default config files to look for

* cleanup unused arguments

* find default config path when using CLI

* improve `init` command

* make eslint happy

* keep all files in `stubs` folder

* add `tailwind.config.js` stub file

* Initialize PostCSS config using the same format as Tailwind config

* Rename config content stubs to config.*.js

* Improve option descriptions for init options

* Remove unused code, remove `constants` file

* Fix TS warning

* apply CLI changes to the Oxide version

* update `--help` output in CLI tests

* WIP: make tests work on CI

TODO: Test all combinations of `--full`, `--ts`, `--postcss`, and `--esm`.

* wip

* remove unused `fs`

* Fix init tests

Did you know you could pass an empty args to a command? No? Me neither. ¯\_(ツ)_/¯

* bump `napi-derive`

* list extensions we are interested in

* no-op the `removeFile` if file doesn't exist

* ensure all `init` flags work

* ensure we cleanup the new files

* test ESM/CJS generation based on package.json

* remove unnecessary test

We are not displaying output in the `--help` anymore based on whether
`type: module` is present or not.
Therefore this test is unneeded.

* only look for `TypeScript` files when the entryFile is `TypeScript` as well

* refactor `load` to be `loadConfig`

This will allow you to use:

```js
import loadConfig from 'tailwindcss/loadConfig'

let config = loadConfig("/Users/xyz/projects/my-app/tailwind.config.ts")
```

The `loadConfig` function will return the configuration object based on
the given absolute path of a tailwind configuration file.

The given path can be a CJS, an ESM or a TS file.

* use the `config.full.js` stub instead of the `defaultConfig.stub.js` file

The root `defaultConfig` is still there for backwards compatibilty
reasons. But the `module.exports = requrie('./config.full.js')` was
causing some problems when actually using tailwindcss.

So dropped it instead.

* apply `load` -> `loadConfig` changes to `Oxide` engine CLI

* ensure we write the config file in the Oxide engine

* improve type in Oxide engine CLI

* catch errors instead of checking if the file exists

A little smaller but just for tests so doesn't matter too much here 👍

* ensure we publish the correct stub files

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Nate Moore <nate@natemoo.re>
Co-authored-by: Enzo Innocenzi <enzo@innocenzi.dev>
2023-03-15 17:04:18 -04:00
Robin Malfait
7b4385cdfd
fix typo 2023-03-10 22:44:25 +01:00
Robin Malfait
7eab762a3d
Add line-clamp utilities from @tailwindcss/line-clamp to core (#10768)
* add `lineClamp` utility

This is coming from the `@tailwindcss/line-clamp` package that we now
merged into the core of Tailwind itself.

* update changelog
2023-03-10 18:47:43 +01:00
Adam Wathan
e40b73a127
Make dark and rtl/ltr variants insensitive to DOM order (#10766)
* Make `dark` and `rtl`/`ltr` variants insensitive to DOM order

* Add explicit test for stacking dark and rtl variants

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-03-10 12:03:38 -05:00
Robin Malfait
ba56e426af
Use inset instead of top, right, bottom, and left properties (#10765)
* use `inset` instead of `top`, `right`, `bottom` and `left` properties

* update changelog
2023-03-10 16:52:08 +01:00
Jordan Pittman
d2a95a00a8
Sort class lists deterministically for Prettier plugin (#10672)
* Ensure class sorting is deterministic for Prettier

* Update changelog
2023-02-23 13:32:24 -05:00
Jordan Pittman
9bbdd9b10d
Disallow multi-selector arbitrary variants (#10655)
* Allow escaping in `splitAtTopLevelOnly`

* Correctly parse arbitrary variants that have multiple selectors

* Explicitly disallow multiple selector arbitrary variants

Now that we parse them correctly we can restrict them to explicitly supporting only a single selector

* Add test to verify that multiple selector arbitrary variants are dropped

* Add test

* Make prettier happy

* Fix CS

* Update changelog
2023-02-22 14:44:54 -05:00
Robin Malfait
962eb52ec6
Enable relative content paths for the oxide engine (#10621)
* enable `relativeContentPathsByDefault` for the `oxide` engine

* update tests to reflect `relative` change in the `oxide` engine

* update changelog
2023-02-17 21:42:10 +01:00
Robin Malfait
c8bf2d49b6
Disable color opacity plugins by default in the oxide engine (#10618)
* disable color opacity plugins by default for the `oxide` engine

* update tests to reflect this change in the `oxide` engine

* update changelog

* reflect changes in integration tests
2023-02-17 20:21:22 +01:00
Jonathan Reinink
6e92dfa4ea
Revert including outline-color in transition and transition-colors by default (#10604)
* Remove `outline-color` from default color properties to transition (Reverts #10385)

* Update changelog
2023-02-16 13:46:43 -05:00
Jordan Pittman
89fe09bfe1
Fix use of :where(.btn) when matching !btn (#10601)
* Cleanup code

This makes it more explicit that we’re parsing a string selector, modifying it, and turning it back into a string

* Fix important modifier when :where is involved

* Only parse selector list once when handling the important modifier

* Fix import

* Fix lint errors
2023-02-16 10:13:42 -05:00
Robin Malfait
10952f9e12
Revert "Prepare for the v3.2.6"
This reverts commit 352677f0a9.
2023-02-08 17:39:43 +01:00
Robin Malfait
352677f0a9
Prepare for the v3.2.6 2023-02-08 17:35:09 +01:00
Robin Malfait
0bf3a7dda6
Revert "Prepare for the v3.2.5 release (#10531)"
This reverts commit cb46ebdf22.
2023-02-08 16:37:50 +01:00
Robin Malfait
cb46ebdf22
Prepare for the v3.2.5 release (#10531)
* Revert "add caption-side utilities (#10470)"

This reverts commit f395cc4ae5.

* Revert "Add support for configuring default `font-variation-settings` for a `font-family` (#10515)"

This reverts commit 8bd2846b5b.

* Revert "feat: add hyphens (#10071)"

This reverts commit f58a43fd75.

* Revert "Add logical properties support for inline direction"

* Revert "Add `delay-0` and `duration-0` by default"

* Revert "Support using variables as arbitrary values without `var()`"

* Revert "Add `line-height` modifier support to `font-size` utilities"
2023-02-08 15:53:00 +01:00
MichaelAllenWarner
f395cc4ae5
add caption-side utilities (#10470)
Co-authored-by: Michael Warner <michaelwarner@Michaels-MacBook-Pro.local>
2023-02-07 11:53:33 -05:00
Robin Malfait
8bd2846b5b
Add support for configuring default font-variation-settings for a font-family (#10515)
* Add support for configuring default `font-variation-settings` for a `font-family`

* update changelog

---------

Co-authored-by: Nikolai Grushkovsky <n@ngrushkovsky.com>
2023-02-07 15:06:59 +01:00
Robin Malfait
b17b60ef6a
Sort by layer inside variants layer (#10505)
* sort by `layer` inside `variants` layer

We currently have a whole system for sorting the utilties / components
already. Right now we also have a "variants" layer, this is to ensure
that we always have variants at the end of the file regardless of the
`parentLayer` (base, utilties, components).

That said, we also have to make sure that within this `variants` layer
we also sort by the `parentLayer`.

* update changelog

* ensure order is correct now
2023-02-06 16:27:01 +01:00
Jordan Pittman
885e134841
Parse alpha value from rgba/hsla colors when using variables (#10429)
* Parse alpha value from rgba/hsla colors

* Update changelog
2023-01-31 14:36:38 -05:00
Robin Malfait
a4f1ff9052
Improve CSS output in tests to better reflect reality (#10454)
* drop empty lines when diffing output

* replace expected css with optimized lightningcss output

Lightning CSS generates a more optimal CSS output.

Right now the tests are setup in a way that both the generated css and
expected css are run through `lightningcss` to make sure that the output
is concistent for the `stable` and `oxide` engines. But this also means
that the expected output _could_ be larger (aka not optimized) and still
matches (after it runs through lightningcss).

By replacing this with the more optimal output we achieve a few things:

1. This better reflects reality since we will be using `lightningcss`.
2. This gets rid of unnecessary css.
3. Removed code!
2023-01-31 15:37:49 +01:00
MichaelAllenWarner
afd159dd8d
a few minor fixes to the variants tests (#10427)
Co-authored-by: Michael Warner <michaelwarner@Michaels-MacBook-Pro.local>
2023-01-27 19:57:02 +01:00
Brad Cornes
ef6f9ee6c2
Add modifiers to context.getClassList result (#10251)
* Add modifiers to `conext.getClassList` result

* Tweak test

* Add `includeMetadata` flag and update tests

* update test
2023-01-26 10:58:37 +00:00
Robin Malfait
8e60a3c7e8
Use Lightning CSS in the PostCSS Plugin (#10399)
* bump lightningcss

* use `lightningcss` in the main PostCss Plugin

* use lightningcss in our custom matchers

Now that we are using `lightningcss` and nesting in the new `oxide`
engine, the generated output _will_ be different in the majority of test
cases.

Using a combination of `prettier` and `lightningcss` will make the
output consistent.

The moment we are fully using the `oxide` engine, we can drop
`lightningcss` or `prettier` again to improve the performance of the
tests.

* update tests to apply `lightningcss` related changes

* update changelog

* add `lightningcss` and `browserslist` as dev dependencies to stable package.json

* only use `lightningcss` in tests (without prettier)

We will only fallback to prettier if lightningcss fails somehow.

* apply side effect chagnes due to only using lightningcss for tests

* make CI happy (integration tests)

Apply changes to integration tests now that we are using lightningcss

* transform `lightningcss` for Node 12 when running tests

* run prettier on failing tests for `toMatchFormattedCss`

This will result in better diffs because diffs are typically per block
and/or per line. But lightningcss will simplify certain selectors and
the diff won't be as clear.

We will only apply the prettier formatting for failing tests in the diff
view so that diffs are cleaner and we don't pay for the additional
prettier calls when tests pass.
2023-01-23 20:44:31 +01:00
Jordan Pittman
f821c71b7e
Handle group/peer variants with quoted strings (#10400)
* Handle group/peer variants with quoted strings

* Fix CS

* Use `splitAtTopLevelOnly` instead

This solution isn’t that pretty but it is reusing existing machinery

* inline return

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

* Fix return type

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

* Fixup

* Update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-01-23 13:37:41 -05:00
Jordan Pittman
667eac5e88
Handle variants when the same class appears multiple times in a selector (#10397) 2023-01-23 08:13:59 -05:00
Adam Wathan
937ac139a1
Include outline-color in default color properties to transition (#10385)
Co-Authored-By: Dilshod <28673719+deebov@users.noreply.github.com>

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Dilshod <28673719+deebov@users.noreply.github.com>
2023-01-21 14:52:55 -05:00
Adam Wathan
42136e94ce
Run test suite against both engines (#10373)
* Run test suite against both engines

* make eslint happy

* only run `stable` tests on Node 12

* use normal expectation instead of snapshot file

When we run the tests only against `stable` (for node 12), then the
snapshots exists for the `Oxide` build. They are marked as `obsolete`
and will cause the `npm run test` script to fail. Sadly.

Inlined them for now, but ideally we make those tests more blackbox-y so
that we test that we get source maps and that we can map the sourcemap
back to the input files (without looking at the actual annotations).

* properly indent inline css

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-01-20 18:45:04 +01:00
Robin Malfait
b1f4da70d1
Separate stable and oxide engines (#10359)
* separate `stable` and `oxide` mode (package.json in this case)

* drop `install` script (we use a workspace now)

* change required engine to 16

* enable OXIDE by default

* ignore generated `oxide` files

* splitup package.json scripts into "public" and "private" scripts

Not ideal of course, but this should make it a tiny bit easier to know
which scripts _you_ as a developer / contributor have to run.

* drop `workspaces` from the `stable` engine

* drop `oxide` related build files from the `stable` engine

* drop `oxide` engine specific dependencies from the `stable` engine

* use the `oxide-node-api-shim` for the `stable` engine

* add little script to swap the engines

* drop `oxide:build` from `turbo` config

* configure `ci` for `stable` and `oxide` engines

- rename `nodejs.yml` -> `ci.yml`
- add `ci-stable.yml` (for stable mode and Node 12)
- ensure to use the `stable` engine in the `ci-stable.yml` workflow
- drop `oxide:___` specific scripts

* rename `release-insiders` to `release-insiders-stable`

This way we will be able to remove all files that contain `stable` once
we are ready.

* rename `release-insiders-oxide` to just `release-insiders`

* cleanup insider related workflows

* rename `release` -> `release-stable`

* rename `release-oxide` -> `release`

* change names of release workflows

* drop `oxide-` prefix from jobs

* inline node versions

* do not use `turbo` for the stable build

Can't use it because we don't have a workspace in the stable build.

* re-rename CI workflow

* encode default engine in relevant `package.json` files

* make Node 12 work

* increase `node-version` matrix

* make release workflows explicit (per engine)

* add `Oxide` to workflow name

* add integration tests for the `oxide` engine

* add integration tests for the `stable` engine

* run `oxide` integrations against node `18`

* run `stable` integration tests against node 18

We should test node 12 for tailwindcss, but integrations itself can run
against a newer version. In fact, we always ran them against node 16.

* use `localhost` instead of `0.0.0.0`

* ensure `webpack-4` works on Node 18

* run relese scripst directly

Instead of going via `npm`. It's a bit nicer and quicker!

* drop unused scripts

* sync package-lock.json

* ensure to generate the plugin list before running `jest`

We _could_ use an `npm run pretest`, but then you can't run `jest`
directly anymore (which is required for some tools like vscode
extensions).

* cleanup npm scripts

* drop pretend comments

* fix typo

* add `build:rust` as a pre-jest run script
2023-01-19 11:58:25 -05:00