Commit graph

28 commits

Author SHA1 Message Date
Jordan Pittman
b4f3cddb50 Remove uses of ::-webkit-backdrop 2023-11-16 15:39:05 +00:00
Robin Malfait
dba5043591
Ensure all built-in plugins have tests (#11618)
* move `preflight` tests to `plugins` test folder

* move `container` tests to `plugins` test folder

* add a test that ensures that all built-in plugins have tests

This is based on a few assumptions:

1. All plugins exist in the `corePlugins.js` file and are exported as
   `corePlugins`
2. Each exported plugin in that object has a file with a corresponding
   name in the current (`tests/plugins/`) folder

* add dedicated plugin tests in the `plugins` folder

* add a test that ensures that all built-in variant plugins have tests

This is based on a few assumptions:

1. All variant plugins exist in the `corePlugins.js` file and are
   exported as `variantPlugins`
2. Each exported plugin in that object has a file with a corresponding
   name in the current (`tests/plugins/variants/`) folder

* add dedicated variant plugin tests in the `plugins/variants` folder

* cleanup basic usage test

* move existing animation tests to animation plugin tests

* move `apply-important-selector` tests to more appropriate location
2023-07-24 11:41:52 +02:00
Robin Malfait
ef2ebb28d5
Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist (#11402)
* exclude `Features.LogicalProperties` lightningcss feature

We don't want this to automatically apply since we have dedicated
logical property based utilities already.

We also have a feature flag to toggle some utilities to make use of
logical property based ones.

This feature should be opt-in to prevent backwards compatibility (e.g.:
RTL sites that _did_ use a mr-4 explicitly).

* update default browserslist

* explicitly include/exclude Lightning CSS features

* update tests based on new browserslist and include/exclude features from Lightning CSS

* update integration tests

* prefer user browserslist, fallback to built-in browserslist

* always include Nesting

If a custom browserslist config is used, then we don't explicitly set
the include/exclude features from Lightning CSS (except for nesting, we
always want to process nesting)

* ensure to fallback to the current working directory

* update changelog
2023-06-09 20:37:36 +02:00
Jordan Pittman
e51b09ca65
Move unknown pseudo elements outside of :is (#11345)
* More pseudo elements outside of `:is` by default

* Update changelog
2023-06-08 15:00:58 -04:00
Robin Malfait
352c563d99
Fix source maps issue resulting in a crash (#11319)
* only try to pretty print `err.source` if it exists

* fix small typo

* drop unnecessary path resolving

* add `from` and `to` to `run` test helper

* enable all source map tests

* ensure source maps are generated properly

* update annotation values in tests

* handle `map: true`

* add test for `map: { inline: true }`

* force Lightning CSS to handle an inline source map

* base64 encode the test name

This will get rid of special characters that can cause issues /
confusion when debugging tests.

* ensure utilities and components with variants are pointing to the correct source

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

* update changelog

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-05-31 18:28:11 +02:00
Robin Malfait
581cf6abcc
Merge engines (#11275)
* Simplify CI, make oxide engine the default (#11281)

* remove integration tests for the `stable` engine

* make `integration-tests-oxide` the default integration tests workflow

* remove unnecessary CACHE_PREFIX

* drop `ci-stable.yml` workflow

* make `CI — Oxide` the default

+ drop testing against 3.3 branch (since this is stable only)
+ remove unnecessary CACHE_PREFIX

* drop `release-insiders-stable.yml` workflow

* make `Release Insiders — Oxide` the default

+ change release channel to just `insiders` instead of `oxide-insders`

* drop 3.3 branch from integration tests

* change job name for insiders release

This makes it consistent with the other job names

* prep `release-oxide.yml` workflow to be the default workflow

* add Tailwind Play update

Currently commented out until we figure out how this will work exactly.

* use `env.VERSION` for the version we want to release

* drop `release-stable.yml` workflow

* make `release-oxide.yml` the default `release.yml` workflow

* inline "Calculate environment variables" step

* cache node_modules and cargo related files/folders in the release step

* always use the default CLI

* drop oxide specific implementation

* ensure we test `--postcss` in the CLI

Even for the Oxide engine

* always process `@import` rules

* remove `generalizedModifiers` flag

This was already enabled by default. This commits removes some of the
outstanding references to it.

* remove built-in peer dependencies for the CLI

* drop unused esbuild dependency

* fix type for `configBag`

* setup Lightning CSS for the CLI

* drop `cssnano` dependency

We only used this in the CLI and we now use Lighting CSS which has this
built in already. Therefore we can get rid of this as a dependency.

* ensure `imported.css` file exists in integration tests

* passthrough `options` to lightningcss

Ideally we can read this from `result.map` instead. However this doesn't
get filled in for whatever reason even though we use `map: {inline:true}`.

You can run the `tests/cli.test.js`, and more specifically the
`--postcss supports process options with custom config` test.

* Always process CSS with Lightning CSS

Some tests temporarily skipped. Autoprefixer removed from `postcss.config.js` stubs since vendor prefixing handled by Lightning.

* Remove code for normalizing `@import "tailwindcss/*"` statements

* ensure tailwind doesn't crash when a `tailwind.config.js` file is not present

* add `log.group` to group multiple messages together with different types

* remove engine specific checks in integration tests

* remove unused imports/variables

Make linting check happy

* support `content: ['auto']`

This will allow us to still use auto content detection, but since this
is part of the `content` array, it also allows you to add custom paths
if you want.

E.g.:
```js
content: ['auto', './node_modules/my-library/*.{jsx,tsx}']
```

* ensure `content.files` is always an array

This allows us to simplify some checks because 'auto' will now be part
of the array instead of checking if `content.files` is auto or if it is
an array containing 'auto'.

* fix tests, ensure default config is not injected

* simplify `auto` normalization

* always use the defaultFullConfig

No need to override the defaultFullConfig with `{content: 'auto'}`
because this will be included in the default config already.

* drop condition which ensured `files` was an empty array

This is not needed anymore because when `content` is omitted it behaves
as if it was set to `auto`.

* drop removal of `content`

We used to remove the `content` from the actual configuration files when
using `tailwindcss init` for the oxide engine. This was to ensure that
`auto content detection` was used instead (by default).

But now it is always enabled by default therefore this is not needed
anymore.

* ensure setting `content: 'auto'` works

* improve file cache handling

We have to make sure that we get into the previous state whenver a test
is done.
We were using some `!fileCache[filePath]` checks, however we also used
`null` as a sentinel value when something wasn't found. But, `null` is
falsey as well so some checks where incorrect.

Using a dedicated value and a `Map` makes this safer and more correct
because we can now use `.has()`.

* drop `cleanupFile`, `removeFile` will already take care of it

* drop oxide check in `resolvedChangedContent`

At this point the `context.tailwindConfig.content.files` is already
fully resolved regardless of the engine we are in.

* refactor `parseCandidateStringsFromFiles` strategy, to make use of a proper feature flag

* use feature flag for sorting classes

Once the Oxide engine is the default default, then we can drop this
entirely because the result from the Rust parser will already be sorted.

* drop `crosscheck` from tests where it is safe

First pass of deleting `crosscheck`. These are all the places where we
didn't have any differences between the Oxide and Stable engine.

* replace `__OXIDE__` in corePlugins with feature flag

* use `globalThis.__OXIDE__ ?? false`

This will ensure that in places where we don't have `__OXIDE__` that we
can still properly fallback to `false`.

* use `flex` as the go-to utility when testing features

* prefer `space-utilities` tests instead of `oxide` test

* drop crosscheck check

Since the `oxideParser` is disabled by default, all the tests can use
the `stable` output.

* use simple `false` default values for feature flag defaults

* drop `__OXIDE__` injections in build scripts

* use stable `flex` and `z-{...}` utilities instead of color utilities

flex and z-index related utilities are more stable than the color
utilities right now because the color utilities will use a raw color
value or a combination with a css variable depending on a feature flag.

* drop unused `ENGINE` environment variable

* drop stable engine manifest files

* drop `swap-engines` tooling

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-05-24 22:10:00 -04:00
Robin Malfait
f49b054b7d
[Oxide] Add built-in @import processing support (#11239)
* run PostCSS relative to test file

The PostCSS `from` was always set to the `tests/util/run` file with the
current test name as a query param to make it unique. However, that
results in issues with relative file paths because they are now relative
to this file instead of the actual test file.

Luckily, `expect.getState()` exposes the `testPath` value that points to
the current test file itself.

* add built in `@import` processing

+ additional features such that you can use `@tailwind` and `@config`
  directives before the `@import` at rule which isn't normally allowed.
  However "@tailwind" in a way is an `@import` and `@config` in a way is
  a `@charset` which can be used before the `@import` at rule.

* drop partial normalizeTailwindDirectives when in the Oxide engine

This will now be handled by Tailwind from a higher level, so the core
doesn't have to worry about normalizing this anymore since it will
always be normalized right now.

* add `handleImportAtRules` to CLI

* update changelog

* scope `import processing` to the oxide engine

* update Changelog

* use direct comparison

We don't need the `startsWith` check anymore because the contents of the
comment will be the actual value we expect.
2023-05-15 19:29:57 +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
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
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
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
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
Jordan Pittman
a1346c9a8e
Don't rewrite source maps for @layer rules (#8971)
* Cleanup

* Don’t rewrite source maps for `@layer` rules

* Update changelog
2022-07-27 12:19:08 -04:00
Jordan Pittman
6b1eb19079
Split ::backdrop into separate defaults group (#8567)
* Split `::backdrop` into separate defaults group

* Update tests

* Update changelog
2022-06-09 16:26:18 -04:00
Adam Wathan
4f400767a8
Add ::backdrop to universal defaults (#8526)
* Add `::backdrop` to universal defaults

* Update changelog
2022-06-06 15:53:08 -04:00
Jordan Pittman
7ed46b6f52 Re-enable new features
This reverts commits 1456ed9021, d0269c24b3, and 57699a0403.
2022-04-12 14:13:04 -04:00
Jordan Pittman
57699a0403
Prep for patch release (#8098)
* Disable backdrop variant

* Disable enabled variant

* Disable border spacing utilities

* Disable text-start/end utilities

* Disable poll option in CLI

* Disable ring color default fn

* Disable dark mode class name customization

* Disable support for `Document` node types

* Disable rgb/hsl fns

* Update tests

* Temporarily disable type generation

* Update changelog
2022-04-12 13:58:57 -04:00
Juan Martín Seery
dbb5b1d8f7
Added border-spacing utility (#7102)
* Added `border-spacing` utility

* Update to base CSS variable approach

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2022-03-04 11:20:23 -05:00
Jordan Pittman
b94d565eb6
Preserve source maps for generated CSS (#7588)
* Preserve source maps for `@apply`

* Overwrite the source for all cloned descendants

* Preserve source maps when expanding defaults

* Verify that source maps are correctly generated

* Update changelog
2022-02-23 11:24:54 -05:00
Jordan Pittman
f2d73b8c3d
Change how we handle defaults (optimized or not) (#6926)
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2022-01-07 11:39:45 -05:00
Jordan Pittman
4041d04b89
Move defaults to their own always-on layer (#6500)
Default's declarations are now processed and merged even when there is no tailwind base directive included in the stylesheet. Without this applying tailwind utilities in css modules would break if they relied on defaults rules.

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-12-14 12:21:38 -05:00
Robin Malfait
f12c0e1fa5
Improve css expectations in tests (#5819)
* use String.raw for css escapes

This will allow us to write code like:
```css
.mobile\:font-bold {}
```
Instead of
```css
.mobile\\:font-bold {}
```

Which resembles "real" css way better in our tests.

* use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
Robin Malfait
50b766dd47
Remove variants related code (#5465)
* drop `variants` related resolveConfig functionality

More AOT code that we could get rid of!

* drop more files!

I keep finding these unused files 😅

* Update setupContextUtils.js

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-09-10 09:34:27 -04:00
Robin Malfait
a34bd62bb6
Remove lodash (#5390)
* remove `lodash` usage

* implement custom cloneDeep to replace lodash's

* drop lodash in processPlugins

* add `toPath` utility

* add `tap` utility

* add `cloneDeep` utility

* drop lodash in evaluateTailwindFunctions

* add `defaults` utility

* drop lodash from `resolveConfig`

* remove `lodash` dependency
2021-09-06 14:15:10 -04:00
Robin Malfait
e37931ba65
JIT by default - move tests and make them consistent (#5374)
* move `./tests/jit` to `./tests`

* make tests consistent

Abstracted a `run` function and some syntax highlighting helpers for
`html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
Robin Malfait
bfc61625d9
[WIP] Unify JIT and AOT code paths (#4188)
* WIP

* WIP

* Finish combining JIT and AOT plugins

Still lots of clean up that can be done in some of the more complex ones, but at least it's one file per plugin now.

* Remove unused import

* Fix AOT generation bugs

* Move corePlugins/index.js to corePlugins.js

* Convert JIT files to ESM

* Move tests

* Reorder core plugins to match JIT order

* Update AOT apply tests

* Unify utils

* Combine plugin lists to one single source of truth

* Finish resolving merge conflicts, fix tests

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-04-30 10:58:40 -04:00