paleite / crass-loader

Crass loader module for webpack

crass-loader

Crass loader module for webpack.

Usage

Documentation: Using loaders

Installation

npm install crass-loader --save-dev

Examples

Using crass-loader with css-loader.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          'crass-loader'
        ]
      }
    ]
  }
};

Advanced options

optimize

Default: true

crass optimizes by default. Use 'optimize: false' to avoid optimization.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              optimize: false
            }
          }
        ]
      }
    ]
  }
};

o1

Default: false

crass can do O1 optimization, but doesn't do so by default. Use 'o1: true' to enable. ATTN: Will only work if 'optimize: true'

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              o1: true
            }
          }
        ]
      }
    ]
  }
};

pretty

With the pretty option Crass will prettify the output.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              pretty: true
            }
          }
        ]
      }
    ]
  }
};

saveie

Use the saveie option to get Crass to specifically support Internet Explorer 6 and below.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              saveie: true
            }
          }
        ]
      }
    ]
  }
};

min

Default: chr39,fx31,ie11,op26 Set a comma-separated list of browser versions to instruct Crass to strip CSS that would otherwise only apply to browsers older than the versions listed. For example 'ie9,fx30' would strip CSS that applies only to Firefox 29 and below and Internet Explorer 8 and below. The following prefixes are supported: ie, op, fx, chr

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              min: 'ie1,fx5,chr1'
            }
          }
        ]
      }
    ]
  }
};

css4

Use the css4 option to get Crass to allow optimized output to contain CSS4 features and syntax. Note that this may not be supported in all modern browsers.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'crass-loader',
            options: {
              css4: true
            }
          }
        ]
      }
    ]
  }
};

License

MIT © Patrick Eriksson