@nickkaramoff/taskr-postcss

PostCSS plugin for Taskr

Usage no npm install needed!

<script type="module">
  import nickkaramoffTaskrPostcss from 'https://cdn.skypack.dev/@nickkaramoff/taskr-postcss';
</script>

README

@nickkaramoff/taskr-postcss npm

PostCSS plugin for Taskr.

Heads up!

This is a fork of the official @taskr/postcss package with a few differences:

  • this package uses PostCSS 8 (and not 6)
  • thus, this package supports Node version 10 and higher (like PostCSS 8 itself)
  • it loads the config using PostCSS' own postcss-load-config

While this can be used as a drop-in replacement for @taskr/postcss, there is no guarantee that your build won't break. Use with caution!

Install

$ npm install --save-dev @nickkaramoff/taskr-postcss

API

.postcss([options])

Check out PostCSS's Options documentation to see the available options.

Note: There should be no need to set options.to and options.from.

If you would like to autoload external PostCSS config, you must not define any options directly.

Usage

Embedded Options

Declare your PostCSS options directly within your taskfile.js:

exports.styles = function * (task) {
  yield task.source('src/**/*.scss').postcss({
    plugins: [
      require('precss'),
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ],
    options: {
      parser: require('postcss-scss')
    }
  }).target('dist/css');
}

Autoloaded Options

Automatically detect & connect to existing PostCSS configurations

If no options were defined, @nickkaramoff/taskr-postcss will look for existing .postcssrc, postcss.config.js, and .postcssrc.js root-directory files. Similarly, it will honor a "postcss" key within your package.json file.

  • .postcssrc -- must be JSON; see example
  • .postcssrc.js -- can be JSON or module.exports a Function or Object; see example
  • postcss.config.js -- can be JSON or module.exports a Function or Object; see example
  • package.json -- must use "postcss" key & must be JSON; see example

Important: If you take this route, you only need one of the files mentioned!

// taskfile.js
exports.styles = function * (task) {
  yield task.source('src/**/*.scss').postcss().target('dist/css');
}
// .postcssrc
{
  "plugins": {
    "precss": {},
    "autoprefixer": {
      "browsers": ["last 2 versions"]
    }
  },
  "options": {
    "parser": "postcss-scss"
  }
}

Support

Any issues or questions about Taskr can be sent to the Taskr monorepo.

Any issues about this package should be sent here.

License

MIT © Luke Edwards MIT © Nikita Karamov