search

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

Apache License 2.0
9 stars 3 forks source link

Incorrect auto-fix for transitions #124

Open wkeese opened 3 months ago

wkeese commented 3 months ago

The auto-fix option converts

@use "@carbon/layout" as layout;
...
transition: padding 400ms cubic-bezier(0.25, 0.8, 0.075, 1);

into

transition: layout.padding $duration--slow-01
  cubic-bezier(0.25, 0.8, 0.075, 1);

There are a lot of problems here:

  1. "padding" was changed to "layout.padding".
  2. (In our code) we would reference $duration--slow-01 from a namespace, i.e. motion.$duration-slow-01.
  3. There might be an issue with the number of dashes,$duration--slow-01 should only have one dash after duration, i.e. $duration-slow-01, but that depends on Carbon 10 vs. Carbon 11 so I need to investigate more.

PS: The problem may be related to which modules are imported, and the order they are imported. For example I have a file like:

// Only one @use call.
@use "@mdx/styles/common/prefixes" as prefixes;
...
      transition: transform 240ms cubic-bezier(0, 0, 0.3, 1),
        max-height 240ms cubic-bezier(0, 0, 0.3, 1);

And the transition rule got converted to:

      transition: prefixes.transform $duration--moderate-02 cubic-bezier(0, 0, 0.3, 1),
        max-height $duration--moderate-02 cubic-bezier(0, 0, 0.3, 1);

It seems like stylelint-plugin-carbon-tokens picked the prefixes namespace because it's the first @use call, and/or because the file didn't have a @use call to import @carbon/motion.