less_dart 2.3.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

Native Dart Less compiler/builder/compressor for .less files and html style tags to css #

Less-builder for webdev serve, webdev build and Less-compiler for pub-run

This is a translation from Less 3.10.3 Javascript (over nodejs) to Dart. It is a pure Dart implementation for the server/developer side. The minimum dart sdk supported is 2.0.

As builder could work also with .html files, by converting <less> tags to <style> tags.

Use as Compiler or Builder #

The package is a Less compiler with wrappers for use in command line or as a dart builder. Also, it could be used in other Dart programs.

Pub-run usage #

If you get the full distribution (tar.gz file), the bin directory has the lessc.dart file for use with pub run:

CMD> pub run bin/lessc [args] file.less file.css

A working example: CMD> pub run bin/lessc test/less/charsets.less

Example with error output: CMD> pub run bin/lessc --no-color test/less/errors/import-subfolder1.less

For help: CMD> pub run bin/lessc --help

How to use in other dart programs #

You would need import the package, create the Less class and call the transform future. There is an example:

  import 'dart:io';
  import 'package:less_dart/less.dart';

  main() {
    List<String> args = [];
    Less less = Less();


Use as a Dart Builder with webdev build or webdev serve #

Add the following lines to your pubspec.yaml:

  less_dart: any

Also, you will need a build.yaml file, with the configuration options.

One of them is the entry_points, to specify what files must be transformed. Could be:

entry_points: ['*.less', '*.html']

After that, all your .less files will be automatically transformed to corresponding .css files. Also the .less.html files will be processed. The standard default is *.less, but it could be modified by inclusion or exclusion paths. The exclusion path start with !. And * is supported in the paths.

The power of Dart builder is to chain builders, so a .less file will be converted to a .css file and this could be the source for another builder. Consider to use the less builder as the first in the chain.

build.yaml Configuration #

In order to use the less builder, you must configure it:

          entry_points: ['path/to/file.less', 'or/other/file.less', 'path/to/file.less.html']
          include_path: 'path/to/directory/for/less/includes'
          cleancss: true or false or "option1 option2"
          compress: true or false
          other_flags: ['to include in the lessc command line', ...]
          enabled: true or false
  • entry_points (entry_point is equivalent):
    • If not supplied process all *.less files.
    • Could be a list of files to process, such as: ['web/file1.less', 'web/file2.less'].
    • Could be, also, a pattern for inclusion, as for example: ['*.less'].
    • Or have exclusion patterns that start with '!', such as: ['*.less', '!/lib/*.less'].

The output file will have the same name as the input, with .css extension for less. For html the file.less.html will be file.html.

  • include_path - see Less Documentation include_path.

  • cleancss - Compress/optimize with clean-css plugin.

    • true: Use default options
    • "option1 option2..." Specifies options to be used.
    • See Plugin Info.
  • compress - see Less Documentation compress. Deprecated in js version, not here.

  • other_flags - Let add other flags such as (--source-map, ...) in the lessc command line.

less_source_cleanup is a post-builder that clean the *.less and *.less.html files in the build directory. It could be

  • enabled - true/false

Html transformation #

When a .less.html file is builded, the transformer look for <less>...</less> tags and then the equivalent <style>...</style> tags are added below, and at the same level.

All the <less> attributes are copied, except 'replace'. With this attribute <less> tags are removed in the final file.

The <less> tags in the final file are stamped with style="display:none" attribute, to avoid conflicts, easing debugging.

A .less.html could have various <less>...</less> pairs.

Also, you could use <style type="text/less">...</style> as equivalent to <less replace>...</less>.

Example for a polymer component:

<polymer-element name="test">
      @color: red;
      :host {
        background-color: @color;

Will result in:

<polymer-element name="test">
    <less style="display:none">
      @color: red;
      :host {
        background-color: @color;
      :host {
        background-color: red;

Custom Builder, Custom Plugin, Custom Functions #

You could clone the package to your local environment and modify it to add plugins. But, ...

Other way, is to inherit the builder in your project. Create a file lib\my_builder.dart which extends the less_dart LessBuilder (see example in: example\less_custom_builder.dart). The customOptions method could be override to modify the less options defining a custom plugin with custom functions.

Differences with official (js) version #

  • Javascript evaluation is not supported.

    • Alternatively you can use 'Custom Functions' (see example in: example/custom_functions_example.dart) from your dart project, or your custom builder.
  • Added option --banner=bannerfile.txt.

  • Added directive @options "--flags";. Intended to be the first line in a less file/tag, acts globally. This directive let specify individual options in batch processing. Example: @options "--strict-math=on --strict-units=on --include-path=test/data";.

  • Modified directive @plugin "lib";. lib is the plugin name and must exist as dart code in the plugins directory. By now are operative @plugin "less-plugin-advanced-color-functions"; and @plugin "less-plugin-clean-css" partially. You could define your custom plugins as indicated above.

  • Basic support for Custom CSS mixins as used by Polymer 1.0.

    • --mixin-name: {...}
    • @apply(--mixin-name);
  • Function rem to convert from px, pt or em to rem, defined as rem(fontSize, [baseFont]):

    • rem(16), rem(16px), rem(12pt), rem(1em), rem(20, 20)
    • 1rem, 1rem, 1rem, 1rem, 1rem
  • @import supports packages as source:

    • @import "packages/package-name/path/starting-in-lib";
    • @import "package://package-name/path/starting-in-lib";

    Also, option --include-path supports package, for easy use of shared mixins libraries:

    • --include-path=packages/package-name/path/starting-in-lib
    • --include-path=package://package-name/path/starting-in-lib

    Use ';' as separator if needed multiples libraries:

    • --include-path=packages/package-name/path/starting-in-lib;packages/package-name/others

    And remember, the own package could be used as package-name.

Known issues #

  • cleanCSS (as plugin) not fully implemented.

  • Error color output. In windows cmd don't support the color commands. ConEmu is an alternative.

Contribuitors #


License #

Copyright (c) 2009-2019 Alexis Sellier & The Core Less Team.

Copyright (c) 2014-2019 Adalberto Lacruz for dart translation.

Licensed under the Apache License.

2.3.7 (2019-12-25) #

  • Linter update to pedantic 1.9.0.

2.3.6 (2019-12-21) #

  • Mark dependents for imports in packages to let builder updates.

2.3.5 (2019-11-20) #

  • Support for builder in other less packages (Ex. Angular lib)
  • Changed build.yaml auto_apply: from 'none' to 'dependents'

2.3.4 (2019-10-31) #

  • Builder bug with relative imports

2.3.3 (2019-10-27) #

  • Linter updates.
  • Resolve bug in builder when @import packages

2.3.2 (2019-08-25) #

  • Linter updates.
  • Less 3.10.3 code.

2.3.1 (2019-07-08) #

  • Prepare for breaking change to HttpClientResponse return type (sdk #36900).

2.3.0 (2019-06-19) #

  • Less 3.9.0 code.
  • Dependencies upgrade.

2.2.0 (2018-11-19) #

  • Less 3.8.1 code, including namespaces and each function.

2.1.0 (2018-10-02) #

  • Less 3.0.4 code.
  • Build updated to 1.0.0.

2.0.1 (2018-09-09) #

  • Internal code to simplify types.

2.0.0 (2018-07-27) #

  • Dart 2.0.0-dev.68.0 compliant. It don't work with Dart 1.x.
  • Transformer replaced by builder.

1.1.1 (2017-12-18) #

  • Fix a crash that occurred in transformer mode in case if the less file imports another one from the same folder
  • Fix incorrect paths in relative imports

1.1.0 (2017-12-10) #

  • Less 3.0.0.-alpha.3 code.
  • imports in *.less which start from "packages/..." are now handled according paths in .packages file generated by pub. see Readme.
  • Linter suggested changes
  • Custom Functions annotation changed to @DefineMethod(...)
  • Internal node name Directive changed to AtRule, and Rule to Declaration. Could affect some plugins
  • options.definePlugin requires named parameters in load and options. See batch_test.

1.0.0 (2017-02-27) #

  • Min sdk 1.22.0
  • Enable strong mode
  • Boost speed
  • Analysis clean up
  • Some bugs removal

0.3.4 (2016-05-03) #

  • rem function to convert from px, pt or em

0.3.3 (2015-12-06) #

  • Basic support for Custom CSS mixins as used in Polymer 1.0: @apply(--mixin-name);

0.3.2 (2015-06-06) #

  • Repair transformer bugs

0.3.1 (2015-04-19) #

  • clean-css plugin with some optimizations

0.3.0 (2015-04-09) #

  • Less 2.5.0 code.
  • Custom transformer, custom plugin
  • Breaking Change: Custom functions go into custom plugin
  • @plugin directive with scope for custom functions

0.2.2 (2015-03-26) #

  • Transformer continous working with pub serve
  • Transformer accept .html files with <style type="text/less> tags

0.2.1 (2015-03-23) #

  • Transformer support for '.html' files (<less>..</less> -> <style>..</style>).
  • Transformer accept entry_points with * and !.
  • @options and @plugin directives.

0.2.0 (2015-03-16) #

  • Less 2.4.0 code.
  • Custom Functions.

0.1.4 (2015-01-12) #

  • Breaking Change: Transformer option 'build_mode' changed to 'dart' as default.
  • Updated Readme and some bugs resolved.

0.1.3 (2015-01-09) #

  • Final less 1.7.5 code.

0.1.2 (2015-01-06) #

  • SourceMaps generation.

0.1.1 (2015-01-02) #

  • Path package integration to normalize file path, according to windows/linux.

0.1.0 (2014-12-30) #


import 'dart:io';
import 'package:less_dart/less.dart';

void main() {
  final less = Less();
  ]).then((int lessExitCode) {
    exitCode = lessExitCode;

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  less_dart: ^2.3.7

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:less_dart/less.dart';
import 'package:less_dart/less_builder.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4

Health suggestions

Format lib/src/tree/quoted.dart.

Run dartfmt to format lib/src/tree/quoted.dart.

Format lib/src/tree/ruleset.dart.

Run dartfmt to format lib/src/tree/ruleset.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
build >=1.0.0 <2.0.0 1.2.2
build_config >=0.3.1 <0.5.0 0.4.1+1
meta >=1.0.4 <2.0.0 1.1.8
mime >=0.9.0 <0.12.0 0.9.6+3
package_resolver >=1.0.2 <2.0.0 1.0.10
path >=1.4.1 <2.0.0 1.6.4
source_maps >=0.10.2 <0.12.0 0.10.8
source_span >=1.4.0 <2.0.0 1.6.0
utf >=0.9.0 <0.12.0 0.9.0+5
Transitive dependencies
_fe_analyzer_shared 1.0.3
analyzer 0.39.4
args 1.5.2
async 2.4.0
charcode 1.1.2
checked_yaml 1.0.2
collection 1.14.12
convert 2.1.1
crypto 2.1.4
csslib 0.16.1
glob 1.2.0
html 0.14.0+3
http 0.12.0+4
http_parser 3.1.3
js 0.6.1+1
json_annotation 3.0.1
node_interop 1.0.3
node_io 1.0.1+2
package_config 1.1.0
pedantic 1.9.0
pub_semver 1.4.2
pubspec_parse 0.1.5
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+13
yaml 2.2.0
Dev dependencies
logging >=0.11.0 <0.12.0 0.11.4
mockito >=1.0.0 <5.0.0
stack_trace >=1.7.2 <2.0.0
test >=0.12.20+2 <2.0.0