How to associate generated mapping output during .process()?

[jpeer264]

How to associate generated mapping output during .process()?

[JPeer264]

Well, currently there is no option to just prefix all selectors. But this would be a cool feature, I can work on it.

If you are using it within a Gulpfile, then you can give gulp-rcs a shot. This is the gulp plugin for rename-css-selectors.

[JPeer264]

With v0.1.0 you can now use the options to handle that:

rcs.processCss('**/*.css', {
        prefix: 'my__',
        preventRandomName: true // which prevents to rename your selectors to the random generated one
    }, err => {
    // your files should be now correctly processed
    // rcs.process() can be used as usual
}

Other options can be found in the Readme

[davewallace]

@JPeer264 funnily enough I didn't know gulp-rcs was available and so i'd integrated this repo into my gulpfile already!

Looking at the results of the newly added options, it's an improvement, thank you. Looks like a few discrepancies (I only processed non-minified, compiled Bootstrap latest CSS).

I used a prefix ui__ and the results are as follows: https://gist.github.com/davewallace/2955dd243a74ecf0c84bec64ecd9e498

So it's not quite picking up everything eg; .input-*, .initialism, .small, .sr-only, .show, .invisible, table col[class*="col-"], and possibly some others. I can't see a pattern explaining the selectors being skipped except for anything input- seems to not get picked up. The attribute selectors will get ugly quickly, as some we wouldn't want to touch eg; input[type="search"] but some we definitely would eg; table col[class*="col-"].

Understood with the mixins. In the case of prefixing Bootstrap as I am attempting to do, if the whole lot were mixins then this would be less of a problem. I think I'm fine converting either output Bootstrap CSS or LESS, I have no issues directly referencing un-prefixed mixins as the result will only be the mixin props, the mixins themselves won't make it into the browser to cause namespace clashes.

As a side note, I think my use case matches your library well and it looks like a lot of other people have wanted to programmatically prefix batches of CSS, such as Bootstrap, in the past as evident on stackoverflow and the Twitter github issue tracker.

[davewallace]

Oh, also I don't really have any meaningful code to share, I'm working on a simple reduced case involving pretty much just your repo & the Bootstrap dist files.

[JPeer264]

So it's not quite picking up everything eg; .input-, .initialism, .small, .sr-only, .show, .invisible, table col[class="col-"], and possibly some others. I can't see a pattern explaining the selectors being skipped except for anything input- seems to not get picked up. The attribute selectors will get ugly quickly, as some we wouldn't want to touch eg; input[type="search"] but some we definitely would eg; table col[class*="col-"].

True! I marked that as a bug and will solve that. So in the last sentence you said you want to touch table col[class*="col-"] - do you mean you want to touch it that it look like table col[class*="ui__col-"] ?

As a side note, I think my use case matches your library well and it looks like a lot of other people have wanted to programmatically prefix batches of CSS, such as Bootstrap, in the past as evident on stackoverflow and the Twitter github issue tracker.

Thanks, this means a lot to me 😊

Oh, also I don't really have any meaningful code to share, I'm working on a simple reduced case involving pretty much just your repo & the Bootstrap dist files.

Never mind, as soon as I can reproduce all issues it is ok.

[davewallace]

Thanks for being so proactive @JPeer264 - you're nearly there wrt the table selector. Only diff being col outside the square brackets should match, as well as the col referenced within the square brackets.

I can comb the output after your next sweep as you like, there will be match patterns based on a spec somewhere I reckon though. After some searching I see there are Python scripts set up to do similar things as you are - but I can't qualify they're using a CSS spec to regex against.

[JPeer264]

Hm, you want to match col outside the brackets? But those aren't selectors, those are HTML attributes, is just the . missing? I can work on it too, this might be a bit tricky though 😅

Can you provide a gist or the link to this script? I think there are some patterns I can adapt.

[davewallace]

As an aside, and possibly a feature request, when I first saw your lib I actually thought the map generation would be readable in subsequent operations, in that I could generate a mapping, possibly manually tweak it, and then run a processCss () off the result, even as part of another Gulp pipe() call. It feels like you're not far off this actually.

[davewallace]

Yep I can, just on a bus presently and in an opposite timezone but i can respond with details soon 😀

[JPeer264]

the map generation would be readable in subsequent operations, in that I could generate a mapping, possibly manually tweak it

How do you mean that exactly?

EDIT: Maybe you start an issue in node-rcs-core for that feature.

Yep I can, just on a bus presently and in an opposite timezone but i can respond with details soon 😀

Thanks 😀

[JPeer264]

@davewallace Regarding to table col[class*="col"]. I think it is just useful for [class^="col"] and [class$="col"] if prefixing or suffixing is used. Because [class*="col"] can be everything: acolname, color, somecol ... So if this get prefixed like [class*="pre-col"], it probably will brake something.

Use case:
All selectors are prefixed with pre-. So the attribute selector class^="col" will be renamed to class^="pre-col" as every class will be triggered which starts with the given name. Same for $= for suffixing.

[davewallace]

... So if this get prefixed like [class*="pre-col"], it probably will brake something.

That's a good point, yes best to leave that out, along with any other wildcard matches as you've identified, where it could change the selector's effects. The absolute only effects of this process of prefix/suffixing should be name modification - not selector alteration.

[JPeer264]

@davewallace v1.1.0 adds the functionality with attribute selectors.

Everything which matches to an attribute selector it will not rename the selector. It will still prefix and suffix the new selector.

With the option ignoreAttributeSelector it will not trigger any attribute selectors