postcss_transformer.dart

Dart transformer wrapping PostCSS.

Allows for easy hooking in of PostCSS plugins (ie autoprefixer) into the build process of a dart project.

Requirements

Must have installed postcss, postcss-cli and postcss plugins (ie autoprefixer) via npm.

Usage

Add postcss_transformer to dependencies and transformers in your pubspec.yaml:

name: postcss_transformer_example
dependencies:
  postcss_transformer: any
transformers:
- postcss_transformer:
    arguments:
    - use: autoprefixer
    - autoprefixer.browsers: Firefox 38, Safari 9

See example/ folder for what a basic dart project using postcss_transformer would look like.

Configuration

arguments (REQUIRED)

List of key-value pairs passed in as arguments to the postcss command. Use use key to configure which plugins run and the order they run in. You can also pass in config parameters for the plugins similar to how they are passed in postcss-cli.

For example, the following arguments

arguments:
  - use: autoprefixer
  - autoprefixer.browsers: > 5%
  - use: postcss-cachify
  - postcss-cachify.baseUrl: /res

end up turning into the command

postcss --use autoprefixer --autoprefixer.browsers '> 5%' \
        --use postcss-cachify --postcss-cachify.baseUrl /res

See postcss-cli documentation for more details.

executable (OPTIONAL, default: postcss)

Path to postcss executable

input_extension (OPTIONAL, default: .css)

extension for transformer input files

output_extension (OPTIONAL)

extension for transformer output files. If not set then transformer will use input_extension.

Credits

postcss_transformer was very much inspired by autoprefixer_transformer and how incredibly easy it was to set up.

Libraries

postcss_transformer
test