stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.91k stars 249 forks source link

nib and Stylus variables do not work well together #333

Open mitar opened 7 years ago

mitar commented 7 years ago

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.

skozin commented 7 years ago

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)?

mitar commented 7 years ago

I started using stylus with autoprefixer to solve this issue for me.

Patrick-Fieger commented 6 years ago

Same here