Share variables between JavaScript and CSS

• icss

  2 620 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

  10 4,283 7.6 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:

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• postcss-modules-values

  1 37 2.9 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

  4 5,337 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