Idea: make the class name prefix 'x' a parameter

[rlopes]

I have a few components that are built separately as different bundles. They come with their own styles and get merged into an app.
However, I am not sure cxs supports that kind of use case. Since style tags are added to the parent HTML document there are collisions.

in src/cxs/index.js, line 20 we have this: const className = 'x' + (rules.length).toString(36)
'x' is a hardcoded prefix. What if we allow alternative prefixes to be passed? Ideally once at initialization of the library.

That way we could define separate prefixes in different projects and when they get mashed up (at runtime for example), the written styles do not collide.

[jxnblk]

Yeah, I've thought about exposing cxs.prefix to allow that to be changes like so:

import cxs from 'cxs'
cxs.prefix = '_cxs'

As far as importing components that use cxs, I haven't run into issues with my own use FWIW. There should only be one cxs instance when you're using a bundler like webpack, so all components in a bundle/app should be working off of the same ID system

[richard-lopes]

Sounds good. Yes in our case these are components (mini apps) imported and rendered at runtime not compile. In that case cxs is bundled several times if you see what I mean.

[aaronyo]

+1

I'm using cxs for a chrome extension that augments gmail, but gmail declares several two character classnames matching x*.

The PR sounds straightforward enough. Should I submit one?

[richard-lopes]

The new monolithic.js fie seems to have the feature. It is used by the monocomponent.
It that same feature coming in vanilla cxs?
I have a feeling there is bit of documentation to write with all the goodies you have been working on in the past 2 weeks 👍