solidjs / solid-styled-jsx Goto Github PK

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>

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

" 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"
    }
}

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;
        }
`