(In our code) we would reference $duration--slow-01 from a namespace, i.e. motion.$duration-slow-01.
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);
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.
The auto-fix option converts
into
There are a lot of problems here:
$duration--slow-01
from a namespace, i.e.motion.$duration-slow-01
.$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:
And the
transition
rule got converted to: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.