nib and Stylus variables do not work well together
mitar opened this issue · comments
For this example:
@import 'nib'
$input-transition ?= all .3s
.test
transition $input-transition
The output without nib is:
.test {
-webkit-transition: all;
-moz-transition: all;
-o-transition: all;
-ms-transition: all;
transition: all;
}
But it should be more something like:
.test {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
If I do not use a variable, it works.
Hitting the same issue.
This:
.test
$opacity-trans = opacity 0.2s linear
transition $opacity-trans
incorrectly produces
.test {
transition: opacity;
/* prefixed variants */
}
However, this:
.test
$opacity-trans = opacity 0.2s linear
transition $opacity-trans, color 0s linear
correctly produces
.test {
transition: opacity 0.2s linear, color 0s linear;
/* prefixed variants */
}
Do you know of any workarounds apart from not using variables or adding dummy items to the list (like color 0s linear
in the example above)?
I started using stylus with autoprefixer to solve this issue for me.
Same here