sebnitu / vrembem / 25566882870

91%

main: 100%

push

github

Refactor Sass modules and improve tokens API (#2807)

This PR refactors Sass plugin modules so that they are more tightly coupled to the tokens API and reduce the extra API they provided themselves. Sass plugin modules that expand the tokens module now use hooks and events to apply their features directly to the tokens module.

As part of this update, a new `breakpoints` tokens plugin has been introduced that allows setting media-query based tokens using `tokens.set` by setting a `"type": "breakpoints"` in the provided value map. To match this pattern, `themes` (previously named theme) has been refactored to also handle theme token maps using `"type": "theme"` in the provided value map. All tokens are now output and automatically wrapped with their required selector blocks when `tokens.output()` is called.

**Example usage**

Below is an example of a single `tokens.set` call being used to set normal, breakpoint, and theme tokens:

<details open>
<summary>SCSS Input</summary>

```scss
@use "@vrembem/core/tokens";
@use "@vrembem/core/breakpoints";
@use "@vrembem/core/themes";

@include tokens.set(
  "asdf",
  (
    "margin": 2rem 0,
    "padding": (
      "type": "breakpoints",
      "default": 0,
      "md": 1em,
      "lg": 2em
    ),
    "forest": (
      "type": "theme",
      "background": green,
      "foreground": lightgreen
    )
  )
);

@include tokens.output();
```

</details>

<details>
<summary>CSS Output</summary>

```css
:root {
  --vb-asdf-margin: 2rem 0;
  --vb-asdf-padding: 0;
}

@media (min-width: 760px) {
  :root {
    --vb-asdf-padding: 1em;
  }
}
@media (min-width: 990px) {
  :root {
    --vb-asdf-padding: 2em;
  }
}
.vb-theme-forest {
  --vb-asdf-background: green;
  --vb-asdf-foreground: lightgreen;
}
```

</details>

**Additional Changes**

- `core`: Renamed `theme-prefix` config option to `prefix-themes`.
- `core`: Make config options naming pattern more consistent.
- `core`: Remove breakpoints argument from `tokens.override` mi... (continued)

569 of 651 branches covered (87.4%)

Branch coverage included in aggregate %.

886 of 952 relevant lines covered (93.07%)

32.07 hits per line