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.

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

Update postcss composes plugin #2555

Open
Barsnes opened this issue Oct 2, 2024 · 0 comments
Open

Update postcss composes plugin #2555

Barsnes opened this issue Oct 2, 2024 · 0 comments
Labels
✨enhancement ⚙️ technical Technical improvements, maintenance or other issues that are not directly linked to a feature

Comments

@Barsnes
Copy link
Member

Barsnes commented Oct 2, 2024

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.

@github-project-automation github-project-automation bot moved this to 🔵 Inbox in Team Design System Oct 2, 2024
@Barsnes Barsnes added ✨enhancement ⚙️ technical Technical improvements, maintenance or other issues that are not directly linked to a feature labels Oct 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨enhancement ⚙️ technical Technical improvements, maintenance or other issues that are not directly linked to a feature
Projects
Status: 📋 Backlog
Development

No branches or pull requests

1 participant