@wok-cli/task-styles v1.0.2

Styles Task

Sharable tasks for CSS stylesheets.

By default the task implements gulp-postcss, autoprefixer and cssnano (production only).

Installation

This task requires @wok-cli/core as peer dependency.

npm i @wok-cli/core @wok-cli/task-styles --save-dev

Parameters

1. Supports environment templates.
2. Defaults to the value of env.sourcemaps.

Hooks

Example

const $ = require('@wok-cli/core');
const styles = require('@wok-cli/task-styles');

exports.styles = $.task(styles, {
  src: ['src/assets/css/**/*.css'],
  dest: 'public/assets/css',
});

Configuring PostCSS plugins

To configure your own PostCSS plugins you may either pass them as the hooks:post[postcss] parameter or via a dedicated config file in your project root.

Both methods will override any built-in plugin defined by the task (ie: autoprefixer and cssnano).

Via parameter

const $ = require('@wok-cli/core');
const styles = require('@wok-cli/task-styles');

exports.styles = $.task(styles, {
  src: ['src/assets/css/**/*.css'],
  dest: 'public/assets/css',
+ 'hooks:post': {
+   postcss: [
+     // ...plugins list
+   ],
+ },
});

Via Dedicated Config

First of all you need to disable all built-in plugins by setting the plugins parameter to an empty array

const $ = require('@wok-cli/core');
const styles = require('@wok-cli/task-styles');

exports.styles = $.task(styles, {
  src: ['src/assets/css/**/*.css'],
  dest: 'public/assets/css',
+ 'hooks:post': {
+   postcss: [],
+ },
});

Then create a configuration file in project root folder. See postcss-load-config for available formats.