seek-style-guide-webpack v3.0.1

seek-style-guide-webpack

Webpack decorators for integrating with the SEEK Style Guide.

Installation

$ npm install --save-dev seek-style-guide-webpack

Setup

First, decorate your server Webpack config:

const { decorateServerConfig } = require('seek-style-guide-webpack');

module.exports = decorateServerConfig({
  // Webpack config...
});

Then, decorate your client Webpack config:

const { decorateClientConfig } = require('seek-style-guide-webpack');

module.exports = decorateClientConfig({
  // Webpack config...
});

Options

CSS Output Loader { cssOutputLoader: <webpack loader> | 'style-loader' }

By default the client decorator will use style-loader to handle the styles emitted from the seek-style-guide. Alternatively, you can pass in your own loader configuration, eg.

const { decorateClientConfig } = require('seek-style-guide-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  // Webpack config...
  plugins: [
    new MiniCssExtractPlugin(
      filename: 'style.css'
    })
  ]
};

module.exports = decorateClientConfig(config, {
  cssOutputLoader: MiniCssExtractPlugin.loader
});

Please note that, if your Webpack loaders aren't scoped to your local project files via the "include" option, the decorator will throw an error.

Extra includes (optional) { extraIncludePaths: Array<paths> }

If you have other external node_modules that need to be compiled in the same way as the seek-style-guide then you can pass an extra parameter to the decorators.

module.exports = decorateClientConfig(config, {
  // List of node_modules that need to be compiled by webpack
  extraIncludePaths: ['my-other-module']
});

CSS Selector Prefix (optional) { cssSelectorPrefix: string }

This selector prefix is automatically prepended to all selectors to ensure styles don't leak out into the global scope. For example, this is used for generating the standalone header & footer in the style guide.

module.exports = decorateClientConfig(config, {
  cssSelectorPrefix: '.__SSG__'
});

Contributing

Refer to CONTRIBUTING.md.

License

MIT.