sebnitu / vrembem / 24736726185

90%

main: 100%

push

github

Implement CSS @layer for cascade layers (#2778)

This PR implements the `@layer` CSS rule by defining and wrapping all Vrembem packages with the layer they should reside in. This creates the following cascade order:

```css
@layer tokens, base, components, utilities;
```

As part of this update, core provides a new entry to output the pre-defined `@layer`'s rule. This can be used in both Sass and CSS contexts but is not defined by default. This allows consumers to optionally create their own layers rules as needed.

### Example 1

In this example, consumers can ensure that their own application styles are overriden by Vrembem utilities but also that their custom styles override the rest of the library layers by adding a custom layer in between components and utilities.

```css
@layer tokens, base, components, app, utilities;
@import "vrembem";

@layer app {
  ...
}
```

### Example 2

In this example, the entire Vrembem library is imported into its own library layer and kept separate from the user defined layers order.

```css
@layer lib, app;
@import "vrembem" layer(lib);

@layer app {
  ...
}
```

### Example 3

In this example, we import the Vrembem defined `@layer` order. The consumer's custom styles can just write their styles or apply layer wrappers to place them in the correct layer space.

```css
@import "vrembem/layer";
@import "vrembem";

@layer components {
  .custom-component {
    ...
  }
}

.unlayered-styles {
  ...
}
```

**Additional changes**

- `all`: Removed build flow from packages that don't define their own CSS variables. This currently applies to all packages except `input`.
- `core`: Fixed package entry for tokens output.
- `utility`: Important flags are now disabled by default.
- `docs`: Updated documentation styles to incorporate the use of Vrembem defined layers order.

565 of 647 branches covered (87.33%)

Branch coverage included in aggregate %.

882 of 948 relevant lines covered (93.04%)

32.09 hits per line