designsystemet
designsystemet copied to clipboard
Update postcss composes plugin
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.