less_dart 1.1.1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 87

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

Less-transformer for pub-serve, pub-build and Less-compiler for pub-run

This is a translation from Less 3.0.0.-alpha.3 Javascript (over nodejs) to Dart. It is a pure Dart implementation for the server/developer side.

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

Use as Compiler or Transformer

The package is a Less compiler with wrappers for use in command line or as a dart transformer. 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 = new Less();

    args.add('-no-color');
    args.add('--strict-math=on');
    args.add('--strict-units=on');
    args.add('less/charsets.less');
    less.transform(args).then((exitCode){
      stderr.write(less.stderr.toString());
      stdout.writeln('\nstdout:');
      stdout.write(less.stdout.toString());
    });
  }

Use as a Dart Transformer with pub-build or pub-serve

Simply add the following lines to your pubspec.yaml to work with the default options:

dependencies:
  less_dart: any
transformers:
  - less_dart

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

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

When pub build is started, a change in a .less file, or a .html file detected as entry point, trigger the transformer process again.

Transformer Configuration

You can also pass options to less_dart if necessary:

transformers:
  - less_dart:
      entry_points:
      	- path/to/builder.less
      	- or/other.less
      output: /path/to/builded.css
      include_path: /path/to/directory/for/less/includes
	  cleancss: trur or false or "option1 option2"
      compress: true or false
      build_mode: less, dart or mixed. (dart by default)
      other_flags:
        - to include in the lessc command line
      silence: true
  • entry_points (or entry_point equivalent):

    • If not supplied process all '.less' and '.html' files.
    • Could be a list of files to process, as example: ['web/file1.less', 'web/file2.less'].
    • Could be, also, a pattern for inclusion, as example: ['*.less'].
    • Or have exclusion patterns that start with '!', as example: ['.less', '!/lib/.less'].
  • output - Is the '.css' file generated. Only works when one (only one) '.less' file is add to entry_points. No '*' must be found in the path. Is independent from '.html' files. If not supplied, or several '.less' are processed, then input file '.less' with extension changed to '.css' is used.

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

  • build_mode -

    • less - command CMD> lessc --flags input.less output.css is used. (output.css is in the same directory as input.less)
    • dart - command CMD> lessc --flags - with stdin and stdout piped in the dart transformer process. See build folder for the css file.
    • mixed - command CMD> lessc --flags input.less with stdout managed by the dart transformer process. See build folder for the css file.
  • other_flags - Let add other flags such as (--source-map, ...) in the lessc command line.

  • silence - Only log error messages to transformer window.

Html transformation

When a .html file is processed, 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 .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">
  <template>
    <less>
      @color: red;
      :host {
        background-color: @color;
      }
    </less>
    <div>
		...

Will result in:

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

Custom Transformer, 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 transformer in your application. Create a file lib\transformer.dart which extends the less_dart FileTransformer (see example in: test\custom_transformer.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.

    • If this is a problem use less_node.
    • Alternatively you can use 'Custom Functions' (see example in: test/custom_functions_test.dart) from your dart program, or your custom transformer.
  • 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

Known issues

  • The transformer has complex funcionality. There is an older and simpler version.

        transformers:
        - less_dart/deprecated/transformer:
            entry_point: ...
    
  • cleanCSS (as plugin) not fully implemented.

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

Contribuitors

DisDis

License

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

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

Licensed under the Apache License.

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

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

v.1.0.0 (2017-02-27)

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

v.0.3.4 (2016-05-03)

  • rem function to convert from px, pt or em

v.0.3.3 (2015-12-06)

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

v.0.3.2 (2015-06-06)

  • Repair transformer bugs

v.0.3.1 (2015-04-19)

  • clean-css plugin with some optimizations

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

v0.2.2 (2015-03-26)

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

v0.2.1 (2015-03-23)

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

v0.2.0 (2015-03-16)

  • Less 2.4.0 code.
  • Custom Functions.

v0.1.4 (2015-01-12)

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

v0.1.3 (2015-01-09)

  • Final less 1.7.5 code.

v0.1.2 (2015-01-06)

  • SourceMaps generation.

v0.1.1 (2015-01-02)

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

v0.1.0 (2014-12-30)

Use this package as a library

1. Depend on it

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


dependencies:
  less_dart: "^1.1.1"

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/deprecated/transformer.dart';

      import 'package:less_dart/less.dart';

      import 'package:less_dart/transformer.dart';
  
Version Uploaded Documentation Archive
1.1.1 Dec 18, 2017 Go to the documentation of less_dart 1.1.1 Download less_dart 1.1.1 archive
1.1.0 Dec 10, 2017 Go to the documentation of less_dart 1.1.0 Download less_dart 1.1.0 archive
1.0.0 Feb 27, 2017 Go to the documentation of less_dart 1.0.0 Download less_dart 1.0.0 archive
0.3.4 May 4, 2016 Go to the documentation of less_dart 0.3.4 Download less_dart 0.3.4 archive
0.3.3 Dec 7, 2015 Go to the documentation of less_dart 0.3.3 Download less_dart 0.3.3 archive
0.3.2 Jun 15, 2015 Go to the documentation of less_dart 0.3.2 Download less_dart 0.3.2 archive
0.3.1 May 21, 2015 Go to the documentation of less_dart 0.3.1 Download less_dart 0.3.1 archive
0.3.0 Apr 9, 2015 Go to the documentation of less_dart 0.3.0 Download less_dart 0.3.0 archive
0.2.2 Mar 26, 2015 Go to the documentation of less_dart 0.2.2 Download less_dart 0.2.2 archive
0.2.1 Mar 23, 2015 Go to the documentation of less_dart 0.2.1 Download less_dart 0.2.1 archive

All 16 versions...

Analysis

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

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
76 / 100
Health:
Code health derived from static analysis. [more]
98 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
97 / 100
Overall score:
Weighted score of the above. [more]
87
Learn more about scoring.

Platforms

Detected platforms: other

Platform components identified in package: build, io, isolate, mirrors.

Suggestions

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 5 errors 7 hints.

    Strong-mode analysis of lib/src/environment/bi_map.dart failed with the following error:

    line: 5 col: 7
    Missing concrete implementations of 'Map.addEntries', 'Map.cast', 'Map.map', 'Map.removeWhere' and 3 more.

    Strong-mode analysis of lib/src/tree/node.dart failed with the following error:

    line: 574 col: 28
    The argument type '(Node) → Null' can't be assigned to the parameter type '(dynamic) → void'.

    Similar analysis of the following files failed:

    • lib/deprecated/transformer.dart (hint)
    • lib/src/data/unit_conversions.dart (hint)
    • lib/src/environment/environment.dart (hint)
    • lib/src/environment/url_file_manager.dart (hint)
    • lib/src/functions/number_functions.dart (hint)
    • lib/src/sourcemap/source_map_output.dart (hint)
    • lib/transformer.dart (hint)
  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use less_dart.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.0 <2.0.0
barback >=0.15.2+9 <0.16.0 0.15.2+16
meta >=1.0.4 <2.0.0 1.1.5
mime >=0.9.0 <0.12.0 0.9.6+1
package_resolver >=1.0.2 <2.0.0 1.0.3
path >=1.4.1 <2.0.0 1.6.1
source_maps >=0.10.2 <0.12.0 0.10.5
source_span >=1.4.0 <2.0.0 1.4.0
utf >=0.9.0 <0.12.0 0.9.0+4
Transitive dependencies
async 2.0.7
charcode 1.1.1
collection 1.14.10
http 0.11.3+16
http_parser 3.1.2
package_config 1.0.3
pool 1.3.5
string_scanner 1.0.2
typed_data 1.1.5
Dev dependencies
logging >=0.11.0 <0.12.0
mockito >=1.0.0 <3.0.0
stack_trace >=1.7.2 <2.0.0 1.9.2
test >=0.12.20+2 <0.13.0