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

#showdev #javascript #css

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.

Top comments (11)

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 •

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

Collapse
 
sadick profile image
Sadick •

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

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 •

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 •

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

Read next

peboy profile image

I built these 5 types of loading animation in HTML and CSS, which do you prefer?

Adeyele Paul -

emmabase profile image

How to Implement pagination on API Endpoint Using Nodejs and TypeScript

Emmanuel Eneche -

mjgs profile image

Latest Newsletter: Good Output (Issue #159)

Mark Smith -

ramunarasinga profile image

Tips from open-source: An Object with Map and Set.

Ramu Narasinga -