Share variables between JavaScript and CSS

• icss

  0 608 0.0

  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

  2 4,236 8.9 JavaScript

  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.io

  sponsored

  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

  0 35 0.0 JavaScript

  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 https://github.com/css-modules/postcss-modules-values @value larry, moe, curly from "theme/breakpoints.module.css"; @media larry { ... } @media moe { ... } @media curly { ... }

• Aphrodite

  0 5,318 0.0 JavaScript

  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.

Suggest a related project