Notoriously Punctual Manatee

    postcss-modules-scope
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-modules-scope package

    3.0.0 • Public • Published

    CSS Modules: Scope Locals & Extend

    Build Status

    Transforms:

    :local(.continueButton{
      color: green;
    }

    into:

    :export {
      continueButton: __buttons_continueButton_djd347adcxz9;
    }
    .__buttons_continueButton_djd347adcxz9 {
      color: green;
    }

    so it doesn't pollute CSS global scope and can be simply used in JS like so:

    import styles from "./buttons.css";
    elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`;

    Composition

    Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:

    .globalButtonStyle {
      background: white;
      border: 1px solid;
      border-radius: 0.25rem;
    }
    .globalButtonStyle:hover {
      box-shadow: 0 0 4px -2px;
    }
    :local(.continueButton{
      compose-with: globalButtonStyle;
      color: green;
    }

    becomes:

    .globalButtonStyle {
      background: white;
      border: 1px solid;
      border-radius: 0.25rem;
    }
    .globalButtonStyle:hover {
      box-shadow: 0 0 4px -2px;
    }
    :local(.continueButton) {
      compose-with: globalButtonStyle;
      color: green;
    }
    

    Note: you can also use composes as a shorthand for compose-with

    Local-by-default & reuse across files

    You're looking for CSS Modules. It uses this plugin as well as a few others, and it's amazing.

    Building

    npm install
    npm test
    
    • Status: Build Status
    • Lines: Coverage Status
    • Statements: codecov.io

    Development

    • npm test:watch will watch src and test for changes and run the tests

    License

    ISC

    With thanks

    • Mark Dalgleish
    • Tobias Koppers
    • Guy Bedford

    Glen Maddern, 2015.

    Install

    npm i postcss-modules-scope

    DownloadsWeekly Downloads

    12,099,475

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    15 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar