https://github.com/ajlai/postcss_transformer.dart
Dart transformer using PostCSS for asset transformation
https://github.com/ajlai/postcss_transformer.dart
css dart postcss
Last synced: 4 months ago
JSON representation
Dart transformer using PostCSS for asset transformation
- Host: GitHub
- URL: https://github.com/ajlai/postcss_transformer.dart
- Owner: ajlai
- License: mit
- Created: 2015-11-01T09:49:06.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-13T21:20:12.000Z (almost 10 years ago)
- Last Synced: 2023-08-20T22:56:31.559Z (almost 3 years ago)
- Topics: css, dart, postcss
- Language: Dart
- Size: 199 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss_transformer.dart [](https://travis-ci.org/ajlai/postcss_transformer.dart)
http://pub.dartlang.org/packages/postcss_transformer
[Dart transformer](https://www.dartlang.org/tools/pub/glossary.html#transformer) wrapping [PostCSS](https://github.com/postcss/postcss).
Allows for easy hooking in of [PostCSS plugins](http://postcss.parts/) (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`:
```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](https://github.com/code42day/postcss-cli#examples).
For example, the following arguments
```yaml
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](https://github.com/code42day/postcss-cli#usage) 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](https://github.com/localvoid/autoprefixer_transformer) and how incredibly easy it was to set up.