CSS vendor prefixing

[richard-lopes]

Hello,

As far as I know cxs doesn't support vendor prefixing. When you use "advanced" CSS features this can become a problem for any older browser.
I was wondering if there was a plan to add support for that (increasing the library size) or if there was a way to maybe post-process the CSS generated by cxs.
In that category I was looking at stylis that styled-jsx uses: it is very fast and does prefixing among a few other things. But integration is likely big changes.
If you know of any solution or workaround to use on top of cxs that we could use today, that would be helpful.

[Jascha-Sundaresan]

this shouldn't be too hard w/ stylis.

Take a look at the source for cxs.
Rules are inserted w/

insert(mx(rx(className + noAnd(child), key, val), media))

mx, rx, and noAnd are helpers to format the rule correctly to be inserted

let insert = rule => rules.push(rule)
const hyph = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase()
const mx = (rule, media) => media ? `${media}{${rule}}` : rule
const rx = (cn, prop, val) => `.${cn}{${hyph(prop)}:${val}}`
const noAnd = s => s.replace(/&/g, '')

In the style of cxs, if vendor prefixing is something you need, I propose you create a PR that creates another file called "prefixed" so people can import cxs from 'cxs/prefixed'

In that, copy over the logic from index.js and change rx to something like

const rx = (cn, prop, val) => stylis(`.${cn}`, `${hyph(prop)}:${val}`).replace(/\s/, '')

not sure how to handle the dependency...

[lachlanjc]

You could also write your own fork of cxs 👍

[ejoubaud]

An elegant option is suggested here: https://github.com/I-We/cxs#vendor-prefixes Haven't tested it though, but if it works inline-style-prefixer could be made an optional peer dependency, with an integrated interface in a cxs/prefixed module.

[richard-lopes]

Thanks for that.
We are still using cxs in our project and I am freeing up time to help improving it now.