360 Commits

Author SHA1 Message Date
Jordan Pittman
602101d030
Allow users to block generation of certain utilities (#9812)
* Add blocklist tests

* Build initial implementation of blocklist

* wip

* wip

* wip

* Update changelog
2022-11-11 11:47:20 -05:00
Ankan Bag
8a2f9ed0d1
Fix !important selectors not being classified as valid class inside safelist config (#9791)
* fix !imp selector not safelisted as valid class

* add tests for !imp selectors in safelist config

* add test to check for invalid variants

* Only check important utilities for patterns that include a `!`

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-11-09 16:58:12 -05:00
Jordan Pittman
6bd991201f
Only sort pseudo elements after classes when using @apply and variants (#9765)
* Sort pseudo elements ONLY after classes

* Update changelog
2022-11-09 16:41:16 -05:00
Konstantin Lapeev
bf28bf61c1
Fix cannot read properties of undefined (reading 'modifier') (#9656)
* fix #9655

* update changelog

* add test for making sure calling variantFn doesn't crash

* make it behave as-if modifiers didn't exist

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2022-11-03 15:10:45 +01:00
Robin Malfait
d33b6503ea
Fix incorrect selectors when using @apply in selectors with combinators and pseudos (#9722)
* sort tags, classes and pseudos per group (separated by combinators)

* use default behaviour of sort

* update changelog
2022-11-03 12:20:38 +01:00
Ankan Bag
c10ba4e9ba
Fix fractional values not being parsed properly inside arbitrary properties (#9705)
* remove redundant closing bracket in regex pattern

* test fractional spacing values in theme function

* add test that ensures arbitrary properties are separate

* update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2022-11-03 11:10:33 +01:00
Brad Cornes
7ec9dc311b
Ensure configured font-feature-settings are included in Preflight (#9707)
* Add `font-feature-settings` to `html` in preflight

* Update source map test snapshots

* Update changelog
2022-11-01 17:52:59 +00:00
Brad Cornes
e231ea6c61
Fix merging of arrays during config resolution (#9706)
* Fix merging of arrays during config resolution

* Update changelog
2022-11-01 16:29:47 +00:00
Connor Pearson
661f58ce8b
Exclude non-relevant selectors when generating rules with the important modifier. Fixes #9677. (#9704) 2022-11-01 09:06:03 -04:00
Khoo Hao Yit
0bdd19aae0
Fix nested style have redundant CSS (#9644)
* Fix nested style have redundant `CSS`

* wip

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-10-24 11:44:32 -04:00
Robin Malfait
ddb9b4d7bc
ensure DEFAULT is taken into account for matchVariant (#9603)
This means that if you define your `matchVariant` as:

```js
matchVariant('foo', (value) => '.foo-${value} &')
```

Then you can't use `foo:underline`, if you want to be able to use
`foo:underline` then you have to define a `DEFAULT` value:

```js
matchVariant('foo', (value) => '.foo-${value} &', {
  values: {
    DEFAULT: 'bar'
  }
})
```

Now `foo:underline` will generate `.foo-bar &` as a selector!
2022-10-18 21:42:17 +02:00
Robin Malfait
b67f52cd57
Increase strictness when using applyVariant on illegale candidates (#9599)
* ensure that cases like `@-[200px]` and `group[:hover]` aren't allowed

* update changelog
2022-10-18 12:03:41 +02:00
Robin Malfait
59395097ed
expose hasDash for the intellisense plugin (#9594) 2022-10-17 17:13:33 +02:00
Robin Malfait
6f77caabfa
Normalize the value for aria-* and data-* variants (#9588)
* ensure to normalize the `value` for `aria-` and `data-` attributes

* update changelog
2022-10-17 13:30:23 +02:00
Robin Malfait
bc004455bc
Expose context.getVariants for intellisense (#9505)
* add `context.getVariants`

* use `modifier` instead of `label`

* handle `modifySelectors` version

* use reference

* reverse engineer manual format strings if container was touched

* use new positional API for `matchVariant`

* update changelog
2022-10-17 12:38:21 +02:00
Robin Malfait
b7d5a2f247
ensure all tests run 2022-10-16 21:50:30 +02:00
Adam Wathan
6cd1631be7
Add dynamic data-* variant (#9559)
* Add data variant

* Update CHANGELOG.md

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2022-10-15 08:41:13 -04:00
Jonathan Reinink
2cae04296a
Add aria variants (#9557)
* Add aria variants

* Add group and peer variants to test

* Add support for group and peer modifiers
2022-10-14 14:54:10 -04:00
Jordan Pittman
66f39a46ab
Add new min and max variants (#9558)
* Rename test variants

* Allow internally negating screens

* Refactor

* Add min/max screen variants

* wip

* Update changelog

* Update tests

* Sort list of variants properly

Technically each test isn’t 100% sorted right in isolation because prettier decisions are basically project-wide. This is close enough though.

* Update tests
2022-10-14 14:25:25 -04:00
Jordan Pittman
3011f46cd8 Enable generalizedModifiers flag by default 2022-10-13 14:13:02 -04:00
Jordan Pittman
45d1a1b593
Add generalized modifier support to matchUtilities (#9541)
* Change `matchVariant` API to use positional arguments

* Fix CS

wip

* Change match variant wrap modifier in an object

Needed for compat w/ some group and peer plugins

* Add modifier support to matchUtilities

* refactor

* Hoist utility modifier splitting

* Rename fn

* refactor

* Add support for generic utility modifiers

* Fix CS

* wip

* update types

* Warn when using modifiers without the option

* Allow modifiers to be a config object

* Make sure we can return null from matchUtilities to omit rules

* Feature flag generalized modifiers

We’re putting a flag for modifiers in front of matchVariant and matchUtilities

* cleanup

* Update changelog

* Properly flag variants using modifiers

* Fix test
2022-10-13 14:01:17 -04:00
Robin Malfait
4338849ff4
Prepare for container queries setup (#9526)
* setup for container queries

* remove container query implementation itself

This will be moved to its own plugin.

* update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-10-12 12:24:46 +02:00
Jordan Pittman
8773fe6c96
Switch to alternate variant label / modifier syntax (#9520)
* Prototype alternate label syntax

* Rename to modifier

* fix tests

update tests

update

Fix

* Update changelog
2022-10-12 11:46:19 +02:00
Robin Malfait
5788a9753a
Add experimental labels for variants (#9456)
* add ability to add a `label`

This could be used for named groups or named container queries in the
future.

* expose `container` to `matchVariant`

Ideally we don't have to do this. But since we will be implementing
`group` and `peer` using the `matchVariant` API, we do require it for
the `visited` state.

* implement `group` and `peer` using the `matchVariant` API

* remove feature flag for `matchVariant`

* update changelog
2022-10-06 13:53:51 -04:00
Robin Malfait
7677c593ec
Implement the supports variant (#9453)
* implement a `supports` variant

* update changelog

* use `--tw` instead of `--tw-empty`
2022-10-04 17:55:10 +02:00
Robin Malfait
727de668fd
Improve type checking for formal syntax (#9448)
* Improve type checking for formal syntax

* Add test

* Change order of test class name

* fix failing tests

* prefer `position` over `size` for backwards compatibility reasons

Previously `bg-[10px_10%]` generated `background-position: 10px 10%` before we introduced the fallback plugins.
Therefore we should prefer `position` over `size` as the default for backwards compatibility.

* update changelog

* ensure correct order

Thanks Prettier!

* update changelog

Co-authored-by: lzt1008 <lzt1008@live.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: liangzhengtai <liangzhengtai_i@didiglobal.com>
2022-09-29 18:24:51 +02:00
Robin Malfait
94d6e7299a
Implement fallback plugins when arbitrary values result in css from multiple plugins (#9376)
* use test with non-any type plugin

* choose backgroundSize over backgroundPosition

Ensure that `backgroundColor` can take any value

* add tests to verify fallback plugins

* implement fallback plugins

Whenever an arbitrary value results in css from multiple plugins we
first try to resolve a falback plugin.

The fallback mechanism works like this:

- If A has type `any` and B has type `color`, then B should win.

  > This is because `A` will match *anything*, but the more precise type
    should win instead. E.g.: `backgroundColor` has the type `any` so
    `bg-[100px_200px]` would match both the `backgroundColor` and
    `backgroundSize` but `backgroundSize` matched because of a specific
    type and not because of the `any` type.
- If A has type `length` and B has type `[length, { disambiguate: true }]`, then B should win.
  > This is because `B` marked the `length` as the plugin that should
    win in case a clash happens.

* Add any type to a handful of plugins

Needs tests tho

* Add any type to `border-{x,y,t,r,b,l}` plugins

* Add test for any type

* Split on multiple lines

* fixup

* add tests for implicit `any` types

* rename `disambiguate` to `preferOnConflict`

* update tests to reflect `any` types a bit better

* update changelog

* annotate any-type test with a bit more information

Just for future debugging reasons!

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-29 17:26:27 +02:00
Robin Malfait
26cab53c15
Support sort function in matchVariant (#9423)
* support `sort` function in `matchVariant`

This will ensure that we can sort arbitrary variant values (and
hardcoded values) to ensure the order.

* update changelog
2022-09-26 13:08:12 -04:00
Jordan Pittman
bf44941049
Allow resolving content paths relative to the config file (#9396)
* Update lockfile

* Tweak formatting

* Refactor content path parsing

* Allow resolving content paths relative to the config file

* Include resolved symlinks as additional content paths

* Update changelog

* Work on suite of tests for content resolution

* reformat integration test list

* Move content resolution tests to integration

* Update future and experimental types
2022-09-23 08:09:02 -04:00
Robin Malfait
e62525226e
Ignore unset values (like null or undefined) when resolving the classList for intellisense (#9385)
* ignored `undefined` and `null` value values for intellisense

We are not completely ignoring "all" falsey values, because then we
would get rid of `0` values (e.g.: `p-0`) which is not what we want.

* update changelog
2022-09-21 14:31:08 +02:00
Robin Malfait
4fddd2d611
Polish matchVariant API (#9313)
* convert the `matchVariant` to look more like `addVariant`

With the biggest difference that the `matchVariant` will have a callback
function that receives the current value of the variant.

* use object as argument for `matchVariant` callback

This will allow us to add more properties in the future if needed
without breaking changes.

- This is a breaking change: `(value) => ...` -> `({ value, other }) => ...`
- This is **not** a breaking change: `({ value }) => ...` -> `({ value, other }) => ...`

* add types for `matchVariant`
2022-09-16 15:37:35 +02:00
Jordan Pittman
8fe6f4868e
Don't emit utilities containing invalid theme fn keys (#9319)
* Don't emit utilities containing invalid theme keys

* Update changelog
2022-09-14 13:27:01 -04:00
Robin Malfait
527031d5f6
Improve data type analyses for arbitrary values (#9320)
* improve split logic by delimiter

The original RegEx did mostly what we want, the idea is that we wanted
to split by a `,` but one that was not within `()`. This is useful when
you define multiple background colors for example:
```html
<div class="bg-[rgb(0,0,0),rgb(255,255,255)]"></div>
```

In this case splitting by the regex would result in the proper result:
```js
let result = [
  'rgb(0,0,0)',
  'rgb(255,255,255)'
]
```

Visually, you can think of it like:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgb(0,0,0),rgb(255,255,255)]"></div>
    ·                       ──┬── ┬    ─────┬─────
    ·                         │   │         ╰─────── Guarded by parens
    ·                         │   ╰───────────────── We will split here
    ·                         ╰───────────────────── Guarded by parens
    │
    └─
```

We properly split by `,` not inside a `()`. However, this RegEx fails
the moment you have deeply nested RegEx values.

Visually, this is what's happening:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgba(0,0,0,var(--alpha))]"></div>
    ·                         ┬ ┬ ┬
    ·                         ╰─┴─┴── We accidentally split here
    │
    └─
```
This is because on the right of the `,`, the first paren is an opening
paren `(` instead of a closing one `)`.

I'm not 100% sure how we can improve the RegEx to handle that case as
well, instead I wrote a small `splitBy` function that allows you to
split the string by a character (just like you could do before) but
ignores the ones inside the given exceptions. This keeps track of a
stack to know whether we are within parens or not.

Visually, the fix looks like this:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgba(0,0,0,var(--alpha)),rgb(255,255,255,var(--alpha))]"></div>
    ·                         ┬ ┬ ┬             ┬       ┬   ┬   ┬
    ·                         │ │ │             │       ╰───┴───┴── Guarded by parens
    ·                         │ │ │             ╰────────────────── We will split here
    ·                         ╰─┴─┴──────────────────────────────── Guarded by parens
    │
    └─
```

* use already existing `splitAtTopLevelOnly` function

* add faster implemetation for `splitAtTopLevelOnly`

However, the faster version can't handle separators with multiple
characters right now. So instead of using buggy code or only using the
"slower" code, we've added a fast path where we use the faster code
wherever we can.

* use `splitAtTopLevelOnly` directly

* make split go brrrrrrr

* update changelog

* remove unncessary array.from call

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-14 14:08:56 +02:00
Jordan Pittman
01f928d6de
Handle variants in utility selectors using :where() and :has() (#9309)
* Replaces classes in utility selectors like :where and :has

* Update changelog

* wip
2022-09-12 15:08:31 -04:00
Brandon McConnell
cc1be47a4f
Add support for visibility: collapse with new collapsed utility (#9181)
* Add support for `visibility: collapse` with new `collapsed` utility

* fixup

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-09 13:19:24 -04:00
Jordan Pittman
d6bec49934
Fix parallel variant ordering clash (#9282)
* Remove remnants of the user layer

It hasn’t been used in a while

* Rewrite sort offset generation

* wip

* wip

wip

* Handle parasite utilities

* wip

* wip

* Make parallel variants sorting more resillient

It’s not perfect but it’s close

* fix

* remove todo

it adds a new bit so it can’t

* Simplify getClassOrder usage

* Simplify

oops

oops

* Add parasite utility for `dark`

dark mode class name

* Cleanup

* Cleanup

* Simplify

* format files

* Fix prettier plugin to use git build of Tailwind CSS

Symlink and build instead of adding a recursive dev dependency

It breaks node < 16

* Fix prettier error

* wip

* fix test

* Update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2022-09-09 13:12:43 -04:00
Remco Haszing
88e98f557c
Fix issue with Tailwind modifying global state (#9294)
* Fix issue with Tailwind modifying global state

When running Tailwind, it modifies the plugin defaults parameters. As a
result Tailwind using a Tailwind plugin in the same process twice yields
different results.

* Add failing test

* Undo defaults change

* wip

* Fix shared mutation problem

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-09 11:45:25 -04:00
Jordan Pittman
db50bbbc71
Handle variants on complex selectors (#9262)
* Handle variants on complex selector utilities

* Update changelog
2022-09-06 12:58:38 -04:00
Jordan Pittman
17b81b4150
Allow negating utilities using min/max/clamp (#9237)
* Allow negating utilities using min/max/clamp

* Update changelog
2022-09-01 12:15:23 -04:00
Brad Cornes
edf47a012d
Fix theme(fontFamily.*) when family contains fontFeatureSettings config (#9217) 2022-08-30 17:18:41 +01:00
Jordan Pittman
58cc7ed3e8
Re-use existing entries in the rule cache (#9208)
* Add test

* Reuse rule cache entries when possible

* Update changelog
2022-08-29 14:13:32 -04:00
Jordan Pittman
7f93550e63
Honor the hidden attribute on elements in preflight (#9174)
* Honor the `hidden` attribute on elements

You’ll still be able to override this with utilities but this ensures that things like `<iframe hidden>` work as expected

* Update changelog
2022-08-24 17:05:44 -04:00
Justin Wong
9d495b9ed0
Implement negative outline offsets (#9136)
* Implement negative outline offsets

* Update changelog
2022-08-19 06:32:18 -04:00
Jordan Pittman
7924e7b40c Don’t replace all instances of the same class
This isn’t 100% correct either so we’re backing out this change
2022-08-15 16:05:47 -04:00
Jordan Pittman
ef74fd3db6
Fix @apply selector rewriting when multiple classes are involved (#9107)
* Rewrite `replaceSelector` using `postcss-selector-parser`

* Sort classes between tags and pseudos when rewriting selectors

* Update changelog
2022-08-15 14:43:41 -04:00
Jordan Pittman
b0018e20bf
Add future flag to disable color opacity utility plugins (#9088)
* Add future flag to disable opacity utility plugins

This will become the default in Tailwind CSS v4.0

* Update changelog
2022-08-15 13:45:02 -04:00
Jordan Pittman
2882d4c9ee
Fix ring color utility generation when using respectDefaultRingColorOpacity (#9070)
* Correct ring color list when using `respectDefaultRingColorOpacity`

* Update changelog
2022-08-10 10:36:04 -04:00
Adam Wathan
c7f627dd68
Add support for configuring default font-feature-settings for a font-family (#9039)
* Add support for configuring default font-feature-settings for a font-family

* Update changelog

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2022-08-08 15:02:08 -04:00
Jordan Pittman
0a3aad9511 Revert "Don't use cursor: pointer for buttons by default (#8962)"
We’re undecided on whether or not this should be released right now so we’ll revert it and revisit it later.
2022-08-05 10:05:46 -04:00
Jordan Pittman
20456efae4
Fix @apply of user utilities when negative and non-negative versions both exist (#9027)
* Fix application of rules with multiple matches of differing selectors

`-foo-1` and `foo-1` are both matches for the class `-foo-1` but `@apply` only wants the first one. It would remove the second one and cause an error because it’s an entirely separate match that had it’s only rule removed.

* Update changelog
2022-08-04 14:24:17 -04:00