6 Commits

Author SHA1 Message Date
Robin Malfait
11bfa0a9bd
Detect ambiguity in arbitrary values (#5634)
* detect ambiguity in arbitrary values

* update warning message
2021-09-30 12:39:41 +02:00
Robin Malfait
1ec5438448
Improve arbitrary value support (#5568)
* simplify `inset` plugin

* run `prettier` on stub file

* simplify `align` utility

* improve arbitrary support for outline

This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]`

Input:
```html
outline-[2px_solid_black]
```

Output:
```css
.outline-\[2px_solid_black\] {
  outline: 2px solid black;
  outline-offset: 0;
}
```

---

Input:
```html
outline-[2px_solid_black,2px]
```

Output:
```css
.outline-\[2px_solid_black\2c 2px\] {
  outline: 2px solid black;
  outline-offset: 2px;
}
```

* remove default `type`

* simplify createUtilityPlugin, use types directly

* find first matching type when coercing the value

* introduce css data types

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

These data types will be used to "guess" the type of an arbitrary value
if there is some ambiguity going on. For example:

```
bg-[#0088cc]      -> This is a `color`  -> `background-color`
bg-[url('...')]   -> This is a `url`    -> `background-image`
```

If you are using css variables, then there is no way of knowing which
type it is referring to, in that case you can be explicit:

```
bg-[color:var(--value)]   -> This is a `color`  -> `background-color`
bg-[url:var(--value)]     -> This is a `url`    -> `background-image`
```

When you explicitly pass a data type, then we bypass the type system and
assume you are right. This is nice in a way because now we don't have to
run all of the guessing type code. On the other hand, you can introduce
runtime issues that we are not able to detect:

```
:root {
  --value: 12px;
}

/* Later... */
bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px`
```

* add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
Robin Malfait
ab17c6c427
Handle unknown typehints (#5588)
If you use a typehint like `w-[length:12px]`, then currently that
wouldn't generate anything because we don't have a matchUtilities for
`w` with a `length` type. To fix this, we can detect if this is
unnecessary, if it is we still generate the expected outcome. (In this
case `width: 12px`) but we also warn to the user that we detected this.

Currently we detect this by checking if there is only a single plugin
registered for handling the prefix (e.g.: `w-`). We can probably improve
this by also checking all the types that all plugins are handling for
the resolved plugins.
2021-09-24 18:28:08 +02:00
Robin Malfait
79b37a874c
Ensure invalid typehints are not generated (#5590) 2021-09-24 18:18:48 +02:00
Robin Malfait
9daebe43b9
Replace underscore with space in arbitrary values (#5460)
* refactor dropShadow plugin, use `matchUtilities`

* replace `_` with ` ` for arbitrary values

* remove custom `asList` function

* do not replace escaped underscores with spaces
2021-09-09 18:10:04 +02: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