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

    a-css-loaderpublic

    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'

    install

    npm i a-css-loader

    Downloadslast 7 days

    520

    version

    1.0.3

    license

    ISC

    last publish

    collaborators

    • avatar
    • avatar