Socket
Socket
Sign inDemoInstall

postcss-modules-extract-imports

Package Overview
Dependencies
4
Maintainers
5
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-modules-extract-imports

A CSS Modules transform to extract local aliases for inline imports


Version published
Maintainers
5
Weekly downloads
16,825,453
decreased by-7.03%

Weekly downloads

Package description

What is postcss-modules-extract-imports?

The postcss-modules-extract-imports npm package is a PostCSS plugin that helps in transforming CSS modules by extracting all local imports and creating a mapping for them. It is commonly used in a CSS module system where CSS is composed in a modular and reusable way. This plugin processes CSS files and rewrites import statements so that they can be bundled correctly by a module bundler.

What are postcss-modules-extract-imports's main functionalities?

Extracting local imports

This feature allows the plugin to extract local imports from a CSS file. When a CSS class composes from another, this plugin rewrites the import to ensure that the composed class includes the necessary styles from the imported class.

import postcss from 'postcss';
import extractImports from 'postcss-modules-extract-imports';

const css = `.className { color: green; } .anotherClass { composes: className; }`;

postcss([extractImports()])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

Other packages similar to postcss-modules-extract-imports

Readme

Source

CSS Modules: Extract Imports

Build Status

Transforms:

:local(.continueButton) {
  composes: button from "library/button.css";
  color: green;
}

into:

:import("library/button.css") {
  button: __tmp_487387465fczSDGHSABb;
}
:local(.continueButton) {
  composes: __tmp_487387465fczSDGHSABb;
  color: green;
}

Specification

  • Only a certain whitelist of properties are inspected. Currently, that whitelist is ['composes'] alone.
  • An extend-import has the following format:
composes: className [... className] from "path/to/file.css";

Options

  • failOnWrongOrder bool generates exception for unpredictable imports order.
.aa {
  composes: b from "./b.css";
  composes: c from "./c.css";
}

.bb {
  /* "b.css" should be before "c.css" in this case */
  composes: c from "./c.css";
  composes: b from "./b.css";
}

Building

npm install
npm test

Build Status

  • Lines: Coverage Status
  • Statements: codecov.io

License

ISC

With thanks

  • Mark Dalgleish
  • Tobias Koppers
  • Guy Bedford

Glen Maddern, 2015.

Keywords

FAQs

Last updated on 13 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc