Search code examples
sassdartangular-dartautoprefixer

Sass and Autoprefixer in Dart

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.

Solution

  • 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.