Package Exports

webpack-atomizer-loader

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 (webpack-atomizer-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpack-atomizer-loader

Webpack loader for compiling atomic css

Install

$ npm install webpack-atomizer-loader --save-dev

$ yarn add webpack-atomizer-loader -D

Usage

In your webpack config:

find the babel-loader or jsx-loader setting
insert the webpack-atomizer-loader before it
example

var path = require('path');
.
.
.
loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'webpack-atomizer-loader',
            query: {
                configPath: path.resolve('./atomCssConfig.js')
            }
        }
    ]

atomCssConfig.js example which specified in configPath

module.exports = {
    cssDest: './main.css',
    options: {
        namespace: '#atomic',
    },
    configs: {
        breakPoints: {
            sm: '@media screen(min-width=750px)',
            md: '@media(min-width=1000px)',
            lg: '@media(min-width=1200px)'
        },
        custom: {
            '1': '1px solid #000',
        },
        classNames: []
    }
}

To assign the output destination, the extra parameter cssDest in atomic's config should be set, if bypass configPath, the default cssDest is ./build/css/atomic.css.

Advanced

postcss plugins

webpack-atomizer-loader now supports processing output CSS file with postcss by doing this:

var path = require('path');
var autoprefixer = require('autoprefixer');
  .
  .
  .

  {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'webpack-atomizer-loader',
      query: {
          postcssPlugins: [autoprefixer]
          configPath: [
              path.resolve('./atomCssConfig.js')
          ]
      }
  }

Minimize output CSS file

Set minimize to true to loader's config

var path = require('path');
var autoprefixer = require('autoprefixer');
  .
  .
  .

  {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'webpack-atomizer-loader',
      query: {
          postcssPlugins: [autoprefixer]
          minimize: true,
          configPath: [
              path.resolve('./atomCssConfig.js')
          ]
      }
  }

Please visit acss-io/atomizer for more information.