solidjs / solid-styled-jsx Goto Github PK
View Code? Open in Web Editor NEWA Styled JSX wrapper for Solid
A Styled JSX wrapper for Solid
" 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"
}
}
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
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;
}
`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.