Core CSS Build Config

PostCSS Config

To setup your own PostCSS config to consume the CSSNext variables, you'll want install the needed dependencies for PostCSS:

npm install postcss-import postcss-cssnext

Then adjust your postcss.config.js to include those plugins:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': { browsers: ['Last 2 versions', 'IE >= 10'] }
  }
}

If you use Webpack for loading CSS, you'll also need to install your loaders:

npm install style-loader css-loader postcss-loader

And add a module.rule to your webpack.config.js:

module: {
  rules: [
    {
      test: /\.module\.css$/,
      include: [require('path').resolve(path.join('node_modules', '@pluralsight', 'ps-design-system-core'))],
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }
  ]
}

Sass Config

Sass variables are available, generated from the source variables. To use Sass, installed the required build tools, such as:

npm install node-sass

If you use Webpack for loading CSS, you'll also need to install your loaders:

npm install style-loader css-loader sass-loader

And add a module.rule to your webpack.config.js:

module: {
  rules: [
    {
      test: /\.module\.css$/,
      include: [require('path').resolve(path.join('node_modules', '@pluralsight', 'ps-design-system-core'))],
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

Import Vanilla CSS

Vanilla CSS utility classes are available, generated from the source variables. Use of these utility classes is not recommended for most applications.

The up side is that no build is technically necessary.

Config Examples

See the examples on github for config in project context.

See the core usage docs for usage syntax details.