Coder Social home page Coder Social logo

wikimedia / grunt-stylelint Goto Github PK

View Code? Open in Web Editor NEW
28.0 16.0 13.0 967 KB

Stylelint adapter for the Grunt task runner. Moved to Wikimedia GitLab.

Home Page: https://gitlab.wikimedia.org/repos/ci-tools/grunt-stylelint

License: MIT License

JavaScript 98.12% CSS 1.88%
stylelint grunt-plugins coding-standards

grunt-stylelint's Introduction

NPM version NPM Downloads

grunt-stylelint

Grunt plugin for running stylelint

Getting started

If this is the first time you're using Grunt, the getting started guide will show you how to get up and running.

Once you have that installed, with a Gruntfile set for your code, you can install the plugin with:

npm install grunt-stylelint stylelint --save-dev

Note that this installs both grunt-stylelint and the stylelint tool itself, which is a peer dependency. If you do not explicitly depend on stylelint in your package.json file and do not have it available, grunt-stylelint will not work. Modern versions of npm will warn you of such unmet peer dependencies.

In your Gruntfile, add the line:

grunt.loadNpmTasks( 'grunt-stylelint' );

Running and configuring stylelint task

Run this task with the grunt stylelint command.

You can specify the targets and options for the task using the normal Grunt configuration – see Grunt's guide on how to configure tasks in general.

For more explanations of the lint errors stylelint will throw at you please visit http://stylelint.io/.

Usage examples

Example simple config

In this example, running grunt stylelint:all (or grunt stylelint because stylelint is a multi task) will lint the project's CSS and Sass files in the css and sass directories and their subdirectories, using the default stylelint options or the options specified in the .stylelintrc in the root of the project. For an example config see http://stylelint.io/user-guide/example-config/.

// Project configuration.
grunt.initConfig({
  stylelint: {
    all: ['css/**/*.css', 'sass/**/*.scss']
  }
});

Example full config

A full set of config with default options would be:

// Project configuration.
grunt.initConfig( {
  stylelint: {
    options: {
      configFile: '.stylelintrc',
      formatter: 'string',
      ignoreDisables: false,
      failOnError: true,
      outputFile: '',
      reportNeedlessDisables: false,
      fix: false,
      syntax: ''
    },
    src: [
            'src/**/*.{css,less,scss}',
            ,
            '!src/badstyles/*.css'
        ]
    }
}

Options

The options object is passed through to stylelint. Options you may wish to set are:

formatter

Type: function or string Default value: "string" Values: "string"|"verbose"|"json"

In which output format would you like results. If grunt is run with --verbose and this is not explicitly set, it will act as though you passed in "verbose".

ignoreDisables

Type: boolean Default value: false

Whether to ignore inline comments that disable stylelint.

outputFile

Type: string

Output the report to a file.

reportNeedlessDisables

Type: boolean Default value: false

Whether to ignore inline comments that disable stylelint and report which ones did not block a lint warning.

failOnError

Type: boolean Default value: true

Whether to fail if stylelint detects an error.

fix

Type: boolean Default value: false

Automatically fix, where possible, violations reported by rules. If grunt is run with --fix and this is not explicitly set, it will be set to true.

grunt-stylelint's People

Contributors

axten avatar catrope avatar dependabot[bot] avatar edg2s avatar ialarmedalien avatar jdforrester avatar krinkle avatar mdvanes avatar mvanesev avatar negarn avatar ntwb avatar nwoltman avatar radum avatar toptalo avatar volker-e 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

Watchers

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

grunt-stylelint's Issues

Cannot use "plugins".... "Error: Files glob patterns specified did not match any files"

My stylelint config is working file with just 'src' and 'options' in the json object.

However, if I try to add a 'plugins' or 'extends' entry, it gives this message:

Files: [no src] -> plugins
Options: configFile=".stylelintrc-base.json", ignoreDisables=false, failOnError, reportNeedlessDisables=false, syntax="less"
Warning: Running stylelint failed
Error: Files glob patterns specified did not match any files
at globby.then.filePaths             (/Users/contractor3/workspace/designs/content/node_modules/stylelint/lib/standalone.js:71:33)
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:418:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:533:3 Use --force to continue.

It doesn't matter what values I give to 'plugins'... it will fail regardless.

Here's an example config:

stylelint: {
     plugins: [
    	    'stylelint-csslint-missing'
    ],
    src: ['somepath/css/*.less'],
    options: {
	    configFile: '.stylelintrc-base.json',
	    ignoreDisables: false,
	    failOnError: true,
	    reportNeedlessDisables: false,
	    syntax: 'less'
    }
}

"stylelint-csslint-missing" has been successfully installed into my node_modules.

Any ideas would be appreciated.

Example Configuration

I would love to see a grunt config example in the readme. I'm just a frontend dev an not soo keen in node development, so i'm pretty left alone with your current usage description :(

Throw an error if node.js is too old for the plugin

I don't really know if this is an issue for this grunt plugin, or should be upstream in grunt or node.js or somewhere else, but I've been trying to migrate some CI and usage of the grunt-stylelint plugin stopped working. After a lot of debugging I've found we were running node v8.12.0 which hasn't been supported in stylelint since 12.0.1 apparently: stylelint/stylelint#4787 (comment)

Nothing in the whole stack threw any errors, despite the fact you all seem to have the engines bit set in packages.json, so does nothing actually read it? See the source issue:
OpenLightingProject/ola#1733

Some Google suggests it's user error, is there really no sensible way to catch and warn of this by default, I've wasted a few hours on it:
https://npm.community/t/engines-and-engines-strict-ignored/4792

Empty Output in Mac OS Terminal

Attempting to use grunt-stylelint however the output in mac terminal is blank. I saw the same issue was previously closed unresolved. Resubmitting.
screen shot 2018-03-05 at 1 09 28 am

Add force option

A real enhancement would be an option called forced which give us the possibility to complete the whole task.

Is --fix available as an option in Gruntfile.js?

Is it possible to implement the --fix flag when using grunt-stylelint? I'm not seeing or finding an option to enable it in my Gruntfile.js.

Or is there a different recommended way to auto-fix with stylelint?

Thanks

Error: undefined does not match any files

When working with filter (I use a filter to only verify staged files), stylelint throws an error when there is no file to verify.

        eslint: {
            staged: {
                files: [
                    {
                        expand: true,
                        src:[
                            'scripts/**/*.js'
                        ],
                        filter: function(filepath) {
                            // do some filtering
                            return found;
                        }
                    }
                ]
            }
        },

Warning: Running stylelint failed
Error: undefined does not match any files
at globby.then.filePaths (D:\src\uc_webclient\src\client_revision\ui\node_modules\stylelint\lib\standalone.js:128:33)
at :null:null
at process._tickCallback (internal/process/next_tick.js:169:7)
at Function.Module.runMain (module.js:607:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
Use --force to continue.

Aborted due to warnings.

It should just display a message like "No Files specified" (behavior from guntify-eslint) instead and not abort with an error

Stylelint and other dependencies seems to be requiring an update

Hello!

I just noticed this while updating the dependencies on @globaleaks

This is the current errors that are reported by npm when trying to install grunt-eslint:

npm info using [email protected]
npm info using [email protected]
npm http fetch GET 200 https://registry.npmjs.org/stylelint 1800ms (cache revalidated)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/stylelint
npm ERR!   dev stylelint@"15.2.0" from the root project
npm ERR!   peer stylelint@"^15.0.0" from [email protected]
npm ERR!   node_modules/stylelint-config-recommended
npm ERR!     stylelint-config-recommended@"^10.0.1" from [email protected]
npm ERR!     node_modules/stylelint-config-standard
npm ERR!       dev stylelint-config-standard@"30.0.1" from the root project
npm ERR!   1 more (stylelint-config-standard)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer stylelint@"14.x" from [email protected]
npm ERR! node_modules/grunt-stylelint
npm ERR!   dev grunt-stylelint@"0.18.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/stylelint
npm ERR!   peer stylelint@"14.x" from [email protected]
npm ERR!   node_modules/grunt-stylelint
npm ERR!     dev grunt-stylelint@"0.18.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/evilaliv3/.npm/_logs/2023-03-16T18_28_36_875Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/evilaliv3/.npm/_logs/2023-03-16T18_28_36_875Z-debug-0.log

I already retested at least the update to stylelint 15.2.0 that seems to work like a charm!

Thank you if you could look into this.

Stylelint as peerDependency not installed

Can you explain why you recently chose to move stylelint from dependencies to peerDependencies?

Peer dependencies are no longer automatically installed as of npm@3 (http://blog.npmjs.org/post/110924823920/npm-weekly-5) which means that I now see an UNMET PEER DEPENDENCY warning for stylelint and this plugin doesn't work.

Did you intend for the user to install stylelint manually themselves? If so the Readme file should probably be updated.

latest stylelint-config-wikimedia and grunt-stylelint incompatibility

I updated

  • "stylelint-config-wikimedia": "0.2.2",
  • "stylelint-config-wikimedia": "0.3.0",
  • "grunt-stylelint": "^0.4.0",
  • "grunt-stylelint": "^0.6.0",

Running "stylelint:all" (stylelint) task
Warning: Running stylelint failed
Error: Undefined rule media-query-parentheses-space-inside
at exports.default (/Users/jrobson/git/weekapedia/node_modules/stylelint/dist/utils/configurationError.js:8:13)
at /Users/jrobson/git/weekapedia/node_modules/stylelint/dist/augmentConfig.js:267:43
at Array.forEach (native)
at normalizeAllRuleSettings (/Users/jrobson/git/weekapedia/node_modules/stylelint/dist/augmentConfig.js:263:29)
at /Users/jrobson/git/weekapedia/node_modules/stylelint/dist/augmentConfig.js:91:12 Use --force to continue.

Aborted due to warnings.

Add output/export options

Hi there,

would be great if you can define an output file or export the logs to:

  • a normal text file
  • a JSON file

Currently you only can get the output in the console.

bug: no space before closing the brackets

Bugging if less is in line and no space before closing the brackets
less:
.publicacoes-oficiais ul {.borda-preta}

Warning: Running stylelint failed
TypeError: Cannot read property '2' of undefined
  at LessParser.rule (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:64:38)
  at LessParser.createRule (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:110:18)
  at LessParser.ruleWithoutBody (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:141:18)
  at LessParser.processEndOfRule (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:173:22)
  at LessParser.word (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:272:44)
  at LessParser.loop (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parser.js:300:30)
  at lessParse (/home/pericles/www/zbox/node_modules/stylelint/node_modules/postcss-less/dist/less-parse.js:23:12)
  at new LazyResult (/home/pericles/www/zbox/node_modules/postcss/lib/lazy-result.js:70:24)
  at Processor.process (/home/pericles/www/zbox/node_modules/postcss/lib/processor.js:117:12)
  at getCode.then.code (/home/pericles/www/zbox/node_modules/stylelint/lib/getPostcssResult.js:83:29)
 Use --force to continue.

Use of const in strict mode. Use --force to continue

I'm getting this error.

$ grunt stylelint
Running "stylelint:all" (stylelint) task
Warning: /Users/jitendravyas/app-v3/node_modules/grunt-stylelint/node_modules/stylelint/lib/index.js:3
const report = require("./utils/report")
^^^^^
Use of const in strict mode. Use --force to continue.

Aborted due to warnings.

Windows output file characters problem

Hello,

I have a problem with grunt-stylelint and outfile formatting.

Here is what I have to the standard output (Node.js command prompt):

337:2 × Expected indentation of 2 spaces indentation
338:2 × Expected indentation of 2 spaces indentation
339:2 × Expected "overflow" to come before "white-space" order/properties-order
345:14 × Expected "#F0F0F0" to be "#f0f0f0" color-hex-case
348:2 × Expected indentation of 2 spaces indentation
348:15 × Expected numeric font-weight notation font-weight-notation
367:17 × Unexpected unit length-zero-no-unit

✖ 10 problems

And here is what I have in my output text file:

�[2m337:2�[22m �[31m�[31m�[31m�[39m Expected indentation of 2 spaces �[2mindentation�[22m
�[2m338:2�[22m �[31m�[31m�[31m�[39m Expected indentation of 2 spaces �[2mindentation�[22m
�[2m339:2�[22m �[31m�[31m�[31m�[39m Expected "overflow" to come before "white-space" �[2morder/properties-order�[22m
�[2m345:14�[22m �[31m�[31m�[31m�[39m Expected "#F0F0F0" to be "#f0f0f0" �[2mcolor-hex-case�[22m
�[2m348:2�[22m �[31m�[31m�[31m�[39m Expected indentation of 2 spaces �[2mindentation�[22m
�[2m348:15�[22m �[31m�[31m�[31m�[39m Expected numeric font-weight notation �[2mfont-weight-notation�[22m
�[2m367:17�[22m �[31m�[31m�[31m�[39m Unexpected unit �[2mlength-zero-no-unit�[22m
�[2m367:25�[22m �[31m�[31m�[31m�[39m Unexpected unit �[2mlength-zero-no-unit�[22m

Is there a problem with output file and fortmatting under Windows?

My computer is under Windows 10 build 1803.
My options for stylelint are:

stylelint: {
	options: {
		configFile: '.stylelintrc',
		formatter: 'string',
		ignoreDisables: false,
		failOnError: true,
		outputFile: 'stylelint-report.txt',
		reportNeedlessDisables: false,
		syntax: ''
	},
	src: ['css/**/*.css']
}

Thanks in advance for your help and have a nice day.

Use stylelint's built-in formatters

Hello. Thanks for making a start on grunt-stylelint. It's a missing piece of the stylelint eco-system!

It's looking great so far. I have one suggestion though. I think you'll want to use stylelint's built-in formatters. The default "string" formatter is quite powerful and, I believe, the main reason someone would want to use a dedicated stylelint grunt plugin, rather than use the existing grunt-postcss and postcss-reporter combo.

Perhaps have a look at how grunt-eslint passes along its options to eslint itself. You'll find stylelint's Node API options documented here.

Thanks again and please don't hesitate to ask if you've any questions about the stylelint Node API :)

Invisible text in terminal output

Runnig grunt stylelint on my collegue's MacOS Terminal ends with empty output:

image

Output isn't invisible – copying and pasting into text editor doesn't make text visible.

Another Grunt tasks are doing well.

Collegue runs MacOS Sierra. On my El Capitan and another collegue's Windows machines works everything well.

We use grunt-stylelint 0.7.0 and stylelint-config-standard 16.0.0: https://github.com/stylelint/stylelint-config-standard

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "number-leading-zero": "never",
    "selector-pseudo-element-colon-notation": "single",
    "unit-whitelist": ["em", "rem", "%", "px", "vw", "vh"],
    "rule-empty-line-before": null,
    "block-closing-brace-empty-line-before": null,
    "max-empty-lines": 2,
    "declaration-empty-line-before": "never",
    "at-rule-empty-line-before": ["always", {
      "except": ["after-same-name", "first-nested"]
    }]
  }
}

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.