Transform property on all elements

I want to write my JSX with Linaria like this:

<div 
class="w-full font-mono" 
css="
  color: red;
  animation: 15s infinite forwards slide;
">

<div 
class="w-full font-mono" 
css="
  color: red;
  animation: 15s infinite forwards slide;
">

so it transforms to something like

createElement('div', { class: "w-full font-mono" + " " + _linariaGeneratedClass })

createElement('div', { class: "w-full font-mono" + " " + _linariaGeneratedClass })

How can I achieve that? Is it possible to extend solid babel plugin?

5 Replies

lxsmnsyc•2y ago

you have to run Linaria before Solid's

foxpro 🐍OP•2y ago

Linaria doesn't transform css property itself. It only ejects css to .css files and changes expression to class name string I tried to make custom babel plugin and apply it to solid vite plugin

         ViteSolid({
            dev: dev,
            hot: dev,
            typescript: { onlyRemoveTypeImports: true },
            // this should be true, ensure solid plugin automatically decide how to render with VPS
            ssr: true,
            babel: {
               plugins: [babelCSSPropertyPlugin]
            }
         }),

         ViteSolid({
            dev: dev,
            hot: dev,
            typescript: { onlyRemoveTypeImports: true },
            // this should be true, ensure solid plugin automatically decide how to render with VPS
            ssr: true,
            babel: {
               plugins: [babelCSSPropertyPlugin]
            }
         }),

but settings plugins overrides plugins from vite-plugin-solid itself, so babel-preset-solid disappears

lxsmnsyc•2y ago

yeah which is my point, you have to make Linaria (or whatever plugin that is) to run before Solid here's an example: https://github.com/lxsmnsyc/solid-styled/blob/main/packages/vite/src/index.ts

foxpro 🐍OP•2y ago

Thank you for giving me confidence. I'm little confused, however, that babel will run three times (my plugin, linaria, then solid) Maybe I can skip babel parsing and do it through vite/rollup api just with some regular expressions or just move to rust already

lxsmnsyc•2y ago

you can also hook it up into solid's plugin, but then the transform must happen before Solid's. The usual trick here is to compile ahead via Program node RegExp is too limited for JS transforms. You can do SWC if you want

Gaming

Programming

Transform property on all elements