search

cxs-css / cxs

fast af css-in-js in 0.7kb
MIT License
1.19k stars 68 forks source link

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

Open rlopes opened 7 years ago

rlopes commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

+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 commented 7 years ago

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 👍