node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

a-css-loader

Another CSS Loader

A css loader inspired by webpack/css-loader.

Rationale

This loader is different than webpack/css-loader in the following ways.

  • Allows css-modules to be distributed and re-used as npm packages. (See webpack/css-loader#393)
  • Allows webpack to fully resolve all paths
  • Support css-modules/value (@value syntax)

TOC

Missing features

  • Source maps
  • @media queries after @imports
  • url() for @imports

Usage

Installation

$ npm install --save a-css-loader

Example

Webpack 1

// webpack.config.js
 
module.exports =  {
  module: {
    /* ... Omitted */
    loaders: [
      {
        test: /\.css$/,
        loader: 'a-css-loader',
        query: {
          /* These are the defaults */
          camelize: false,
          scopedNameFormat: '[local]--[hash:5]',
          mode: 'pure'
        }
      }
    ]
  }
};

CSS

/* @import will combine the css of imported files*/
@import './a-css-file';
/* @require are just an alias for @import.
They are useful when combining this loader with the sass loader because they allow you to bypass
sass's own @import
*/
@require './another-css-file';
 
/* These variables will be stored and exported as locals */
@value my-special-color '#ff00ff';
@value another-special-color from './colors.css';
 
 
.my-class {
  composes: another from './another-css-file.css';
  color: my-special-color;
}

JS

import cssModule from './my-css.css';
 
cssModule['my-special-color'] === '#ff00ff'; // true
cssModule['another-special-color'] === require('./colors.css')['another-special-color']; // true
 
cssModule['my-class'] === require('./another-css-file.css')['another'] + ' my-class--1a1b2'; // true

Path resolution

By default, most path references are resolved by webpack. The only exception is in url() functions. To force them to use webpack to resolve the path, prepend the path with a ~.

Example:

.my-class {
  background: url('http://not-resolved-by-webpack.com/image')
}
 
.my-other-class {
  background: url('~./path/resolved/by/webpack')
}

Options

Name Type Description
camelize boolean Wether to export camelized versions of the keys
scopedNameFormat string Format for class name. It leverages this.
mode enum 'pure', 'global', or 'local'