Spectre: Prefix css class/id's with custom string

[rkubik]

Is it possible to generate css to have every class and id prefixed with a custom string? Example, instead of class=label I can have class=spectre-label.

[aaron-bond]

Not sure this is totally valid, but one concern I'd have in doing this with my projects is that if I ever wanted to lift spectre.css out of the code, I'd have to refactor the classes to fix them and remove "spectre-". As it is today, I have to add something new that styles a "label"

[rkubik]

I don't mean for this to be the default behaviour. But as an option for those who are adding spectre to complement an existing CSS library.

[aaron-bond]

Ah I see. Interesting idea. There'd likely be some overlap in the normalizing rules though, no?

[rkubik]

You're right. When building spectre with a prefix we could ignore the normalize rules by default. And if its not too difficult, have an option to enable it. Normalize is not spectre-specific so including/excluding it shouldn't be an issue.

[rkubik]

Proof of concept:

var cssprefix = require('gulp-css-prefix');
var argv = require('yargs').argv;

gulp.task('prefix', function() {
    gulp.src('./dist/*.css')
        .pipe(cssprefix(argv.prefix+'-'))
        .pipe(rename({
            suffix: '.prefix'
        }))
        .pipe(gulp.dest('./dist'))
});

Usage:

$ gulp build
$ gulp prefix --prefix=mytest
$ less dist/spectre.prefix.css
a.mytest-active {

Have to think about the normalize stuff.

[picturepan2]

@rkubik I think your Gulp CSS Prefix is one of the best solutions yet.