How to use the webpack-atoms.rules.css function in webpack-atoms

module.exports = baseConfig =>
  Object.assign({}, baseConfig, {
    // mode: 'development',
    module: {
      rules: [
        { parser: { amd: false } },
        rules.js.inlineCss({
          tagName: 'less',
          extension: '.less',
          extends: '../../.babelrc.js',
        }),
        rules.css(),
        rules.less(),
        rules.images(),
        rules.fonts(),
      ],
    },
    resolve: {
      symlinks: false,
      alias: {
        'react-widgets$': path.resolve('../react-widgets/src/index.js'),
        'react-widgets/lib': path.resolve('../react-widgets/src'),

        'react-widgets-virtualized$': path.resolve(
          '../virtualized/src/index.js'
        ),
        'react-widgets-virtualized/lib': path.resolve('../virtualized/src'),

const CompressionPlugin = require('compression-webpack-plugin');
const { rules, plugins } = require('webpack-atoms');

module.exports = {
  devtool: 'module-source-map',
  entry: './examples/App.js',
  output: {
    path: `${__dirname}/build`,
    filename: 'bundle.js',
  },
  module: {
    rules: [rules.js(), rules.css()],
  },
  resolve: {
    alias: {
      'react-dom-lite$': `${__dirname}/lib/react-dom-lite.js`,
    },
  },
  plugins: [
    plugins.html({
      template: `${__dirname}/examples/index.html`,
    }),
    plugins.define({
      __SVG__: false,
    }),
    plugins.extractText(),
    new CompressionPlugin(),
  ],

port: 3000,
    stats: stats.minimal,
  },

  resolve: {
    alias: {
      'react-big-calendar$': path.resolve(__dirname + '/../src/index.js'),
      'react-big-calendar/lib': path.resolve(__dirname, '../src'),
    },
  },
  module: {
    rules: [
      rules.js({}),
      rules.images(),
      rules.fonts(),
      { oneOf: [rules.css.modules(), rules.css()] },
      rules.sass({ browsers }),
      {
        test: /\.md/,
        use: [loaders.js(), 'markdown-jsx-loader'],
      },
    ],
  },
  plugins: [
    plugins.html({ title: 'React Big Calendar' }),
    plugins.extractCss(),
  ],
}

module.exports = function(root, config) {
  return merge({}, config, {
    module: {
      rules: [
        { parser: { amd: false } },
        rules.js({ tagName: 'less', extension: '.less' }),
        rules.css(),
        rules.less(),
        rules.images(),
        rules.woff(),
      ],
    },
    plugins: [
      plugins.define(),
      plugins.extractText(),
    ],
    node: {
      Buffer: false,
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
    },
  })

module.exports = function({ config }) {
  config.module.rules = [
    rules.js(),
    rules.fonts(),
    rules.images(),
    rules.css(),
    rules.sass({ browsers }),
  ]

  return config
}

module.exports = (config) => {
  config.module = {
    rules: [
      rules.js.inlineCss(),
      rules.css({ modules: true }),
    ],
  };

  config.plugins.push(
    plugins.extractCss({ disable: true })
  )
  return config;
};

output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/docs/',
  },

  resolve: {
    alias: {
      components: path.resolve(__dirname, './components'),
      react: path.resolve(__dirname, '../node_modules/react'),
    },
  },
  module: {
    rules: [
      rules.js(),
      rules.css(),
      rules.less(),
      rules.images(),
      rules.fonts(),
      {
        test: /\.md$/,
        use: [loaders.js(), path.join(__dirname, './loaders/jsx')],
      },
    ],
  },
}