webpack 📦

DSS comes with a webpack loader and plugin and since it works similarly to CSS Modules can leverage existing tools like extract-text-webpack-plugin (webpack 3) and mini-css-extract-plugin (webpack 4) to allow you to easily compile your styles.

npm i --save-dev dss-webpack

dss-webpack exports a plugin which optimizes your final bundle after extraction, and a loader that compiles your styles.

For webpack 3 you might want to use extract-text-webpack-plugin

const path = require('path')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const DSSwebpackPlugin = require('dss-webpack')

const localIdentName =
  process.env.NODE_ENV === 'production' ? 'DSS-[hash:base32]' : '[name]-[local]--[hash:base32:5]'

const config = {
  entry: path.resolve('./src/index.js'),
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            // This plugin is similar to the css-loader for CSS Modules
            {
              loader: DSSwebpackPlugin.loader,
              query: {
                // optional, adds readable classnames
                localIdentName,
              },
            },
          ],
        }),
      },
    ],
  },
  plugins: [
    new HtmlwebpackPlugin({
      template: path.resolve('./src/index.html'),
    }),
    new ExtractTextPlugin('index.css'),

    // Important! Optimizes your DSS styles - always include this.
    new DSSwebpackPlugin({
      test: /index.css$/,
    }),
  ],
}

module.exports = config

For webpack 4 you might want to use mini-css-extract-plugin

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const DSSwebpackPlugin = require('dss-webpack')

const localIdentName =
  process.env.NODE_ENV === 'production' ? 'DSS-[hash:base32]' : '[name]-[local]--[hash:base32:5]'
const mode = process.env.NODE_ENV || 'development'

const config = {
  mode,
  entry: path.resolve('./src/index.js'),
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            // This plugin is similar to the css-loader for CSS Modules
            loader: DSSwebpackPlugin.loader,
            query: {
              // optional, adds readable classnames
              localIdentName,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlwebpackPlugin({
      template: path.resolve('./src/index.html'),
    }),
    new MiniCssExtractPlugin({
      filename: 'index.css',
    }),

    // Important! Optimizes your DSS styles - always include this.
    new DSSwebpackPlugin({
      test: /index.css$/,
    }),
  ],
}

module.exports = config

The webpack configuration looks exactly the same as the previous ones except that now we test for scss files and run the sass-loader before the dss loader.

rules: [
  {
    test: /.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        // This plugin is similar to the css-loader for CSS Modules
        loader: DSSwebpackPlugin.loader,
        query: {
          // optional, adds readable classnames
          localIdentName,
        },
      },

      // Compile sass before using DSSwebpackPlugin.loader
      {
        loader: 'sass-loader',
        options: {
          sourceMaps: false,
        },
      }

    ],
  },
]

The webpack configuration looks exactly the same as the previous ones except that now we run the postcss-loader before the dss loader.

rules: [
  {
    test: /.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        // This plugin is similar to the css-loader for CSS Modules
        loader: DSSwebpackPlugin.loader,
        query: {
          // optional, adds readable classnames
          localIdentName,
        },
      },

      // Compile the CSS with PostCSS
      {
        loader: 'postcss-loader',
        options: {
          // Configure here the plugins or
          // omit this option if you have a `postcss.config.js` file
          plugins: () => [
            require('postcss-easy-import')(),
            require('postcss-simple-vars')({ variables: () => require('./theme') })
            // ...
          ],
        },
      }

    ],
  },
]