JSPM

postcss-modules-resolve-imports

1.1.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 99947
  • Score
    100M100P100Q169014F
  • License MIT

Resolves ICSS imports

Package Exports

  • postcss-modules-resolve-imports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-modules-resolve-imports) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSS Modules: Resolve Imports

Transforms:

:import("library/button.css") {
  i__imported_button_0: button;
}
._source_continueButton {
  color: green;
}

into:

:export {
  continueButton: _source_continueButton _button_button
}
._button_button {
  /*common button styles*/
}
._source_continueButton {
  color: green
}

Note: should be used after postcss-modules-extract-imports and postcss-modules-scope.

The postcss-moduels-resolve-imports plugin also fixes @import and url() paths (which doesn't start from /) for the included modules from the different folders.

Options

icssExports boolean

Adds the :export declaration to the resulting css. In case you need the JavaScript object with tokens, you may obtain it by accessing the lazyResult.root.exports property. For example,

const lazyResult = postcss([...plugins]).process(cssString, {from: filepath});
const tokens = lazyResult.root.exports;

resolve object

Configure how modules should be resolved.

resolve.alias object

Create an aliases for the modules paths. For example, create an alias for the lib directory with common modules:

alias: {
  lib: path.resolve(__dirname, 'lib'),
},

Now, instead of using relative paths when composing:

.button {
  composes: normal from '../../lib/button.css';
}

you can use the alias:

.button {
  composes: normal from 'lib/button.css';
}

resolve.extensions array

Automaticaly check files with the provided extensions.

['.css']

Allows you to omit file extensions while using compose:

.button {
  composes: normal from '../lib/button';
}

resolve.modules array

Provide additional directories to check the modules in. Should be absolute paths only.

[path.resolve(__dirname, 'lib')]

Reference Guides

License

The MIT License