Search code examples
cssdartlessdart-polymer

Using less in a polymer-dart application

I've never used LESS before, but seeing as there is a transformer for it available in Dart, I've decided to throw it in the mix.

pubspec.yaml:

dependencies:
  less_dart: any
transformers:
- less_dart:
    entry_point: web/alm.less

I've removed the styles.css entry in my index.html and replaced it with alm.less:

  <link rel="stylesheet" href="alm.less">

Inside alm.less, if I do:

* /deep/ core-toolbar .core-selected {
  background-color: #FF5252;
  color: #F5F5F5;
}

I can see the colour changing, but if I do this:

@darkPrimaryColor:   #E64A19;

* /deep/ core-toolbar .core-selected {
  background-color: @darkPrimaryColor;
  color: #F5F5F5;
}

that background-color switches back to its default and ignores my @darkPrimaryColor;

Looking at the output of pub build, it places that LESS file directly into index.html without parsing the @darkPrimaryColor;

According to https://pub.dartlang.org/packages/less_dart, I'm supposed to import two dart files, they don't say where exactly, so I've included them in my main-app.dart:

import 'package:polymer/polymer.dart';
import 'package:less_dart/less.dart';
import 'package:less_dart/transformer.dart'; 

@CustomTag('main-app')
class MainApp extends PolymerElement {
    ...
}

Main App is loaded as follows in index.html:

<body unresolved>
  <main-app class="default"></main-app>
  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>

Those two includes causes the following errors, so I've removed them again:

The requested built-in library is not available on Dartium.'package:less_dart/less.dart': error: line 4 pos 1: library handler failed
import 'dart:io';
^: package:less_dart/less.dart

Update:

So removing the .pub and doing pub get and pub cache repair doesn't do much different. I've done a pub serve from the command line to see what it outputs:

pub serve
Loading source assets... 
Loading polymer and less_dart transformers... 
Serving falm web on http://localhost:8080
[Info from less-dart] command: lessc --no-color web/alm.less > web/alm.css
[Info from less-dart] lessc transformation completed in 0.0s

[Warning from ImportInliner on falm|web/index.html]:
line 28, column 3 of web/index.html: Failed to inline stylesheet: Could not find asset falm|web/alm.css.
null. See http://goo.gl/5HPeuP#polymer_26 for details.
<link rel="stylesheet" href="alm.css">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Update

For the record, I'm using dart sdk 1.8.3 and OSX 10.10.1 Yosemite, don't know if this will help.

Update

Got it working, pretty neat plugin once it's working!

So inside my transformers I had to move less_dart to be the first transformer, otherwise the polymer transformer is trying to pickup alm.css which has not been generated yet. I was also missing "build_mode: dart"

dependencies:
  ...
  less_dart: ">=0.1.3 <0.2.0"
transformers:
- less_dart:
    entry_point: web/alm.less
    build_mode: dart
- polymer:
    entry_points: web/index.html
- ...
Solution

  • Jan, thanks to try less_dart.

    less_dart is a compiler/transformer in the server side. It reads your web/alm.less file and generates web/alm.css.

    So, your html file must declare: <link rel="stylesheet" href="alm.css">

    (For use href="alm.less" you would need the original javascript implementation (see http://lesscss.org), which support browser transformation).

    Your next question: Where is the alm.css file generated?

    By default, the transformer use the option: 'build_mode: less'. It reads web/alm.less and writes alm.css in the same directory: web/alm.css.

    I suppose your browser is using 'build/web/index.html', so, you need the alm.css in the same directory. For that you need the transformer option: 'build_mode: dart'.

    dependencies:
  less_dart: any
transformers:
- less_dart:
    entry_point: web/alm.less
    build_mode: dart

    The less_dart package has two components:

    • less compiler (less.dart)
    • less transformer (transformer.dart)

    The compiler could be used directly throw the command line (lessc is in the bin directory):

    pub run lessc web/alm.less web/alm.css

    Or in your Dart program:

        import 'package:less_dart/less.dart';
...
    List<String> args = [];
    Less less = new Less();
    args.add('-no-color');
    args.add('file.less');
    args.add('file.css');
    less.transform(args);

    As Resumen, you must add build_mode: dart to the transformer configuration and search build/web/alm.css