* Reduce specificity of `rtl`, `ltr`, and `dark` variants
Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.
Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add `*` as child variant
* add `*` as allowed variant character
* update test to reflect Lightning CSS output
* add `childVariant` test
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Gregor Kaczmarczyk <github@aggreggator.de>
* Add forced-colors variant
Also add a contrast-custom variant to match custom contrast preferences
* use `toMatchSnapshot` instead of `toMatchFormattedCss`
More info: https://github.com/tailwindlabs/tailwindcss/pull/12170
* remove `contrast-custom` variant
* move `forcedColorsVariants` next to `prefersContrastVariants`
* update changelog
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* sync package-lock.json
* reduce generated examples
By default we use the default config when creating the quick tests for a
given plugin. However, this can result in _a lot_ of changes. For
example, when you update the opacity values, then these values will be
generated for each color, and for each plugin that uses that color.
You can see that behaviour in Adam's PR (https://github.com/tailwindlabs/tailwindcss/pull/11832).
He added 6 values to the opacity configuration. This resulted in a diff
that looked like this:
```
+219,436 −9
```
This reduces the amount of examples for plugins that generate _a lot_ of
output otherwise.
* use `toMatchSnapshot`
This way all the `quickPluginTest` and `quickVariantPluginTest`
implementations are the same. This also allows us to update tests after
config changes in an easier way because they use snapshot tests right
now.
* use real colors for reduced red
This will make it a tiny bit easier to debug what's going on if we need
it in the future since it's using the same values as the real colors.
The main things I'm seeing right now are:
1. Some selectors are broken up into multiple selectors, especially when
there are pseudo classes involved where the output is unknown. For
example `::ng-deep, ::v-deep {}` will be split into `::ng-deep {},
::v-deep {}`
2. It looks like a lot of selectors were dropped, however after looking
at them in more detail I noticed that they were _duplicated_ before.
This means that now the output will be smaller in these cases!
* 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
