Introducing scoped-style
Scoped style aims to be a universal library that you can use to style your components while still maintaining a small footprint.
It has currently been tested with react, preact and hyperapp. You can use the full power of css just as you are used to.
yarn add scoped-style
Examples
import scoped from "scoped-style"
// for react
import React from "react"
const styled = scoped(React.createElement)
//
// for Preact
import { h } from "preact"
const styled = scoped(h)
//
// for Hyperapp
import { h } from "hyperapp"
const styled = scoped(h)
//
const Button = styled("button")`
background: ${props => props.primary ? "orange": "gray"};
border: none;
border-radius: 2px;
:hover {
padding: 10px;
}
`
const App = () => (
<div>
<Button primary>Login</Button>
</div>
)
// Your rendering code
The project is on github. Contributions are highly welcomed.
Top comments (11)
Wow Sadick.
That's very nice.
I probably wouldn't need to install
styled-components
for many small projects.& 930B according to BundlePhobia 👏👏👏.
Thanks KIM. Try it for your next small project. I will be looking forward for your feedback.
I have got it down to 525B according to BundlePhobia
Nice mate.
I see that you also switched from WebPack to RollUp 🕺
This is very cool!
I was thinking about this the other day while using hyperapp. I wondered if we can remove the need for strings, and possibly include a ‘style’ tag in/as JSX which then can be converted into that string to be used with this library. For a better syntax than string templates.
Thinking abut it a little more.. CSS uses brackets {} which are also used for expressions in JSX.. maybe there is a better alternative.
I always wondered how Vue implements it's Single File Component
for example this vue file:
I bet Vue has it's own file loader/parser to extract all the template, script and css then scope that css. Because this file isn't JSX or any other nodejs library I know of...
Anyway, just thoughts.. need to research more :)
Just html, css and js. No more abstractions
You are right Vue has a parser
Definitely interesting!
I have a few questions though, like when this would be a good choice over
styled-components
, what are the features and limitations of usingscoped-style
, etc.Maybe you could compare and contrast the differences between your library and
styled-components
. I think that context would help people decide if this is a good choice for their project.Do you know Picostyle?
It also does CSS-in-JS and is also very small (0.4kB). I use it personally so I would be really interested what scoped-style does different.
Really cool work!
Yes i do and I have also used it. But it doesn't work with react.