Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: tailwindlabs/tailwindcss Loading
base: 4194b96
Choose a base ref
...
head repository: tailwindlabs/tailwindcss Loading
compare: d499c59
Choose a head ref
  • 11 commits
  • 11 files changed
  • 1 contributor

Commits on Sep 24, 2021

  1. Ensure invalid typehints are not generated (#5590)

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    79b37a8 View commit details
    Browse the repository at this point in the history

  2. 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.
    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    ab17c6c View commit details
    Browse the repository at this point in the history

  3. simplify inset plugin

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    87da0a1 View commit details
    Browse the repository at this point in the history

  4. run prettier on stub file

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    a45967d View commit details
    Browse the repository at this point in the history

  5. simplify align utility

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    640026c View commit details
    Browse the repository at this point in the history

  6. 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;
}
```
    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    5f45020 View commit details
    Browse the repository at this point in the history

  7. remove default type

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    0ca42fe View commit details
    Browse the repository at this point in the history

  8. simplify createUtilityPlugin, use types directly

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    05e4099 View commit details
    Browse the repository at this point in the history

  9. find first matching type when coercing the value

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    355371f View commit details
    Browse the repository at this point in the history

  10. 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`
```
    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    d07a3e9 View commit details
    Browse the repository at this point in the history

  11. add a bunch of new tests for advanced arbitrary values

    @RobinMalfait
    RobinMalfait committed Sep 24, 2021
    Configuration menu
    Copy the full SHA
    d499c59 View commit details
    Browse the repository at this point in the history
Loading