Share variables between JavaScript and CSS

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

InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • 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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • 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:

  • 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 https://github.com/css-modules/postcss-modules-values @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

  • Creating Nx Workspace with Eslint, Prettier and Husky Configuration

    12 projects | dev.to | 25 Mar 2024
  • Optimize CSS with SAT Solving

    5 projects | news.ycombinator.com | 17 Mar 2024
  • Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS

    2 projects | dev.to | 25 Feb 2023
  • New integration guide: Symfony PHP framework

    2 projects | /r/flowbite | 22 Feb 2023
  • I built an integration guide for Symfony, Tailwind CSS and Flowbite

    2 projects | /r/symfony | 22 Feb 2023