1. postcss-modules-sync
A PostCSS plugin to use CSS Modules synchronously in js
postcss-modules-sync
Package: postcss-modules-sync
Created by: schiehll
Last modified: Fri, 24 Jun 2022 10:26:24 GMT
Version: 1.0.0
License: MIT
Downloads: 166,145
Repository: https://github.com/schiehll/postcss-modules-sync

Install

npm install postcss-modules-sync
yarn add postcss-modules-sync

postcss-modules-sync

A PostCSS plugin to use CSS Modules synchronously in js.

version
MIT License

Install

npm install postcss-modules-sync

Example

 import CSSModulesSync from 'postcss-modules-sync'
import postcss from 'postcss'

const css = `
  :global .text {
    color: white;
    background-color: gray;
  }

  .green {
    background-color: green;
  }

  .blue {
    background-color: blue;
  }

  .default {
    composes: green;
    display: flex;
  }
`

let exportedTokens = {}
const styles = postcss([
  CSSModulesSync({
    generateScopedName: '[path][local]-[hash:base64:10]',
    getJSON: tokens => exportedTokens = tokens
  })
]).process(css).css

console.log('styles', styles)
console.log('tokens', exportedTokens)

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code