Share variables between JavaScript and CSS

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
  • icss

    Interoperable CSS — a standard for loadable, linkable CSS (by css-modules)

    CSS Modules, gives us two ways of sharing variables, the Interoperable CSS (ICSS) spec and the PostCSS Modules Values spec. ICSS appears to be the older of the two specifications, so I'll start there.

  • css-loader

    CSS Loader

    The above should work in Create React App out of the box. If you are rolling your own Webpack configuration (may God have mercy on your soul), you'll need to configure modules with a compileType of icss:

  • 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!

  • postcss-modules-values

    Pass arbitrary constants between your module files

    // breakpoints.module.css @value larry: (max-width: 599px); @value moe: (min-width: 600px) and (max-width: 959px); @value curly: (min-width: 960px); // MyComponent.module.css // this is one of the multiple ways you can import @value definitions // see @value larry, moe, curly from "theme/breakpoints.module.css"; @media larry { ... } @media moe { ... } @media curly { ... }

  • Aphrodite

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

    I've already mentioned Emotion, but other CSS-in-JS libraries to check out include Styled Components, JSS, Theme-UI, Radium, and Aprhodite.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts