@hidoo/gulp-task-build-css-stylus

Task that build css by stylus for gulp.

Installation

$ npm install --save-dev gulp@next @hidoo/gulp-task-build-css-stylus

Usage

basic:

import { task } from 'gulp';
import buildCss from '@hidoo/gulp-task-build-css-stylus';

task(
  'css',
  buildCss({
    src: '/path/to/stylus/main.styl',
    dest: '/path/to/dest'
  })
);

remove unused CSS:

import { task } from 'gulp';
import buildCss from '@hidoo/gulp-task-build-css-stylus';

task(
  'css',
  buildCss({
    src: '/path/to/stylus/main.styl',
    dest: '/path/to/dest',
    uncssTargets: ['/path/to/target.html']
  })
);

API

buildCss

return css build task by stylus

Parameters

• options Object options (optional, default {})

  • options.name String task name (use as displayName) (optional, default 'build:css')
  • options.src String source path
  • options.dest String destination path
  • options.filename String destination filename (optional, default 'main.css')
  • options.suffix String suffix when compressed (optional, default '.min')
  • options.browsers Array<String>? target browsers. see: default target browsers
  • options.banner String license comments (optional, default '')
  • options.stylusOptions Object stylus options. see: gulp-stylus options (optional, default {rawDefine:{}})
  • options.url String type of processing of url() (one of [inline|copy|rebase]) see: https://www.npmjs.com/package/postcss-url (optional, default null)
  • options.urlOptions Object options of processing of url() see: https://www.npmjs.com/package/postcss-url#options-combinations (optional, default {})
  • options.uncssTargets Array<String> array of html file path that target of uncss process (optional, default [])
  • options.uncssIgnore Array<String> array of selector that should not removed (optional, default [])
  • options.additionalProcess Function<PostCSSRoot> additional PostCss process (optional, default null)

Examples

import { task } from 'gulp';
import buildCss from '@hidoo/gulp-task-build-css-stylus';

task(
  'css',
  buildCss({
    name: 'css:main',
    src: '/path/to/stylus/main.styl',
    dest: '/path/to/dest',
    filename: 'styles.css',
    suffix: '.hoge',
    browsers: ['> 0.1% in JP'],
    banner: '/*! copyright <%= pkg.author %> * /\n',
    stylusOptions: { rawDefine: {} },
    url: 'inline',
    urlOptions: { basePath: path.resolve(process.cwd(), 'src/images') },
    uncssTargets: ['/path/to/html/target.html'],
    uncssIgnore: ['.ignore-selector'],
    additionalProcess: (root) => root,
    compress: true
  })
);

Returns Function<Stream>

Test

$ pnpm test

License

MIT