Sass and Autoprefixer in Dart - sass

Question

I want to, in Dart project, use Sass (for some nesting and file concatenation) and then apply autoprefixer to the result CSS.
In pubspec.yaml I do have those dependencies and transformers. TL;DR I am trying to use sass_builder (which works just fine on it's own; https://pub.dartlang.org/packages/sass_builder) and postcss_transformer (https://pub.dartlang.org/packages/postcss_transformer):
dependencies:
dev_dependencies:
browser: '>=0.10.0 <0.11.0'
dart_to_js_script_rewriter: '^1.0.1'
postcss_transformer: '^0.1.1'
sass_builder: '^1.1.2'
transformers:
- dart_to_js_script_rewriter
- sass_builder
- postcss_transformer:
arguments:
- use: autoprefixer
- autoprefixer.browsers: '> 1%'
However even if the usage of the transformers is, at least I believe, good, it just cannot cooperate OK:
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" serve web --port=62806
Loading source assets...
Loading dart_to_js_script_rewriter, sass_builder and postcss_transformer transformers...
Serving klubFITpp_titani web on http://localhost:62806
[web] GET Served 4 assets.
[Info from Dart2JS]:
Compiling klubFITpp_titani|web/main.dart...
Build error:
Transform Postcss on klubFITpp_titani|web/style/alfa.css threw error: Systém nemůže nalézt uvedený soubor.
Command: postcss --use autoprefixer --autoprefixer.browsers "> 1%"
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
dart:async/zone.dart 1307 _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330 _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257 _BufferingStreamSubscription._add
dart:async/stream_controller.dart 796 _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 667 _StreamController._add
dart:async/stream_controller.dart 613 _StreamController.add
dart:isolate-patch/isolate_patch.dart 151 _RawReceivePortImpl._handleMessage
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
[web] GET style/alfa.css => Could not find asset klubFITpp_titani|web/style/alfa.css.
[Info from Dart2JS]:
Took 0:00:04.000418 to compile klubFITpp_titani|web/main.dart.
Build completed with 1 errors.
I am seeking for the solution on how to connect those two transformers or what to use to run Autoprefixer properly. I am also fine with instaling postcss etc. using node, which I now for the postcss_transformer transformer. It would be best if it would work using pub build / pub watch, eg. using some Dart transformer or so.
I use Windows 10. postcss works ok in a command line.

Answer 1

So I got this to work, but I'm not sure what exactly in your configuration isn't working. What I had to get this to work:
a) postcss command needs to work along with having the autoprefixer. I used this command to install:
npm install -g postcss-cli autoprefixer
b) Then I tested the on the command line to ensure it worked.
I used your pubspec.yaml exactly.
The web/index.scss I used was:
$primary-color: #333;
body {
color: $primary-color;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
The output was:
body {
color: #333;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: linear-gradient(to bottom, white, black);
}
/*# sourceMappingURL=*/
This was on a mac. So the configuration is possible. Hopefully this helps some.
Just a note that in the new build_runner system this won't work as is as it overwrites a file which is not allowed in the new system. One could fix this by specifying different output extensions instead of using the same input extension.