JavaScript css-in-js

Open-source JavaScript projects categorized as css-in-js
Edit details
Topics: #CSS #React #PostCSS #Emotion #JavaScript
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com
Sponsored

Top 23 JavaScript css-in-j Projects

  • react-native-web

    Cross-platform React UI packages

    Project mention: Here's what I'd like to do as a hobby project... what should I learn? | reddit.com/r/learnprogramming | 2023-03-13

    Some of the top cross-platform frameworks do have support for web targets. React-Native-Web and Flutter on the Web are both ways to target the web with your cross-platform app.

  • emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    Project mention: Next.js App Directory Architecture First Impressions | dev.to | 2023-03-06

    An early difficulty I encountered was using UI component libraries like Mantine and Material UI in the new architecture. After looking through some GitHub issues, the culprit is Emotion, a package many component libraries rely on that does not support server rendering.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • stylelint

    A mighty CSS linter that helps you avoid errors and enforce conventions.

    Project mention: This missing comma ruined my day. Can I get VSCode to fix this mistake automatically? | reddit.com/r/vscode | 2023-03-02

  • styled-system

    ⬢ Style props for rapid UI development

    Project mention: Why Chakra? | reddit.com/r/reactjs | 2023-02-22

    But yeah, Tailwind fanboys do hate it, because Chakra needs some initial time to research and understand how it works under the hood. And then it gets super easy and intuitive to use. It's an implementation of a general concept abstraction called styled-system, I advise anyone to start their learning about Chakra from there: https://styled-system.com/

  • styled-jsx

    Full CSS support for JSX without compromises

    Project mention: Is there anything like Astro's CSS for vanilla React or Next? | reddit.com/r/reactjs | 2022-09-28

  • stitches

    CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

    Project mention: what's the best way for styling our components in react? | reddit.com/r/reactjs | 2023-02-11

    Stitches allows you to map your design system

  • JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.

    Project mention: Front-end Guide | dev.to | 2022-11-23

    JSS

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • css-in-js

    React: CSS in JS techniques comparison

    Project mention: Front-end Guide | dev.to | 2022-11-23

    As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to partially solve some of the problems with writing CSS at scale. "At scale" means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing CSS in JS at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on CSS Modules. CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.

  • Aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

  • typography

    A powerful toolkit for building websites with beautiful design

  • twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

    Project mention: Twind – Tailwind without build step | news.ycombinator.com | 2022-12-25

  • goober

    🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API

  • Fela

    State-Driven Styling in JavaScript

    Project mention: Best practices for CSS and making things faster? | reddit.com/r/react | 2022-08-28

    [Fela](https://fela.js.org/) and [Griffel](https://github.com/microsoft/griffel) are also not bad choice.

  • react-with-styles

    Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

    Project mention: Really, why React? - DEV Community | reddit.com/r/reactjs | 2022-07-27

    When I find stuff like this https://github.com/airbnb/react-with-styles I just have to wonder what other devs think. That's A LOT of API to learn just to get some styles; to make CSS work lol!

  • vue-styled-components

    Visual primitives for the component age. A simple port for Vue of styled-components 💅

  • siimple

    The minimal and themeable CSS toolkit for flat and clean designs

  • babel-plugin-tailwind-components

    Use Tailwind with any CSS-in-JS library

  • torus

    Torus is an event-driven model-view UI framework for the web, focused on being tiny, efficient, and free of dependencies. (by thesephist)

  • vue-emotion

    Seamlessly use emotion (CSS-in-JS) with Vue.js

    Project mention: The Skinny on CSS in Vue Single File Components | dev.to | 2022-12-13

    Notice that in development mode those styles will go into a in the and Vite's latest version will even add a data-vite-dev-id attribute with the url and generated hash of the CSS file it extracts from the SFC. Of course when building your app for production, your bundler of choice will put this code into a separate .css file.

    IDs in Vue.js generated style tags

    So it's that easy to create scoped styles in Vue.js. Fun fact the scoped attribute on the style tag actually comes from a W3C draft for implementing native scoping for CSS, which was unfortunately abandoned.

    Working around child selectors

    Now there is one small problem with this method of scoping CSS.

    Let's say you have an API that delivers raw HTML text, that content editors add using the WYSIWYG editor of some CMS.

    Now inserting raw HTML to Vue templates is trivial with the v-html directive, but you also want to style these tags independently, so you create a component to encapsulate their CSS.

    This would all look like this:

    <template>
    
     class="rich-text" v-html="props.text" />
template>

<script setup>
const props = defineProps({
    text: String
})
script>

<style lang="scss" scoped>
.rich-text {
    p {
        margin: 0 0 1rem 0;
    }

    ol {
        list-style-type: lower-alpha;
    }

    ul {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
style>


    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Now your component will render the following CSS.
    

    


    

    .rich-text p[data-v-60170f23] {
  margin: 0 0 1rem 0;
}
.rich-text ol[data-v-60170f23] {
  list-style-type: lower-alpha;
}
.rich-text ul[data-v-60170f23] {
  list-style-type: circle;
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    But the tags inserted by v-html won't receive the data-v- attributes as the other tags in your component.
    


    You can change the CSS output so that the scoping will also work for nested elements.
    

    


    

    <style lang="scss" scoped>
.rich-text {
    :deep(p) {
        margin: 0 0 1rem 0;
    }

    :deep(ol) {
        list-style-type: lower-alpha;
    }

    :deep(ul) {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
style>

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Now the styles generated will look like this:
    

    


    

    .rich-text[data-v-60170f23] p {
  margin: 0 0 1rem 0;
}
.rich-text[data-v-60170f23] ol {
  list-style-type: lower-alpha;
}
.rich-text[data-v-60170f23] ul {
  list-style-type: circle;
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    The data-v- goes in front of the parent selector so child selectors will get applied and scoping will be maintained. 
    


    
  
  
  Syntax variations

    


    If you've googled this problem before you may have found some alternate syntaxes to do the same thing, so let's clarify things a bit.
    


    You've may seen this:
    

    


    

    .alert ::v-deep h1 {
…
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Or this
    

    


    

    .alert /deep/ h1 {
…
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Or even this
    

    


    

    .alert >>> h1 {
…
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    In Vue 3 and Vue 2.7 all of these have been deprecated, so while your code may work, the compiler will show a warning and they will stop working in some future release. So it's best to use :deep(), unless you are on Vue >2.7.
    


    Also note that if you are using SCSS, the >>> and /deep/ syntax will throw an error in Vue 3, while the ::v-deep will still work but with a warning.
    


    Bottom line is, just use :deep() on all newer versions of Vue.
    


    
  
  
  New CSS features in Vue 3

    


    With Vue 3 we've got two new combinators next to :deep(). 
    


    
  
  
  Scoped styles for slots

    


    First we have :slotted() which lets you target any HTML that's inserted to one of the slots of your component.
    


    Let's say you want to add another slot in the component and you'd want whatever element that goes in that slot to have a specific styling defined by it.
    

    


    

    <template>
    
     class="alert">
         name="header" />
         />
    

    
template>

<style scoped>
.alert {
    --base-gutter: 0.4rem;
    padding: calc(var(--base-gutter) * 2);
    border: 1px solid #ffea2a;
    background-color: #fff48d;
    border-radius: var(--base-gutter);
}

h1 {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}
style>

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    






    

    
    <template #header>
      
    Hi there!
    template>
    This is some warning for the user from the system.


    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    This of course won't work. If you look at what CSS was generated, you'll find this selector.
    

    


    

    h1[data-v-3f4a8ec2] {
   // our h1 styles
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    This would work if we would have the 
    

     tag in our component and only its text content coming in via a props, but for whatever reason we don't want to do that.


    

    To make this work we can change our component's CSS like so:
    

    


    

    :slotted(h1) {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Now it works! And what's even cooler is, if that you add another style block to the ...
    

    


    

    h1 {
    color: red
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    ...and a this line of code to the template.
    

    


    

    I'm hard coded in the component

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    You'll see that the 
     we pass through the #header slot doesn't get red, while it's rules won't affect the "hard-coded" 
    .
    


    If you are wondering how Vue.js does this, it's very easy. The difference in the rendered output is literally one character.
    

    


    

    h1[data-v-3f4a8ec2] {
  // styles for the tag inside the component
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    






    

    h1[data-v-3f4a8ec2-s] {
  // styles for the tag coming from the slot
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    The generated :scoped() selector gets an extra -s appended to the file name hash that's used to scope elements inside the components.
    


    
  
  
  Global styles

    


    The :global() combinator provides an escape hatch from the scoped styles. A good use case for this would be if you have some page identifier class on the main  tag, which is normally out of scope of your Vue application, but you want to keep your styles that hook into these classes inside your page components.
    

    


    

    <style scoped>
.App {
  color: #000;
}

:global(body.home-page) {
  background-color: antiquewhite;
}
style>

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    Also note that this could be achieved by adding two  tags in your SFC, one with the scoped attribute and one without it.
    

    


    

    <style>
body.home-page {
  background-color: antiquewhite;
}
style>

<style scoped>
.App {
  color: #000;
}
style>

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    
  
  
  JS-in-CSS the Vue way

    


    This last one is the most exciting and solves a lot of the use cases for which you would have had to turn to CSS-in-JS libraries like vue-emotion in the past.
    


    You can use the v-bind directive as a CSS value and extrapolate any JS value inside the  tag of the SFC just as you would in your .
    


    This is great for every use case where you want your styles to react directly to some user input or state change without having to write a bunch of predefined classes.
    


    To demonstrate how powerful this feature is, I've added a small demo with a color picker.
    


    


    


    If you look at the rendered code you'll see that Vue.js is generating CSS custom properties that are inserted into inline styles and then they cascade down the component.
    

    


    

     data-v-45e5ffe2 style="--45e5ffe2-color:rgb(230, 74, 25);">
    
     data-v-45e5ffe2>
        
     class="vc-color-wrap transparent" data-v-11bd4fe5="">
            
     class="current-color" data-v-11bd4fe5 style="background: rgb(230, 74, 25);">

    
        

    
    

    
    
     class="example" data-v-45e5ffe2>Click on the square to select a color!
    


    

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    






    

    .example[data-v-45e5ffe2] {
    color: var(--45e5ffe2-color);
}

    

    

    
    Enter fullscreen mode
    


    Exit fullscreen mode
    



    

    

    




    I hope you've found this post useful and it will help you write CSS more effectively in your next Vue.js project!

  • jest-glamor-react

    Jest utilities for Glamor and React

  • Aris

    Aris - A fast and powerful tool to write HTML in JS easily. Includes syntax highlighting, templates, SVG, CSS autofixing, debugger support and more...

    Project mention: Hard at work on the new Pelicanizer | reddit.com/r/othepelican | 2023-02-09

    (Also, yes, that is a screenshot of some of my new code. It's a function that uses Aris to generate a custom element that looks like a toot, using post info from the Mastodon API.)

  • atomize-by-quarkly

    library for creating atomic react components (by quarkly)

  • ecommerce-store-reactjs-stripe-oauth2

    This is a fully functional Ecommerce Website which allows the user to login,add products to cart,view products in detail and do the payment through credit card.Built using React,React Router,OAuth2 for user authentication,Stripe for payment and Netlify for deployment.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-03-13.

JavaScript css-in-js related posts

Index

What are some of the best open-source css-in-j projects in JavaScript? This list will help you:

Project Stars
1 react-native-web 20,651
2 emotion 16,206
3 stylelint 10,218
4 styled-system 7,568
5 styled-jsx 7,373
6 stitches 7,189
7 JSS 6,923
8 css-in-js 5,493
9 Aphrodite 5,318
10 typography 3,776
11 twind 3,247
12 goober 2,863
13 Fela 2,239
14 react-with-styles 1,688
15 vue-styled-components 1,321
16 siimple 617
17 babel-plugin-tailwind-components 335
18 torus 279
19 vue-emotion 212
20 jest-glamor-react 98
21 Aris 80
22 atomize-by-quarkly 65
23 ecommerce-store-reactjs-stripe-oauth2 44

Sponsored
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com