less_dart 2.3.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

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 Mar 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6

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.2
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.9
source_span >=1.4.0 <2.0.0 1.7.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.6.0
async 2.4.1
charcode 1.1.3
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.4
js 0.6.1+1
json_annotation 3.0.1
node_interop 1.0.3
node_io 1.0.1+2
package_config 1.9.3
pedantic 1.9.0
pub_semver 1.4.4
pubspec_parse 0.1.5
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+14
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