Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postcss-modules-scopepublic

    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

    Build Status

    • Lines: Coverage Status
    • Statements: codecov.io

    Development

    • npm autotest will watch src and test for changes and run the tests, and transpile the ES6 to ES5 on success

    License

    ISC

    With thanks

    • Mark Dalgleish
    • Tobias Koppers
    • Guy Bedford

    Glen Maddern, 2015.

    install

    npm i postcss-modules-scope

    Downloadslast 7 days

    1,900,891

    version

    1.1.0

    license

    ISC

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar