jgable / grunt-lesslint Goto Github PK
View Code? Open in Web Editor NEWLint LESS files with Grunt
Home Page: http://jgable.github.io/grunt-lesslint
License: MIT License
Lint LESS files with Grunt
Home Page: http://jgable.github.io/grunt-lesslint
License: MIT License
It is possible to add custom rules to csslint. Is it possible to do this with grunt-lesslint?
Here are some examples of rules that I would like to add:
https://github.com/drBenway/CSSLint-custom-rules
The author suggests adding these manually to the csslint-node.js file, but I'd prefer to have the rules be pluggable. Otherwise I'd have to fork csslint and grunt-lesslint to do it.
I'm hoping someone has some ideas about how to do this.
I have a directory of files src
that will later be parsed through a main file main.less
that imports each of these files, plus some files that have variables coreVariables.less
and variables.less
.
However, I don't want to lint this main.less
file, I want to lint the individual files in src/**/*.less
. So instead I would like to add those earlier mentioned variable files via imports into each file in src
before lesslint parses/lints them.
Right now I have:
src: [
'src/**/*.less',
'!src/vendor/**/*',
'!src/common/theme/*',
'!src/common/app.less',
'!src/common/components.less',
],
options: {
csslint: {
csslintrc: '.csslintrc',
},
less: {
paths: [
'src/common/theme/coreVariables.less',
'src/common/theme/variables.less'
]
},
}
However the variables from the less.paths do not get added. It continues to tell me that all my variables are undefined. What am I doing wrong here? Is there a way I can add these variables before lesslint parses the files?
Thanks for any help you can give!
Edit: I ended up just changing over and using lesshint for gulp and it works fine.
In the report, there are 690 issues, in the console output there are 116 errors.
I think the report doesn't ignore the bootstrap.less file which is in another subdirectory.
Grunt config:
lesslint: {
dev: {
src: ['Applikation/Content/main.less'],
options: {
imports: ['Applikation/Content/less/*.less']
}
},
ci: {
src: ['Applikation/Content/main.less'],
options: {
imports: ['Applikation/Content/less/*.less'],
formatters: [{ id:'lint-xml', dest: 'csslint.xml'}]
}
}
},
main.less:
// libraries:
@import "bootstrap/less/bootstrap.less";
// common mixins:
@import "less/mixins.less";
// own components:
@import "less/flot.less";
@import "less/forms.less";
@import "less/grid.less";
// more styles
File structure:
.
├── bootstrap
│ ├── less
│ │ ├── bootstrap.less
│ │ ├── breadcrumbs.less
│ │ └── wells.less
├── less
│ ├── detailpages.less
│ ├── flot.less
│ ├── forms.less
│ ├── grid.less
│ ├── mixins.less
│ ├── navbar.less
│ ├── page_elements.less
│ ├── timeline.less
│ └── tree.less
└── main.less
Hello,
I'm packaging atom [1] for debian [2].
Your software is there included.
I found some issues in your software:
Regards,
Jörg Frings-Fürst
[1] http://atom.io
[2] https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=747824
[3]
// Copyright 20xx-20xx your name
// License: [your license eg. MIT / GPL-2 ....]
Didn't know if simply mentioning you in the closed issue would elicit a response. Thanks.
An option for completely ignoring imports would be good (and if possible, for just specific files). unique-headings
is useful, but it is causing problems with my reset, which I prefer to have as less so that it is minified.
Hi, after grunt-lesslint task run, we got node deprecation warning:
DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
It would be great to fix this to avoid this log on each task call :).
node -v
v7.4.0
You have had a couple PR's sitting for a while with no comments. This is a good project and I'd hate to see it fall off the map. I'd be happy to give it some attention if you give me permission on the repo.
My email is in my profile if you'd like to get a hold of me for further discussion.
Hello,
I just want to know if I can display more errors during grunt lesslint
. The tool only display one error per file put the file contains others errors. So keep me in touch :)
Regards
Hi,
I am having a weird behaviour regarding less import. I have the following less file:
@import "def-variables";
@font-face{
font-family:"myFontFamily";
src:url("@{path-fonts}/4a1e3a00-43f5-4840-a190-f6e87736bac2.eot?#iefix");
src:url("@{path-fonts}/4a1e3a00-43f5-4840-a190-f6e87736bac2.eot?#iefix") format("eot"),
url("@{path-fonts}/ead8339c-141f-4443-b176-fb1858375dee.woff2") format("woff2"),
url("@{path-fonts}/48261775-9f6b-48ec-8afa-cd3685c4caff.woff") format("woff"),
url("@{path-fonts}/9b56cf6b-d90a-4035-8c66-65548bc30a20.ttf") format("truetype"),
url("@{path-fonts}/c1251f8e-a59f-4820-8fdd-f6e2a8184943.svg#c1251f8e-a59f-4820-8fdd-f6e2a8184943") format("svg");
}
With the @import statement of the dev-variables file, I am getting the following parse error:
Error parsing /def-webfonts.less: Unexpected string
Without the Import Statement, I am getting the parsing error:
Error parsing /def-webfonts.less: variable @path-fonts is undefined
which is in my opinion correct.
Am I doing something wrong with my import statement?
The v1.5.0
release of less.js should make the implementation of this plugin a lot easier and less error prone due to support of source maps.
v1.5.0
is not released yet, but we could already try an implementation with the 1.5.0-b4
beta release and source-map.
What do you think?
When cache: true
is set and imports: []
is defined, grunt-lesslint
ignores changes to @imported files. I tested this by inserting a linting error into an imported less file. Unless I change the parent file, this error is not caught during linting.
Currently grunt-lesslint only seems to be handling errors produced by CSSLint, not warnings.
For example, having an ID selector in a linted less file should allow the warning Don't use IDs in selectors.
to be shown.
Olá.
I have an error here, and I think that grunt-lesslint is not using the customFunctions config of grunt-contrib-less. Take a look in the context of my project bellow... here is my source
This is the error:
Running "lesslint:src" (lesslint) task
Error parsing less/main.less: Cannot read property 'numerator' of undefined
Here is my project...
I'm using grunt-contrib-less to build my less files, and this is my config:
less: {
options: {
customFunctions: lessFunctions
},
development: {
files: {
"css/main.css": "less/main.less"
}
}
}
The var lessFunctions
is this object:
{
indexof: function (less, value, array) {
return new less.tree.Dimension(array.value.indexOf(value));
}
}
I'm using this indexof
function in line 38 of this file
@letterIndex: indexof(@letter, @squareLetters);
This is the config of lesslist task:
lesslint: {
src: ['less/main.less']
}
I tried to use this config
lesslint: {
src: ['less/main.less'],
options: {
less: {
functions: lessFunctions
}
}
}
But, just doesn`t work :/
So.. i hope that I was clear. Somebody can help me?
I tried to hack the task`s source, but I'm not good in CoffeScript
Hello guys,
i have a improvement suggestion.
Would it be possible add in the settings, options like this: ".csslintrc" or ".lesslintrc" or both.
options: {
csslintrc: '.csslintrc',
lesslintrc: '.lesslintrc'
}
it would be great to have this option, thanks in advance.
I have a file 1.less, which imports other .less files. I can't lint the other .less files by themselves since they use variables that are defined in 1.less.
However lesslint doesn't show lint errors in the other .less files, but just what it finds in 1.less. The messages seem to be present but they're filtered out by "isFileError" function since they're not part of the file it's currently parsing.
I can help with a PR if this is a wanted feature.
Hi,
as in the title, I have similar problem like this described on stackoverflow:
In my structure I have one index.less, which includes at first some common variables, then some mixins and at the end modules with my buttons, dropdowns etc.
And when I execute lesslint command on all my less files, lesslint doesn't recognize varables and mixins from imported files, and I get error status e.g. ".myMixin is undefined".
In my case, I don't want to add @import section in all my modules, that use varables/mixins. Is there any way to fix this?
Thanks in advance for answer.
The grunt-contrib-csslint
tasks allow the output of findings to a file. This is useful for Continuous Integration systems like Jenkins and Hudson. It would be nice if lesslint supported the same output formatting as csslint.
Alternatively, have you considered just handling control of the less compilation and css linting to the grunt tasks that already provide this? Then this plugin would simply provide the mapping back from css errors to the less source files?
I've got lots of imports in my main.less file, and lesslint imports/lints them all properly, but the problem is - I can't see any mapping for linting errors, so I can't understand which of less files contains the error. Is there any idea how to set it properly?
I set it like that:
lesslint: {
src: ['less/main.less'],
options: {
imports: ['less/*.less']
}
}
I run https://shop.loblaws.ca/media/stylesheets/loblaw/main.css through http://www.stylestats.org/results/cJ62w6hajf and through gruntless and for example I have the rule for no useage of IDs and the lint passes, yet there are 153 IDs in the file.
I don't think this is actually working on all rules.
Just out of convention. That's all. :-)
It seems that files included via the imports config option are checked for variable and mixin definitions, but are not linted themselves. Is this by design?
I tried to ignore lines like described in the csslint docs, but it seems that this comments are getting ignored.
Try it with
.has-side-bar {
padding-left: @main-menu-width-large!important; /* csslint allow: important */
}
which end in that warning:
Use of !important Be careful when using !important declaration (important)
>> app/Resources/less/admin/modules/main-menu.less [Line 232, Column 5]: display: none !important; /* csslint allow: important */
I'd like to lint all the LESS that is used in my project, but not the LESS file(s) that come from things like bower components that are linked into my project, so I'd like to tell it to ignore anything it finds "wrong" in files from the bower_components
dir, even if it has to be linked into my own less files to compile to a valid .css result.
Is this possible?
I just started to use your Grunt plugins and I'm happy to finaly check my less files for lint.
However, your csslint dependency version is way out of date. So, some rules (eg: animation-direction: reverse;) are unknown and raise errors.
I don't know the side effect, so I don't feel confortable doing a PR.
Hope it's possible.
Thanks
I've found myself in need of using the (optional)
import option, introduced in less v2.3.0. I'd like to publish a version that uses the latest version of the less compiler, if I can get it running.
@jgable, are you OK with this?
I expect lesslint to only look at altered files but instead it is looking at all of them. Configuration below:
lesslint: {
all: {
src: [
'<%= yeoman.app %>/{,*/}*.less',
],
options: {
csslint: {
'known-properties': false,
csslintrc: '.csslintrc'
}
}
}
}
watch: {
less: {
files: [
'<%= yeoman.app %>/{,*/}*.less',
],
tasks: ['newer:lesslint:all', 'less'],
options: {
debounceDelay: 500,
reload: true
}
}
}
When I run grunt lesslint, I get output like this:
$ grunt lesslint
...
Failed to find map CSS line 3576 to a LESS line.
Element (span.readonly-row-content) is overqualified, just use .readonly-row-content without element name. Don't use classes or IDs with elements (a.foo or a#foo). (overqualified-elements)
>> 3581: .model-readonly .row span.readonly-row-content {
...
It won't tell me the file that it is finding the error in. Instead it says "Failed to find map CSS". This file is obviously an imported file (because the one LESS file is accounted for). This seems to be a bug in lesslint, but it's possible it is a bug in my Gruntfile.js setup:
...
lesslint: { // version 0.9.0
src: [
'less/main.less',
],
options: {
imports: [
'**/*.less',
'!**/normalize.less',
'!**/lesshat.less'
],
less: {
paths: [ 'less' ]
}
}
}
...
Hi! First of all thank you for the great software! While linting files I'm encountering an error "Line must be greater than or equal to 1, got 0" and can't find any explanation for it on the Internet. Could you hint me what can be wrong? All the files are exist. Thanks.
Currently the task simply hangs if no files (or wrong file paths) are provided.
It looks like CSS Lint is reporting some "rollup" errors which aren't associated with files and cause problems when I try to get a source map location for them.
Examples:
Too many font-size declarations (36), abstraction needed. Checks the number of font-size declarations. (font-sizes)
Too many floats (57), you're probably using them for layout. Consider using a grid system instead.
Here is the structure:
{ type: 'warning',
rollup: true,
message: 'Too many floats (57), you\'re probably using them for layout. Consider using a grid system instead.',
rule:
{ id: 'floats',
name: 'Disallow too many floats',
desc: 'This rule tests if the float property is used too many times',
browsers: 'All',
init: [Function] } }
Could we please have a command line interface in addition to the grunt task? It would be nice to be able to lesslint
.less
files in a non-NPM project.
less file being linted:
`@import "_variables.less";
@import "_bootstrap.less";
@import "_fonts.less";
.hello {
font-size: 10px;
font-size: 11px
background: red;
}`
lines relating to lesslint in the gruntfile:
lesslint: { src: ['less/style.less'] }
output:
`Running "lesslint:src" (lesslint) task
less/style.less (5)
Expected end of value but found 'background'. Properties should be known (listed in CSS3 specification) or be a vendor-prefixed property. (known-properties)
less/style.less [Line 7, Column 3]: font-size: 11px
Too many !important declarations (63), try to use less than 10 to avoid specificity issues. Be careful when using !important declaration (important)
Too many font-size declarations (64), abstraction needed. Checks the number of font-size declarations. (font-sizes)
Too many floats (28), you're probably using them for layout. Consider using a grid system instead. This rule tests if the float property is used too many times (floats)
You have 6 h1s, 5 h2s, 5 h3s, 4 h4s, 3 h5s, 3 h6s defined in this stylesheet. Headings should be defined only once. (unique-headings)5 lint errors in 1 file.
Warning: Task "lesslint:src" failed. Use --force to continue.`
Im guessing the warnings it is showing here are from the imports in style.less despite all issues on this state that imports must be specified in order to be linted.
Any assistance on this?
I noticed you have grunt-lib-contrib as a dependency.
It's deprecated and I would recommend you switch to the extracted modules instead:
stripPath
=> strip-path
minMaxInfo
=> maxmin
getNamespaceDeclaration
=> ticket
Hi All,
below is my grunt configuration for grunt-lesslint
lesslint : {
src: ['src/styles/main.less'],
options: {
failOnWarning: false,
csslint: {
csslintrc: '../.csslintrc',
},
},
}
I am getting error as Error parsing src/styles/main.less: Cannot read property 'lineNumber' of undefined.
I am passing only one file in src because all other files are imported in this less file.
Has anyone ever faced this issue?
Please support grunt js since your readme describe using a coffee file. I doint think many use that file.
Just a reminder since the npm package is out.
Hi,
I'm having a problem with errors not being shown in the console (on Windows), although they appear in the report file. I've checked the source code and I assume the problem is in the file lint-error-output.js, in the function LintErrorOutput.prototype.display, on the line
isThisFile = source === file.
The 'file' is being resolved but the 'source' not and so they appear different (path/folder/subfolder !== path\folder\subfolder) and thus being skipped in the messages filter. When I added the following snippet before the comparison, it seemed, it fixed the issue (not sure though if this is the right way to fix it)
if (source !== null) {
source = path.resolve(source);
}
When I try to use @keyframes
, @-ms-keyframes
, @-moz-keyframes
or@-o-keyframes
in code lesslint gives me uninformative message:
develop:$ grunt
Running "lesslint:src" (lesslint) task
Error parsing main.less: Cannot call method 'charAt' of null
The full options hash is passed right now instead of just the less
section (if present). I believe this change was introduced in commit 30e4162.
We use webpack for bundling less files and webpack supports the "~" prefix for imports as a shortcut for the "node_modules" directory. Unfortunately, lesslint doesn't understand this syntax which results in the following error:
Error parsing html/less/themes/test.less: '~lesshat/build/lesshat.less' wasn't found
Is there some way to configure lesslint so that I can say something like:
{paths: {"~lesshat/build/": "./node_modules/lesshat/build/"}}
It appears that lesslint is linting imports by default now.
My config is like this:
grunt.config('lesslint',{
less: {
src: ['static/example.less']
},
options: {
csslint: {
csslintrc: '.csslintrc'
}
}
});
example.less is like this
@import 'include.less';
and include.less is like this
.error {
When I run grunt lint
I get this error:
Linting 'example.less...OK
Error parsing example.less: missing closing `}`
When I fix the error in include.less, it lints fine.
I tried setting options.includes: false
, and it had no effect.
The readme says that it should not lint imports by default, and I think this was accurate in previous versions. Can you confirm this behavior is unexpected?
Also, the error references the wrong file. It should report the sytax error in include.less, not example.less.
I'm running grunt-lesslint 1.1.2
I am getting the following error:
variable @base_color is undefined
I tried the following:
lesslint: {
app: {
src: 'sites/all/modules/custom/kw_newsletter/css/kw_newsletter_wysiwyg.css.less',
options: {
less: {
modifyVars: {base_color: 'red'},
paths: ['sites/all/modules/custom/kw_base/lint_helper']
}
}
}
}
In the lint_helper folder i have a helper.less file that defines the base_color variable.
Using this grunt task I get console full of warnings ending with RangeError
.
I'm using latest version 1.0.0
from npm and setup looks like this:
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
jshint: {
files: ["*.js", "src/**/*.js", "nls/**/*.js"],
options: {
jshintrc: true
}
},
lesslint: {
src: ["less/**/*.less"]
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-lesslint");
grunt.registerTask("default", ["jshint"]);
grunt.registerTask("lesslint", ["lesslint"]);
};
This is the console output for grunt lesslint
:
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
util.js:35
var str = String(f).replace(formatRegExp, function(x) {
^
RangeError: Maximum call stack size exceeded
You can download my repo for testing here:
https://github.com/zaggino/brackets-git
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.