Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve addVariant API #5809

Merged
merged 15 commits into from
Oct 18, 2021
Merged

Improve addVariant API #5809

merged 15 commits into from
Oct 18, 2021

Commits on Oct 18, 2021

  1. fix incorrect comment 

    Probably messed this up in another PR, so just a bit of cleaning.
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    f9343cd View commit details
    Browse the repository at this point in the history

  2. implement a formatVariantSelector function 

    This will be used to eventually simplify the addVariant API.

The idea is that it can take a list of strings that define a certain
format. Then it squashes everything to a single format how you would
expect it.

E.g.:

Input:
  - '&:hover'
  - '&:focus'
  - '.dark &'
  - ':merge(.group):hover &'
  - ':merge(.group):focus &'
Output:
  - ':merge(.group):focus:hover .dark &:focus:hover'

The API here is:
  - `&`, this means "The parent" or "The previous selector" (you can
    think of it like if you are using nested selectors)
  - `:merge(.group)`, this means insert a `.group` if it doesn't exist
    yet, but if it does exist already, then merge the new value with the
    old value. This allows us to merge group-focus, group-hover into a
    single `.group:focus:hover ...`
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    694effd View commit details
    Browse the repository at this point in the history

  3. add new format, withRule and wrap API for addVariant

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    757d50e View commit details
    Browse the repository at this point in the history

  4. implement backwards compatibility 

    This will ensure that the backwards compatibility for `modifySelectors`
and direct mutations to the `container` will still work.

We will try to capture the changes made to the `rule.selector`, we will
also "backup" the existing selector. This allows us to diff the old and
new selectors and determine what actually happened.

Once we know this, we can restore the selector to the "old" selector and
add the diffed string e.g.: `.foo &`, to the `collectedFormats` as if
you called `format()` directly. This is a bunch of extra work, but it
allows us to be backwards compatible.

In the future we could also warn if you are using `modifySelectors`, but
it is going to be a little bit tricky, because usually that's
implemented by plugin authors and therefore you don't have direct
control over this. Maybe we can figure out the plugin this is used in
and change the warning somehow?
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    758f767 View commit details
    Browse the repository at this point in the history

  5. fix incorrect test 

    This was clearly a bug, keyframes should not include escaped variants at
all. The reason this is here in the first place is because the nodes in
a keyframe are also "rule" nodes.
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    7e9e155 View commit details
    Browse the repository at this point in the history

  6. swap the order of pseudo states 

    The current implementation had a strange side effect, that resulted in
incorrect class definitions. When you are combining the `:hover` and
`:focus` event, then there is no difference between `:hover:focus` and
`:focus:hover`.

However, when you use `:hover::file-selector-button` or `::file-selector-button:hover`,
then there is a big difference. In the first place, you can hover over the full file input
to apply changes to the `File selector button`.
In the second scenario you have to hover over the `File selector button` itself to apply changes.

You can think of it as function calls:
- focus(hover(text-center))

What you would expect is something like this:
`.focus\:hover\:text-center:hover:focus`, where `hover` is on the
inside, and `focus` is on the outside. However in the current
implementation this is implemented as
`.focus\:hover\:text-cener:focus:hover`
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    0a4a064 View commit details
    Browse the repository at this point in the history

  7. add more variant tests for the new API

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    e936a00 View commit details
    Browse the repository at this point in the history

  8. update parallel variants tests to make use of new API

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    c5ec238 View commit details
    Browse the repository at this point in the history

  9. implement core variants with new API

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    4cb8137 View commit details
    Browse the repository at this point in the history

  10. simplify/cleanup existing plugin utils 

    We can get rid of this because we drastically simplified the new
addVariant API.
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    25c8000 View commit details
    Browse the repository at this point in the history

  11. add addVariant shorthand signature 

    The current API looks like this:

```js
addVariant('name', ({ format, wrap }) => {
  // Wrap in an atRule
  wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' }))

  // "Mutate" the selector, for example prepend `.dark`
  format('.dark &')
})
```

It is also pretty common to have this:
```js
addVariant('name', ({ format }) => format('.dark &'))
```
So we simplified this to:
```js
addVariant('name', '.dark &')
```

It is also pretty common to have this:
```js
addVariant('name', ({ wrap }) => wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })))
```
So we simplified this to:
```js
addVariant('name', '@media (prefers-reduced-motion: reduce)')
```
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    b81ceaa View commit details
    Browse the repository at this point in the history

  12. improve fontVariantNumeric implementation 

    We will use `@defaults`, so that only the resets are injected for the
utilities we actually use.
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    634dd2f View commit details
    Browse the repository at this point in the history

  13. fix typo

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    f764948 View commit details
    Browse the repository at this point in the history

  14. allow for nested addVariant shorthand 

    This will allow to write something like:

```js
addVariant('name', `
  @supports (hover: hover) {
    @media (print) {
      &:hover
    }
  }
`)
// Or as a one-liner
addVariant('name', '@supports (hover: hover) { @media (print) { &:hover } }')
```
    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    e36abdd View commit details
    Browse the repository at this point in the history

  15. update changelog

    @RobinMalfait
    RobinMalfait committed Oct 18, 2021
    Configuration menu
    Copy the full SHA
    fb05ee2 View commit details
    Browse the repository at this point in the history