stephenlacy/gulp-stylus

A way to ommit prefix class for component status

Closed this issue · 1 comments

I want to folllow the CSS style guide that Medium has: https://gist.github.com/cuibonobo/16f555c0047ab80044cf, with:

.componentName
  background blue

.componentName.is-stateOfComponent
  background red

And then compile them with gulp-stylus and this config:

gulp
  .src('./src/component.styl')
  .pipe(
    stylus({
      prefix: 'foo-',
      include: [
        ...
      ]
    })
  )....

Resulting in:

.foo-componentName
  background: blue;

.foo-componentName.is-stateOfComponent
  background: red;

Now it's:

.foo-componentName
  background: blue;

.foo-componentName.foo-is-stateOfComponent
  background: red;

Resulting in a lot of extra bytes..

Is this possible? I have hundreds of selectors, so the prefix option is nice to have, but I want to ommit class states/or other helper classes from the compiler.

ref: stylus/stylus#2406 (comment)

Not in gulp-stylus, maybe if they answer the question in that issue on stylus