carbon-design-system / stylelint-plugin-carbon-tokens

Apache License 2.0
9 stars 3 forks source link

indirect styles for padding (or anything?) rejected #106

Open wkeese opened 9 months ago

wkeese commented 9 months ago

This works fine with no lint errors:

.foo {
  padding: spacing.$spacing-04 spacing.$spacing-05;
}

However, this fails:

$container-padding: spacing.$spacing-04 spacing.$spacing-05;
.foo {
  padding: $container-padding;
}

Is it possible to support both (without throwing an error)?

lee-chase commented 4 months ago

This is tricky and requires a bit of thought because of how local variables are being handled.

Not sure if this is a problem that goes away if I switch to using the postcss processor. Probably worth doing that first rather than updating the existing parsing.

wkeese commented 4 months ago

A postcss processor is an interesting idea, although for layout variables IIRC it converts them to raw values? It used to use CSS variables but I think you discontinued that, so that (at least with some configurations) it converts

padding: spacing.$spacing-05

into

padding: 1rem

(or something like that). In which case, the stylelint wouldn't be able to do its job.

lee-chase commented 4 months ago

@wkeese I meant to refer to the postcss value parser, which I think just produces a tree from the value.

Either way, with regards to this issue, it is not a quick fix due to the way the SCSS values are currently being processed.