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

Last update: May 13, 2022

JSS

Version License Downlodas Size Contributors Gitter Build Status OpenCollective OpenCollective

A lib for generating Style Sheets with JavaScript.

For documentation see our docs.

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Supporters

Thanks to BrowserStack for providing the infrastructure that allows us to run our tests in real browsers and to all awesome contributors.

GitHub

https://github.com/cssinjs/jss
Comments
  • 1. [jss-nested] target a rule from the same sheet when possible

    Sometimes we need to create a nested selector targeted to a child class from the same sheet, for e.g. when we want to change a style for some inner element.

    In this case, button is a global selector scoped to the container selector

    {
      container:  {
        '&:hover button': {
          color: 'red'
        }
      }
    }
    

    Results in something like this:

    .container-jss-0-0:hover button {
      color: red;
    }
    

    Now we want to target an element with generated class name:

    {
     button: {
       color: 'blue' 
     },
      container:  {
        '&:hover button': {
          color: 'red'
        }
      }
    }
    

    Now we checked that button is defined on the same sheet, so lets use the generated for it selector.

    .container-jss-0-1:hover .button-jss-0-0 {
      color: red;
    }
    
    Reviewed by kof at 2016-04-19 17:05
  • 2. New old id generation algorithm - back to the future

    Me and @iamstarkov just had a discussion about #356 and decided to reimplement the id generation algorithm.

    Right know we JSON.stringify the rules and generate hashes with murmurhash in order to have predictable unique class names in order to support SSR.

    We found a way to avoid that overhead and still support SSR.

    1. We revert the algorithm to the very first version where simple counters have been used to ensure the uniqueness.
    2. In order to support SSR, JSS will generate a "rulesmap", which will be used then at runtime on the client in order to obtain the original ids, generated on the server.

    This will not only allow us to implement unique class names for dynamic rules in #356 but will also increase an overall performance by factor 3.

    cc @nathanmarks @cvle @iamstarkov @typical000 @sapegin @oliviertassinari

    Reviewed by kof at 2017-02-26 23:19
  • 3. [react-jss][jss-nested] function value doesn't work for nested levels

    From @tibbus on July 16, 2018 15:37

    It worked on 8.6.0 but it doesn't work on 8.6.1 Even though I saw this : https://github.com/cssinjs/jss/issues/682

    Ex. the below code works on 8.6.0, but it doesn't work anymore and a warning is displayed in the console :

    Warning: [JSS] Could not find the referenced rule fieldLabel ....

    export default {
      flowLayout: {
        padding: '5px'
      },
      fieldLabel: {
        background: 'blue'
      },
      layoutGroup: {
        '&.flowLayout': {
          '& $fieldLabel': {
            marginBottom: () => {
              return '500px';
            }
          }
        }
      }
    };
    

    Copied from original issue: cssinjs/react-jss#280

    Reviewed by HenriBeck at 2018-08-02 19:00
  • 4. Added jss keyframes helpers package

    What this package does:

    • Create keyframes with a unique id
    • Reuse stylesheets for the same jss instance
    • Support multiple jss instances
    • Server-side rendering support by collecting the stylesheets in a sheet registry
    Reviewed by HenriBeck at 2018-08-05 16:36
  • 5. Mono Repo and NPM org

    I would like to propose to move the whole Jss project into a Lerna mono repo like babel and other projects did. I would also then move to a fixed mode for the versioning (like babel). This would also solve some problems with maintaining all of the dev dependencies of the repositories.

    This would include the following repositories:

    • jss
    • react-jss, styled-jss and aphrodite-jss
    • all of the currently provided plugins by Jss

    Another idea would be to create npm organization and publish most packages under this organization.

    • jss -> @jss/core
    • react-jss (integrations) -> @jss/react
    • jss-expand (plugins): @jss/plugin-expand
    Reviewed by HenriBeck at 2018-05-14 14:09
  • 6. [jss-expand] Plugin for using css shorthands in a MUCH nicer way

    Currently in CSS and JSS we write:

    button: {
      background: 'no-repeat 50% 50%'
      backgroundSize: 'auto 22px'
    }
    

    Much nicer would be to write:

    button: {
      background: {
        repeat: 'no-repeat',
        position: '50% 50%', 
        size: ['auto', 22] // bonus - numeric value will allow jss-default-unit to set the default unit.
      }
    }
    
    Reviewed by kof at 2016-04-29 11:51
  • 7. Add `unpkg` key to package.json

    This provides a completely bundled distribution, ready for importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work natively in the browser:

    import { create as createJSS } from 'https://unpkg.com/jss';
    

    The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get sizeSnapshot to work with the bundled version.

    I also wonder how best to handle plugins/presets. The easiest options would be to add unpkg entry points to each package, and force authors to use multiple imports:

    import { create as createJSS } from 'https://unpkg.com/jss';
    import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default';
    

    I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle jss-all that exports all the other packages. Then usage would be:

    import * as jssAll from 'https://unpkg.com/jss-all';
    
    const jss = jssAll.create(jssAll.preset());
    

    Todo

    • [x] Add unpkg field to every package
    • [ ] ~~Understand and fix the sizeSnapshot crash~~
    • [x] Make a jss-starter-kit package.
      • [x] console.warn that it's for learning and prototyping only, not bundled for production use.
    • [x] Changelog
    • [x] Docs here
    Reviewed by appsforartists at 2018-12-13 05:34
  • 8. Support conditional rule groups for named styles

    As a result of https://github.com/jsstyles/jss/pull/45

    We need to support conditional rule groups like @media in named style sheet https://developer.mozilla.org/de/docs/Web/CSS/At-rule

    One proposal would be to write it like this

    {
        myName: {
            condition: '@media (min-width: 1024px)',
            color: 'blue'
        }
    }
    

    Another proposal

    {
        button1: {
            color: 'red'
        },
        '@media screen and (min-width: 768px)': {
            button1: {
                color: 'green'
            },
            button2: {
                color: 'blue'
            }
        }
    }
    
    
    Reviewed by kof at 2015-02-09 12:17
  • 9. [jss-important] Create a plugin which makes every value important.

    To increase specificity and avoid external CSS can break your component, add !important flag to every property automatically.

    • [ ] make it possible to disable that plugin on style sheet level: jss.createStyleSheet({}, {important: false})
    • [ ] make it possible to disable that on a rule level: jss.createStyleSheet({button: { important: false, color: 'red'}})
    Reviewed by kof at 2016-04-14 17:18
  • 10. deleteRule causes lag when deleting many nodes

    Hello, I noticed that when using with React, JSS causes a lag when removing many nodes. This is screenshot when removing 80 000 nodes.

    image

    Versions (please complete the following information):

    • jss: 10.4.0
    • Browser: Chrome
    • OS: macOS
    Reviewed by mario1ua at 2020-10-08 19:24
  • 11. [react-jss] Version 10.0.3 contains breaking change in Typescript definitions

    Expected behavior: In version 10.0.0 and above, the TS definition clearly states that, if user wants to use theme in the function, Theme type must be supplied to the generic createUseStyles type as follows:

    declare function createUseStyles<T, C extends string>(
      styles: (theme: T) => Record<C, Style | string>,
      options?: {
        index?: number
        name?: string
        theming?: Theming<T>
      } & StyleSheetFactoryOptions
    ): (data?: any) => Record<C, string>
    

    Thus user could use types styles with provided theme as follows:

    const useStyles = createUseStyles<Theme, "checkboxWrapper" | "input">((theme: Theme) => ({
    	checkboxWrapper: {
    		display: "inline-flex",
    		alignItems: "center",
    		fontSize: theme.utils.pxToRem(14),
    	},
    	input: {
    		marginRight: theme.utils.pxToRem(6),
    	}
    }));
    

    And the useStyles hook would return proper classNames.

    Describe the bug: In [email protected] a new typescript definitions were introduced which are breaking against previous behavior. The Theme argument no longer needs to be supplied to the generic which means that every usage of createUseStyles is now broken.

    declare function createUseStyles<C extends string = string>(
      styles: ((theme: any) => Styles<C>),
      options?: CreateUseStylesOptions
    ): (data?: unknown) => Classes<C>
    

    Recommended fix Revert this behavior under 10.0.4 version and release a new major version with this breaking change, according to the semver.

    Codesandbox link: Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

    Versions (please complete the following information):

    • react-jss: 10.0.3
    • Browser [e.g. chrome, safari]: yes
    • OS [e.g. Windows, macOS]: yes Feel free to add any additional versions which you may think are relevant to the bug.
    Reviewed by pajasevi at 2020-01-06 11:51
  • 12. Media queries not supporting when passing props in class, with multiple item with same class.

    Expected behavior: When I create a class function (passing props) , and I use media queries , the media queries should affect all elements that has that class.

    Describe the bug: The class only affect the first element the rest dont have the properties that the media queries give.

    Reproduction: Heres a codeSanbox with the bug in question. https://codesandbox.io/s/rendering-emotion-vs-styled-components-vs-jss-forked-hoyd4v?file=/index.js:254-259

    Versions (please complete the following information):

    • jss: 10.6.0
    • Browser [e.g. chrome, safari]: codeSandbox(chrome)
    • OS [e.g. Windows, macOS]: windows
    Reviewed by AntoninWD at 2022-04-29 14:15
  • 13. Missing CSS vendor prefixing in css-vendor package

    There are a few open issues / prs in the css-vendor package that is used in the vendor-prefixer plugin. Can those be fixed/merged in and a new version published?

    https://github.com/cssinjs/css-vendor/issues/203

    Reviewed by jgodi at 2022-02-22 15:11
  • 14. Type error when using fallbacks array with typescript

    Expected behavior: Fallbacks array with typescript styles

    Describe the bug: Using fallbacks array in style object with typescript leads to an error. If I'm using fallbacks as an object it works just fine. Also the style compiles successfully, but the typerror may lead to the pipeline fails and other messy things.

    Type '{ width: string; }[]' is not assignable to type 'JssValue | JssStyle<any, undefined> | Observable<JssValue | JssStyle<any, undefined> | undefined> | ((data: any) => JssValue | ... 1 more ... | undefined)'. Type '{ width: string; }[]' is not assignable to type '(string | number | (string | number)[])[]'. Type '{ width: string; }' is not assignable to type 'string | number | (string | number)[]'. Object literal may only specify known properties, and 'width' does not exist in type '(string | number)[]'.ts(2322)

    Reproduction: https://codesandbox.io/s/jss-typescript-react-test-forked-lq0sm?file=/src/styles.ts

    Versions (please complete the following information):

    • jss: 10.6.0
    • Browser [e.g. chrome, safari]: chorme/firefox
    • OS [e.g. Windows, macOS]: macOS Feel free to add any additional versions which you may think are relevant to the bug.
    Reviewed by paul0lden at 2022-02-04 15:40
  • 15. [cli] css content '\a0' convert to jss is not correct

    https://sudos.tools/css-to-jss, i think this web tool use jss-cli,

    image

    as you see, content '\a0' represents a space, when it converts to jss, the result is "'\\\\a0'",

    then, i convert jss. to css

    image

    css->jss '\a0' -> "'\\\\a0'" then jss->css "'\\\\a0'" ->'\\a0'

    what is expected: css->jss '\a0' -> "'\\a0'" then jss->css "'\\a0'" ->'\a0'

    Reviewed by tobemaster56 at 2022-01-21 08:50
  • 16. Functions for dynamic styles within media query issue

    Expected behavior: When I change screen size the dynamic styles should be applied to all elements

    Describe the bug: When you resize the screen and use dynamic styles within a media query one of the styles does not get applied

    Reproduction:

    sandbox link

    Versions (please complete the following information):

    • jss: 10.8.2
    • Browser [e.g. chrome, safari]: chrome
    • OS [e.g. Windows, macOS]: mac0S Feel free to add any additional versions which you may think are relevant to the bug.
    Reviewed by antciccone at 2021-12-03 01:47
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 7, 2021
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
The UI design language and React library for Conversational UI
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

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

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

May 10, 2022
A tool for creating ratio-based style systems built in React.
A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Dec 29, 2021
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

May 15, 2022
Autoprefixer for JavaScript style objects

inline-style-prefixer A small, simple and fast vendor prefixer from JavaScript style object. Support Us Support Robin Frischmann's work on Fela and it

Feb 25, 2022
♞ JavaScript mobile-first chess.

♞ JavaScript mobile-first chess client. Play Documentation Changelog How does it work? The game state and the game view are separated. The view re-ren

Aug 27, 2021
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

May 17, 2022
👩‍🎤 CSS-in-JS library designed for high performance style composition
👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

May 7, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

May 10, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

May 12, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

May 11, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

May 18, 2022