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

| parameter | type | default | note | | ------------ | ------------------ | ------- | --------------------------------------------------------- | | src | stringstring[] | | Globs source files (1) | | dest | string | | Destination folder (1) | | sourcemaps | stringboolean | | Write sourcemaps. See here for details(2) | | hook:(*) | object | | Hooks configuration parameters (see below) |

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

Hooks

| name | type | description | | ---------- | ------------- | ---------------------------------------------------- | | pre | lazypipe | Execute pre-processing hooks | | post | lazypipe | Execute post-processing hooks (by default postcss) | | complete | lazypipe | Executed after styles have been copied |

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.