Can you build a tool like twind?

[xialvjun]

twind is https://github.com/tw-in-js/twind

I hope we can write acss like:

import {acss} from 'xxx';

const highlight = `C(#FFF) Bgc(#000)`; // no need to find classNames with regex so people can write helpers easier
const helper2 = (a, b) => `C($${a}) Bgc(${b})`
export default ({isVisible, isHighlighted}) => {
  // acss generate styles in runtime
  return <div className={acss`Fl(start) W(1/2) H(90px) ${{'D(n)': !isVisible, [highlight]: isHighlighted}} whateverOthers`}>
  <div className={acss(xx && 'xx', yy && 'yy', {zz}, [aa && 'aa', {bb}])}>acss can act like the package 'classnames'</div>
</div>
}

It indeed add a runtime cost, but it's much easier to use.

Why I came up with this idea?

I don't know how to use atomizer, what's its regex to find classNames, what can I do and what I can not do, what's its config file references...

Besides vscode atomizer doesn't support tsx/vue.

[thierryk]

I don't know how to use atomizer, what's its regex to find classNames, what can I do and what I can not do, what's its config file references...

Did you check https://github.com/acss-io/atomizer ?

[xialvjun]

I didn't know if atomizer is just looking up class names from html/jsx/vue-template class/className attribute. But now I know atomizer find all text content even if it has nothing to do with className.

[renatoi]

This can be a nice addition that could potentially solve some limitations of atomizer. I usually dislike runtime CSS generation but I do see the value they bring.