designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

Update postcss composes plugin

Open Barsnes opened this issue 4 months ago • 0 comments

It currently uses .startsWith(), which has some consequenses with how it looks for a class.

Take our utilities.css file, that has two classes for focus:

.ds-focus:focus-visible {
  @composes ds-focus--visible from './utilities.css';
}

.ds-focus--visible {
  box-shadow: var(--dsc-focus-boxShadow);
  outline: var(--dsc-focus-outline);
  outline-offset: var(--dsc-focus-border-width);
}

If I now use @composes ds-focus from ... in another file, this works fine, since if matches with the class i want first.

The problem occurs if we swap the classes so it reads like this;

.ds-focus--visible {
  box-shadow: var(--dsc-focus-boxShadow);
  outline: var(--dsc-focus-outline);
  outline-offset: var(--dsc-focus-border-width);
}

.ds-focus:focus-visible {
  @composes ds-focus--visible from './utilities.css';
}

If I now use @composes ds-focus from ... in another file, it will match with .ds.focus--visible, since the class begins with the selector I chose,

We should update the plugin to match the whole selector, but only on classes.

Barsnes avatar Oct 02 '24 10:10 Barsnes