DEV Community

Cover image for Universal next gen css-in-js library in under 1kb
Sadick
Sadick

Posted on

Universal next gen css-in-js library in under 1kb

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The project is on github. Contributions are highly welcomed.

Discussion (12)

Collapse
dance2die profile image
Sung M. Kim

Wow Sadick.

That's very nice.

I probably wouldn't need to install styled-components for many small projects.

& 930B according to BundlePhobia πŸ‘πŸ‘πŸ‘.

Collapse
sadick profile image
Sadick Author

Thanks KIM. Try it for your next small project. I will be looking forward for your feedback.

Collapse
sadick profile image
Sadick Author

I have got it down to 525B according to BundlePhobia

Collapse
dance2die profile image
Sung M. Kim

Nice mate.

I see that you also switched from WebPack to RollUp πŸ•Ί

Collapse
ahmedmusallam profile image
Ahmed Musallam • Edited on

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.

Collapse
ahmedmusallam profile image
Ahmed Musallam

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:

<template>
  <h1> {{msg}} </h1>
</template>

<script>
  export default {
     data () {
       return {
         msg:"hi there!"
       }
     }
  }
</script>

<style>
  h1{
    font-size: 45px
  }
</style>

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 :)

Collapse
equinusocio profile image
Mattia Astorino

Just html, css and js. No more abstractions

Collapse
sadick profile image
Sadick Author

You are right Vue has a parser

Collapse
davejs profile image
David Leger

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 using scoped-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.

Collapse
christiankaindl profile image
Christian Kaindl

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!

Collapse
sadick profile image
Sadick Author

Yes i do and I have also used it. But it doesn't work with react.