Coder Social home page Coder Social logo

assemble / assemble-less Goto Github PK

View Code? Open in Web Editor NEW
66.0 14.0 20.0 1.61 MB

Grunt task for compiling LESS to CSS. This task does for less what Assemble does for HTML, making it much easier to modularize and reduce repetition in stylesheets.

Home Page: http://github.com/assemble/assemble/

License: MIT License

JavaScript 95.85% CSS 4.15%

assemble-less's Introduction

assemble-less NPM version Build Status

Compile LESS to CSS. Adds experimental features that extend Less.js for maintaining UI components and themes. From Jon Schlinkert, core team member of Less.js.

This project is a fork of the popular grunt-contrib-less by the talented Tyler Kellen. Please use that plugin if you require something stable and dependable.

Getting Started

This plugin requires Grunt ~0.4.2

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install assemble-less --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('assemble-less');

Less task

Run this task with the grunt less command.

Task targets, files and options may be specified according to the grunt Configuring tasks guide.

Options

lessrc

Type: String

Default: null

A convenience option for externalizing task options into a .lessrc or .lessrc.yml file. If this file is specified, options defined therein will be used.

globalVars

Type: Object

Default: undefined

Prepend variables to source files.

modifyVars

Type: Object

Default: undefined

Append variables to source files.

metadata

Type: String|Array

Default: Empty string

Pass metadata as context to Lo-Dash templates embedded in LESS files. The name of the files is used as the first path in the template variables, so if you want to use data from palette.yml, your templates would look something like: <%= palette.foo %>.

Data may be formatted in JSON, YAML. See this YAML example and this LESS example.

Note that data passed into options.metadata is merged at the task and target levels. You can turn this off by adding options: {merge: false}, which then disables merging and allows targets to override any data passed in at the task-level.

imports

Type: Object (each option accepts a String or Array)

Default: null

Prepend @import statements to src files using any of the new @import directives released after Less.js v1.5.0, less, css, inline, reference (multiple and once probably aren't applicable here, but feel free to use them if you find a use case). See examples.

Any new import directives will be immediately available upon release by Less.js.

process

Type: Boolean|Object

Default: false

Process source files as templates before concatenating.

  • false - No processing will occur.
  • true - Process source files using grunt.template.process defaults.
  • options object - Process source files using grunt.template.process, using the specified options.
  • function(src, filepath) - Process source files using the given function, called once for each file. The returned value will be used as source code.

(Default processing options are explained in the grunt.template.process documentation)

banner

Type: String

Default: Empty string

This string will be prepended to the beginning of the concatenated output. It is processed using grunt.template.process, using the default options.

(Default processing options are explained in the grunt.template.process documentation)

stripBanners

Type: Boolean|Object

Default: false

Strip JavaScript banner comments from source files.

  • false - No comments are stripped.
  • true - /* ... */ block comments are stripped, but NOT /*! ... */ comments.
  • options object:
    • By default, behaves as if true were specified.
    • block - If true, all block comments are stripped.
    • line - If true, any contiguous leading // line comments are stripped.

paths

Type: String|Array

Default: Directory of input file.

Specifies directories to scan for @import directives when parsing. The default value is the directory of the specified source files. In other words, the paths option allows you to specify paths for your @import statements in the less task as an alternative to specifying a path on every @import statement that appears throughout your LESS files. So instead of doing this:

@import "path/to/less/files/mixins.less";

you can do this:

@import "mixins.less";
rootpath

Type: String

Default: ""

A path to add on to the start of every url resource.

compress

Type: Boolean

Default: false

Compress output by removing some whitespaces.

cleancss

Type: Boolean

Default: false

Compress output using clean-css.

ieCompat

Type: Boolean

Default: true

Enforce the css output is compatible with Internet Explorer 8.

For example, the data-uri function encodes a file in base64 encoding and embeds it into the generated CSS files as a data-URI. Because Internet Explorer 8 limits data-uris to 32KB, the ieCompat option prevents less from exceeding this.

optimization

Type: Integer

Default: null

Set the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree.

strictImports

Type: Boolean

Default: false

Force evaluation of imports.

strictMath

Type: Boolean

Default: false

When enabled, math is required to be in parenthesis.

strictUnits

Type: Boolean

Default: false

When enabled, less will validate the units used (e.g. 4px/2px = 2, not 2px and 4em/2px throws an error).

syncImport

Type: Boolean

Default: false

Read @import'ed files synchronously from disk.

dumpLineNumbers

Type: String

Default: false

Configures -sass-debug-info support.

Accepts following values: comments, mediaquery, all.

relativeUrls

Type: Boolean

Default: false

Rewrite urls to be relative. false: do not modify urls.

customFunctions

Type: Object

Default: none

Define custom functions to be available within your LESS stylesheets. The function's name must be lowercase and return a primitive type (not an object or array). In the function definition, the first argument is the less object, and subsequent arguments are from the less function call. Values passed to the function are not simple primitive types, rather types defined within less. See the LESS documentation for more information on the available types.

report

Choices: false|'min'|'gzip'

Default: false

Either do not report anything, report only minification result, or report minification and gzip results. This is useful to see exactly how well Less is performing, but using 'gzip' can add 5-10x runtime task execution.

Example ouput using 'gzip':

Original: 198444 bytes.
Minified: 101615 bytes.
Gzipped:  20084 bytes.

sourceMap

Type: Boolean

Default: false

Enable source maps.

sourceMapFilename

Type: String

Default: none

Write the source map to a separate file with the given filename.

sourceMapURL

Type: String

Default: none

Override the default url that points to the sourcemap from the compiled css file.

sourceMapBasepath

Type: String

Default: none

Sets the base path for the less file paths in the source map.

sourceMapRootpath

Type: String

Default: none

Adds this path onto the less file paths in the source map.

outputSourceFiles

Type: Boolean

Default: false

Puts the less files into the map instead of referencing them.

version

Type: String

Default: less (current release)

Specify the directory containing the version of Less.js to use for compiling. You may specify a version at the task level or a different version for each target.

less: {
  options: {
    version: 'vendor/less'
  },
  styles: {
    files: {
      'css/style.css': ['src/style.less']
    }
  }
}

Useful for testing new features included in a beta or alpha release, or for comparing the compiled results from different versions of Less.js.

Usage Examples

Basic config for compiling LESS to CSS.

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  },
  production: {
    options: {
      paths: ["assets/css"],
      compress: true
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

lessrc

A .lessrc file must contain valid JSON and look something like this:

{
  "compress": true,
  "metadata": "src/*.{json,yml}",
  "paths": ["vendor/bootstrap/less"]
}

A .lessrc.yml must contain valid YAML and look something like this:

compress: true
paths:
- vendor/bootstrap/less

Import directives

Prepend @import statements to src files using any of the new @import directives released after Less.js v1.5.0.

Options are:

  • reference: use a less file but do not output it
  • inline: include the source file in the output but do not process as less
  • less: treat the file as a less file, no matter what the file extension
  • css: treat the file as a css file, no matter what the file extension
less: {
  options: {
    paths: 'vendor/bootstrap/less',
    imports: {
      reference: ['variables.less', 'mixins.less'],
      inline: ['normalize.css'],
      less: ['normalize.css'],
      css: ['foo.css', 'bar.css']
    }
  },
  files: {}
}

Compile individual bootstrap components

Use import directives to compile each Bootstrap's LESS components separately.

Using the imports: {} option and the "files array format" enables us to compile each Bootstrap LESS component without having to add @import "variables.less"; and @import "mixins.less"; to every file.

less: {
  options: {
    paths: 'vendor/bootstrap/less',
    imports: {
      reference: ['variables.less', 'mixins.less'],
    }
  },
  components: {
    files: [
      { expand: true, cwd: 'vendor/bootstrap/less', src: '*.less', dest: 'assets/css/', ext: '.css' }
    ]
  }
}

Pass metadata to Lo-Dash templates

Use the metadata option to pass context to Lo-Dash templates before compiling. For example, let's say you have a config like this:

less: {
  options: {
    metadata: 'src/*.{json,yml}'
  },
  styles: {
    files: {
      'css/style.css': ['src/style.less']
    }
  }
}

and a data file, palette.yml, with some variables defined:

## palette.yml
info:    '#000'
warning: '#111'
danger:  '#222'
success: '#333'

Then in our LESS file:

// Use as values to variables
@palette-info:    <%= palette.info %>;
@palette-warning: <%= palette.warning %>;

.swatch-info {
  background: @palette-info;
}
.swatch-warning {
  background: @palette-warning;
}

// or directly as variables
.swatch-danger {
  background: <%= palette.danger %>;
}
.swatch-success {
  background: <%= palette.success %>;
}

Release History

  • 2014-01-01โ€ƒโ€ƒโ€ƒv0.7.0โ€ƒโ€ƒโ€ƒUpdate to use the Less.js v1.6.0 API for banner, globalVars and modifyVars.
  • 2013-12-18โ€ƒโ€ƒโ€ƒv0.6.0โ€ƒโ€ƒโ€ƒAdds globalVars and modifyVars options. See readme and Gruntfile for examples. Support sourceMapURL Support outputSourceFiles Support sourceMapFilename, sourceMapBasepath and sourceMapRootpath Upgrade to LESS 1.5 Support strictUnits option Support sourceMap option Add customFunctions option for defining custom functions within LESS Output the source file name on error yuicompress option now cleancss (Less changed underlying dependency)
  • 2013-07-30โ€ƒโ€ƒโ€ƒv0.5.0โ€ƒโ€ƒโ€ƒCompletely refactored the plugin based on grunt-contrib-less. Add examples for all features to Gruntfile. Removed the concat feature. You can now use .lessrc or .lessrc.yml for externalizing task options. New stripBanners option
  • 2013-06-13โ€ƒโ€ƒโ€ƒv0.4.7โ€ƒโ€ƒโ€ƒCleaned up a lot of the Gruntfile. Examples are more clear. New import option for prepending import statements to LESS files before compiling. New banner option for adding banners to generated CSS files.
  • 2013-03-17โ€ƒโ€ƒโ€ƒv0.3.0โ€ƒโ€ƒโ€ƒNew option to specify the version of less.js to use for compiling to CSS.
  • 2013-03-14โ€ƒโ€ƒโ€ƒv0.2.3โ€ƒโ€ƒโ€ƒNew options from Less.js 1.4.0
  • 2013-02-27โ€ƒโ€ƒโ€ƒv0.1.0โ€ƒโ€ƒโ€ƒFirst commit.

Authors

This project is a fork of the popular grunt-contrib-less by Tyler Kellen. Please use that plugin if you require something stable and dependable.

This fork is maintained by:

Jon Schlinkert

Brian Woodward

License

Copyright (c) 2014 Jon Schlinkert, contributors. Released under the MIT license


This file was generated by grunt-readme on Wednesday, January 1, 2014.

assemble-less's People

Contributors

doowb avatar dotcore avatar johnyb avatar jonschlinkert avatar pwaleczek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

assemble-less's Issues

Source map mediaquery is not correct

Hi!

Have you checked sass/less supporting mediaquery in compiled css files?

When I set dumpLineNumbers option to 'mediaquery' (without compressing of course), the mediaquery info doesn't show the correct line number of the less definition in the compiled css file but shows the line number that points to the compiled css which is useless while developing with less.

If I compile with lessc command from terminal, everything works fine!

Could you solve this problem because source map would be very useful.

Here's a repo you can check this issue:
https://github.com/ruffle1986/less-workflow

just run 'npm install' and 'less:dev' task with grunt.

@media query and mixin issue

I am using assemble-less for a project I am building, and I have some variable like this:
@grid-size: 180px;
@wide: 12;
@min-wide: @wide * @grid-size;

When I do: body { width: @min-wide; }

It output nicely like: body { width: 1620px; }

But when I do:
@media and all (min-width: @min-wide) { }

It output:
@media all and (max-width: 12 * 180px) { }

I am not sure if it is a less bug or it has been fix on 1.7, or I am just not doing it correctly. But any suggestion would be much appreciate.

Thank you

banner should be appended after the css is compressed

currently if you have a newline at the end of the banner option:

less: {
  options: {
    compress: true,
    banner: '/*! Banner */\n'
  }
}

the trailing newline will also be removed. the banner should not be appended before the css is compressed. it should let users to choose whether the banner is in a new line or not.

is it possible to not parse / exclude a custom syntax?

the case I have is the framework skrollr. to work with stylesheets i need to add

@-skrollr-keyframes animation-name {
  anchor-target {.welcome}
  top {
    opacity:0
  }
}

the less parser of course breaks at anchor-target {.welcome}

is there a way to get it work with a syntax like that. maybe to whitelist some syntax? for example whitelist @-my-custom-name { and everything here }

Whitespace around comments handled different from lessc

assemble-less is handling whitespace/newlines around comments differently than lessc (lessc leaves the newlines, assemble-less is removing them).

Obviously this isn't a major problem but it does cause a nuisance with any commited css files.

eg,

/* blah
****/
/* blah
****/

vs

/* blah
****/

/* blah
****/

Undefined variable event after importing variables file

I wanna use semantic-ui for my project. I've copy the less files in the semanticfolder and I have my less where I customize the theme. My src/assets folder looks like this :

- images
- less
  - main.less
- semantic
  - definitions
  - themes
  - semantic.less
  - theme.config
  - theme.less

My gruntFile.js for the less module looks like this :

less: {
  development: {
    files: {
      '<%= config.assets %>/css/main.css' : '<%= config.assets %>/less/main.less',
    }
  }
}

Am I missing something here ?

How to use globalVars?

As documentation states the globalVars option prepend variables to the files. But i geting a parse error. The only file i use in assemble-less configuration is main.less that imports a variables.less where i use a template-directory-uri variable that i want to define in assemble-less config. This config is current like this:

less: {
            development: {
                files: {
                    'build/assets/main.css': 'less/main.less'
                },

                options: {
                    globalVars: {
                        'template-directory-uri': 'DEVELOPMENT URI'
                    }
                }
            },

            production: {
                files: {
                    'dist/assets/main.css': less/main.less'
                },

                options: {
                    globalVars: {
                        'template-directory-uri': 'PRODUCTION URI'
                    }
                }
            }
        },

and in the variable.less that is included i have:

@icon-font-path: "@{template-directory-uri}/assets/";

By the way, it would be nice if the process option was applied to every imported less files instead of just the files listed in files item. What do u think about it?

support @import options

Add support for @import options: less|css|multiple|once|inline|mute. I'm not sure if this should be done in the require option or elsewhere.

Maybe we change the require option to imports (not import)? And then augment that option with the import options somehow?

options: {
  imports: [
    'globals/variables.less',
    'globals/mixins.less',
    '(mute) bootstrap.less'
  ]
}

Actually I think we should extend the imports object and have the imports[option] map directly to the options in the Less parser:

options: {
  imports: {
    less: [
      'globals/variables.less',
      'globals/mixins.less'
    ],
    mute: {
      'bootstrap.less'
    }
  }
}

Default "version" option gives an error.

When including assemble-less in my Gruntfile, I needed to manualy set version to

node_modules/assemble-less/test/versions/1.3.3

otherwise it gave me an error that it couldn't find less. I think the default assumes you are running the plugin from the main directory.

Documentation names task as assemble-less while the plugin uses "less"

Some inconsistencies here:

Section header says

The "less" task

The section itself says

In your project's Gruntfile, add a section named assemble

The example code says "assemble-less" (which isn't even valid json and will give you a parse error).

The real plugin however uses the task "less". Took me some time to figure out as a guy new to this.

Maximum call stack size exceeded...

I was using assemble-less to compile bootstrap when I got this error:

>> SyntaxError: Maximum call stack size exceeded in vendor/bootstrap/less/grid.less on line 11, column 3:
>> 10 .container {
>> 11   .container-fixed();
>> 12

This bug is described here: less/less.js#1928

I fixed this, changing less dependency in package.json from ~1.6.0 to ~1.7.0:

  "dependencies": {
    "grunt-lib-contrib": "~0.6.1",
    "lodash": "~2.4.1",
    "less": "~1.7.0",
    "async": "~0.2.9"
  },

Refactor logic into library

Refactor the bulk of the logic into a library that can take a configuration object and build the less files.

Then the logic can be used in other libraries and plugins instead of only having it in assemble-less.

use `chalk` instead of `colors`

We're moving away from using the implicit colors module on the String.prototype (eg 'string'.green) at it clutters the prototype for everyone and is generally magic and bad.

Use chalk explicitly instead (example).

rename concat option to separate, default to false

Instead of concat: true it should be separate: false. Primarily because concatenate is already default behavior outside of this task, so renaming makes it clear that this is something distinct from other plugins, and it clarifies that this is an action the user can take to compile individual files, rather than the other way around. make sense?

Differences to grunt-contrib-less

Since Grunt has already plenty of LESS support, I think it would be a good idea to elaborate what assemble-less does better than it in the README.md.

Error : Warning: Task "less" not found. Use --force to continue.

Hi,
I try to use this plugin for a project, I run the task with grunt less but i have the error "Warning: Task "less" not found. Use --force to continue.". grunt-contrib-less work perfectly but i need @import options. Can you help me ?

My grunt task is :

less: {
    options: {
        paths: 'assets/css',
        imports: {
            less: ['normalize.css']
        }
    },
    files: {
        src:'<%= meta.files.less %>/base.less',
        dest: '<%= meta.files.destAssets %>/css/base.css'
    }
}

Thanks for all and sorry for my bad english.

Imports reference broken

Hi,

I updated from (i think) .5 to .7 and imports > reference stopped working

        less: {
            prod: {
                options: {
                    paths: styleLocation,
                    imports: {
                        reference: ["mixins.less", "variables.less", "images.less"]
                    },
                    syncImport: true
                },
                files: [{
                    expand: true,
                    cwd: styleLocation,
                    src: ["**/*.less", "!container.less", "!variables.less", "!mixins.less", "!**/external/*.less"],
                    dest: styleLocation + "/temp",
                    ext: ".css"
                }]
            }
        },

I have changed imports > less to imports > reference. But it wont compile because it can't find mixins in mixins.less.

Any ideas? Any way I can get more information on what is happening?

Pass metadata to Lo-Dash templates

Hi, i am trying to use metadata, but this is not working.

i have this file - utils/data/yml/palette.yml with this content

palette.yml

topBarBg: "purple"

on my settings file i have - @topBarBg : <%= palette.topBarBg %>;

When i run override task the @topBarBg remains with the value <%= palette.topBarBg %>; and not purple. What am i doing wrong? can you help please?

    less: {
        override: {
            options: {
                metadata: 'utils/data/yml/*.{json,yml}'
            },
            styles: {
                files: {
                    "app/css/app.css": ["app/less/app.less"]
                }
            }
        }
    },

"process" option doesn't do anything

Currently the process option does not do anything.
The only lines I found which had something to do with processing are set after a return statement thus they never get executed.

How to inject dynamic variables? Banner has had a breaking change.

In 0.4.8 I used to be able to use (maybe abuse) the banner option to dynamically inject a variable for use with the Less parser like so:

banner: "@static-prefix: '<%=staticUriPrefixCss%>';"

After I upgraded to 0.5.2 today this is not possible anymore. The string is now simply prepended to the output, instead of being 'consumed' by Less.

Hmm. Is there a recommended way of injecting dynamic variables? Using banner for this did feel a bit hackish, admittedly. In an earlier commit I saw something about a variablesoption...

This feature is important to me. In the framework that I'm building this allows users to define an URI prefix to static assets once, yet have it reflected in the router and generated assets and so on. Perfect for possible later integration of a frontend in other, less flexible backends.

Imports directives should support globbing

The function processDirective uses the incoming directives literally. Globbing is not implemented and if used the import will fail.

Globbing would however be very useful for the @import (reference) use case. That's how I tried to use it anyway: Throw all files containing variables, mixins, helpers (own or vendor) in a lib folder and let Less sort out what's actually needed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.