rework-npm

Import CSS from npm modules using rework

npm install rework-npm
8 downloads in the last day
39 downloads in the last week
163 downloads in the last month

rework-npm

NPM

Build Status Dependency Status

Import CSS styles from NPM modules using rework.

This lets you use @import CSS using the same rules you use for require in Node. Specify the CSS file for a module using the style field in package.json and use @import "my-module";, or specify the file name in the module, like @import "my-module/my-file";. You can also require files relative to the current file using @import "./my-file";.

An @import will be processed so that the file referenced will have been imported in the current scope at the point of the @import. If a file has been previously imported in the current scope, that file will not be imported again. New scopes are created in a block such as a @media block. Child blocks will not duplicate imports that have been imported in the parent block, but may duplicate imports that are imported in a sibling block (since they may not have effect otherwise).

You can use source maps to show which file a definition originated from when debugging in a browser. To include inline source maps, use .toString({ sourcemap: true }) on the rework object when generating the output.

Example

var rework = require('rework'),
    reworkNPM = require('rework-npm');

var output = rework('@import "test"')
    .use(reworkNPM())
    .toString();

console.log(output);

Reference

reworkNPM([opts])

Creates a new plugin for rework that will import files from NPM.

If opts is a string, it is used as the dir option.

Valid options:

  • dir: The directory where the source file is located. If not specified, it uses the current directory.
  • root: The directory where all source files are located. This is used for source maps. All imported files will have file paths relative to this directory in the source maps. By default this uses the dir option.
  • shim: If you need to import packages that do not specify a style property in their package.json or provide their styles in index.css, you can provide a shim config option to access them. This is specified as a hash whose keys are the names of packages to shim and whose values are the path, relative to that package's package.json file, where styles can be found. Example: shim: {'leaflet': 'dist/leaflet.css'}
  • alias: You can provide aliases for arbitrary file paths using the same format as the shim option. alias: {'tree': './deep/tree/index.css'}
  • prefilter: If you need to prefilter input files, e.g. convert whitespace-sensitive CSS to normal CSS, you can give a prefilter function. Example: prefilter: require('css-whitespace')
npm loves you