styled-jsx with the latest 1.84 of SolidJS

[AverTry]

Hey everyone, I'm new to SolidJS and am finding it, much easier to work with than react. But I'm having trouble using styled-jsx. It works fine, conditionals work, but there's no scoping. It affects nodes outside the component scope.

So I heard you can install Vercel's Styled-jsx, but keep running into issues like babelrc that does not exist with vite install. Do I create babelrc?

Anyway, if anyone can help me get "scoped Styed-jsx" to work, I would be very thankful to you.

[AverTry]

After trying many css solutions, I settled on this Solid-Styled as it allows proper css statements like styled-jsx but with the scoping working. In my opinion this type of css in jsx is more portable(copy n paste) from say css modules. As adding css to inline styles or to const vars is painstaking to transfer, say from react components with styled-jsx.

Here's a guide for noobs as that's what I felt like, probably for good reason.

Solid with SolidStyled CSS Guide

Install the latest SolidJS Framework
npm create vite@latest . -- --template solid

Downgrade Vite or use "--force" on every install,
until they add Vite5.0.0 to dependancies.
npm i [email protected]

Install Solid Styled and PostCSS
npm i solid-styled
npm i -D postcss

Install the Vite Plugin
Need the "--force" for outdated dependancies
npm i --D vite-plugin-solid-styled --force

Update the "vite.config.js" file

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import solidStyled from 'vite-plugin-solid-styled';

export default defineConfig({
  plugins: [solid(),
    solidStyled({
      prefix: 'tyj', // optional
      filter: {
        include: 'src/**/*.{ts,js,tsx,jsx}',
        exclude: 'node_modules/**/*.{ts,js,tsx,jsx}',
      },
    })],
})