solidjs / solid-styled-jsx

A Styled JSX wrapper for Solid

Solid Styled JSX

This library is a wrapper to allow you to use Solid with Zeit's styled-jsx. It accomplishes this by using a babel transform to change the Style JSX element import to use Solid's version. From there simply add the plugin solid-styled-jsx/babel to your babel config and you are good to go. The plugin accepts the same options as it's styled-jsx/babel counterpart.

Note: SSR not supported yet Note: Does not work with Create Solid App

Typescript

To get the proper JSX types in your project simply import solid-styled-jsx one time at the root of your project.

import type {} from "solid-styled-jsx";

Gist

Styled JSX lets you use style tags and string class names to style your components with scoped styles. You indicate that a style tag is to be handled by including the jsx prop. In addition you can add global prop for global non-scoped styles and dynamic for ones that have styles that change based on props. Typical reactive rules apply. Example:

function Button() {
  const [isLoggedIn, login] = createSignal(false);
  return (
    <>
      <button className="button" onClick={() => login(!isLoggedIn())}>
        {isLoggedIn() ? "Log Out" : "Log In"}
      </button>
      <style jsx dynamic>
        {`
          .button {
            background-color: ${isLoggedIn() ? "blue" : "green"};
            color: white;
            padding: 20px;
            margin: 10px;
          }
        `}
      </style>
    </>
  );
}

Styled JSX provides a ton more like css function and a ton of plugins. Full documentation features can be found on styled-jsx site.

solid-styled-jsx's Issues

styled is not a function

" styled is not a function (While processing: "\node_modules\solid-styled-jsx\babel.js")

Could it be because there are outdated dependencies? I installed with --force
I'm using Parcel and the babel.js in the plugin say's it's needed for "parcel/codesandbox had issues with preset so we have this monstrosity." but I'm not planning on using codesandbox, so is there an alternative babel file? As I tried many alternatives without a solution. https://github.com/solidjs/solid-styled-jsx/blob/main/babel.js

If I should not be using parcel, please offer a suggestion where I can add plugins to .babelrc

---

My package.json

{
    "name": "solidjs-babel",
    "version": "1.0.0",
    "scripts": {
        "start": "parcel index.html",
        "start2": "parcel index.html --open",
        "build": "parcel build index.html"
    },
    "dependencies": {
        "babel-preset-solid": "^1.8.4",
        "solid-js": "^1.8.5",
        "solid-styled-jsx": "^0.27.1",
        "styled-jsx": "^5.1.2"
    },
    "devDependencies": {
        "@babel/core": "^7.23.3",
        "parcel": "^2.10.3"
    },
    "keywords": [],
    "browserslist": {
        "browserslist": "> 0.25%, not dead"
    }
}

Doesn't work with global

Say I style a component

const MyButton = ()=> {
  return <button class="common-button">
     Hello
     <style jsx global>{`
        .common-button {
          background-color: slateblue;
        }
      `}</style>
    </button>
}

And I use it

<div>
  <MyButton />
  <MyButton />
</div>

I would expect that the shared style would be extrapolated into a single <style> element on the dom, but instead it is repeated over and over again inside of every button

<button class="common-button">Hello<style>.common-button{ background-color=slateblue; }</style></button>
<button class="common-button">Hello<style>.common-button{ background-color=slateblue; }</style></button>

I think the solution is to use a css outside of the component, but there doesn't seem to be a way to do that with solid-styled-jsx.

Eg, for regular styled-jsx you would go:

import css from `styled-jsx/css`
const MyButton = ()=> {
  return <button class="common-button">
     Hello
     <style jsx>{butstyle}</style>
    </button>
}
const butstyle = css`
        .common-button {
          background-color: slateblue;
        }
`      

Is this still relevant

Is this still relevant to use as I get this:
Any solution would be greatly appreciated.
As I need scoped styled-jsx, and solidjs 1.84 builtin styled-jsx is not scoped.

npm i solid-styled-jsx npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/vite npm ERR! dev vite@"^5.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vite@"^3.0.0 || ^4.0.0" from [email protected] npm ERR! node_modules/vite-plugin-solid npm ERR! dev vite-plugin-solid@"^2.7.2" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry

works with className="", but not with class=""

I've been taking solid-styled-jsx for a test run in porting an app from Vue to Solid (easy to copy/paste styles from <style scoped> to <style jsx> that way).

I'm encountering an issue where this template,

		return <div class="command">
			<h1>Foo</h1>
			<style jsx>{
				/*css*/ `
					h1 {
						margin-top: 5vh;
					}
				`
			}</style>
		</div>

produces this output in the DOM:

<div class="undefinedjsx-4071452694undefined">
  <h1 class="jsx-4071452694">Foo</h1>
</div>