atomlinter / linter-stylelint Goto Github PK
View Code? Open in Web Editor NEWA plugin for Atom Linter providing an interface to stylelint.
Home Page: https://atom.io/packages/linter-stylelint
A plugin for Atom Linter providing an interface to stylelint.
Home Page: https://atom.io/packages/linter-stylelint
While using this plugin, it seems like whenever a non-CSS legal piece of text is typed into my css files, I get Atom's big orange warning boxes in the upper right hand corner screen. For example, if the file had some git conflict markers, such as:
<<<<<<<<
.foo {}
========
.bar {}
>>>>>>>>
While typing and trying to resolve this conflict, I will get many many many many bright orange alerts saying:
CSS Syntax Error
Unknown word on line 3
Can we turn this off? It's quite annoying.
Hello,
According to the docs, I can set up my linting rules in my package.json, and extend a default config, like so:
"stylelint": {
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4
}
}
Yet when I do this, I get the following error:
Could not find "stylelint-config-standard". Do you need a configBasedir
?
I tried using the same config, set via a .stylelintrc file, but got the same error. Am I doing something wrong? Iโm using v1.10.2 of this package, with Atom v1.4.0.
Thanks,
Paul
Will linter-stylelint automatically update to the latest version of stylelint
? Because the most recent release contains a fix for a bug that prevents me from using stylelint-selector-bem-pattern
with atomlinter
.
When saving a new empty file(.css
), it results in the following error:
You must pass stylelint a
files
glob or acode
string, not both
Here is an image of the full-stack as those errors don't seem to copyable: https://i.imgur.com/Adp0q2s.png
Once eslint/eslint#5476 is fixed.
See also #112
Not sure whether this is intentional, but it doesn't always underline rules that have an error (this is with stylelint-config-suitcss):
/**
* Text utility
* =============================================================================
*/
@import 'suitcss-utils-text';
/**
* Text sizing
*/
.u-textXxs {
font-size: var(--font-sizeXxs);
}
/**
* Responsive sizing utilies
*/
@import '../base/breakpoints';
/**
* Small screens and up
*/
.u-sm-full {
width: 100% !important;
flex: none !important;
}
.u-sm-shrink {
flex: 0 1 auto !important;
}
.u-sm-1of2 {
width: 50% !important;
flex: none !important;
}
This appears to be an issue with the function-bind
dependency of the tape
dependency of stylelint
, I'm just not sure if this is an Atom issue, a stylelint
issue, or a function-bind
issue ๐
[Enter steps to reproduce below:]
linter-stylelint
Atom Version: 1.6.0-beta3
System: Microsoft Windows 10 Pro Insider Preview
Thrown From: linter-stylelint package, v1.11.0
Failed to load the linter-stylelint package
At Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
at Function (native)
at Function.bind (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\node_modules\tape\node_modules\function-bind\index.js:37:17)
at Object.<anonymous> (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\node_modules\tape\node_modules\has\src\index.js:3:23)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\node_modules\tape\lib\test.js:6:11)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\node_modules\tape\index.js:3:12)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\dist\testUtils\ruleTester.js:130:13)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:\Users\Landon\.atom\packages\linter-stylelint\node_modules\stylelint\dist\index.js:21:19)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:/Users/Landon/.atom/packages/linter-stylelint/lib/index.js:3:17)
at Module._compile (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\native-compile-cache.js:50:27)
at Package.module.exports.Package.requireMainModule (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package.js:720:27)
at C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package.js:116:28
at Package.module.exports.Package.measure (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package.js:92:15)
at Package.module.exports.Package.load (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package.js:106:12)
at PackageManager.module.exports.PackageManager.loadPackage (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package-manager.js:445:14)
at PackageManager.module.exports.PackageManager.activatePackage (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\package-manager.js:524:30)
at C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\node_modules\settings-view\lib\package-manager.js:444:29
at exit (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\node_modules\settings-view\lib\package-manager.js:73:16)
at triggerExitCallback (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\buffered-process.js:213:47)
at C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\buffered-process.js:227:18
at Socket.<anonymous> (C:\Users\Landon\AppData\Local\atom\app-1.6.0-beta3\resources\app.asar\src\buffered-process.js:98:18)
at emitOne (events.js:82:20)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)
{
"core": {
"disabledPackages": [
"language-gfm"
],
"themes": [
"seti-ui",
"seti-syntax"
]
}
}
# User
atom-autocomplete-php, v0.18.7
autocomplete-python, v1.6.1
editorconfig, v1.2.4
file-watcher, v0.4.0
highlight-selected, v0.11.2
language-chef, v0.8.0
language-ini, v1.14.0
language-markdown, v0.10.1
language-powershell, v2.1.0
language-r, v0.4.0
language-reg, v0.0.0
linter, v1.11.3
linter-coffeelint, v1.1.2
linter-csslint, v1.3.0
linter-eslint, v6.0.0
linter-flake8, v1.10.1
linter-js-yaml, v1.2.5
linter-jscs, v3.4.6
linter-jshint, v1.3.1
linter-markdown, v1.4.2
linter-perl, v0.7.2
linter-php, v1.1.8
linter-phpcs, v1.3.0
linter-phpmd, v1.4.1
linter-pylint, v1.2.0
linter-reek, v2.1.3
linter-rubocop, v0.4.7
linter-ruby, v1.2.1
linter-stylelint, v1.11.0
minimap, v4.19.0
minimap-find-and-replace, v4.4.0
minimap-git-diff, v4.1.8
minimap-highlight-selected, v4.3.1
minimap-linter, v1.1.1
minimap-selection, v4.3.1
pigments, v0.23.1
seti-syntax, v0.4.1
seti-ui, v0.8.1
svn, v0.0.9
tab-control, v0.6.9
trailing-spaces, v0.3.2
# Dev
No dev packages
:global(.foo) {
}
If I erase the opening parenthesis, like this:
:global.foo) {
}
It freezes Atom and I have to force quit.
I'm on OS X and using latest linter-stylelint.
Seems to read the config one time when Atom is first loaded. As a result, any time I need to change something in my config I need to restart Atom completely. Kind of annoying when I'm making a config from scratch and need to restart Atom every minute for tons of rules.
Firstly, thanks for the plugin. Excellent ๐
I'm presuming that this package uses it's own version of stylelint? I wonder if there would be an option to use a project's version?
We tend to use a 'locked down' version of stylelint. For example, we are currently running '2.3.6' and our config .stylelintrc runs against this version. If I try and use our .stylelintrc with this linter in Atom nothing happens in the editor (as it doesn't match the v3 type):
{
"rules": {
"block-no-empty": 2,
"color-no-invalid-hex": 2,
"declaration-colon-space-after": [2, "always"],
"declaration-colon-space-before": [2, "never"],
"function-comma-space-after": [2, "always"],
"function-url-quotes": [2, "double"],
"media-feature-colon-space-after": [2, "always"],
"media-feature-colon-space-before": [2, "never"],
"media-feature-name-no-vendor-prefix": 2,
"number-leading-zero": [2, "never"],
"number-no-trailing-zeros": 2,
"property-no-vendor-prefix": 2,
"rule-no-duplicate-properties": 2,
"rule-no-single-line": 2,
"rule-trailing-semicolon": [2, "always"],
"selector-list-comma-newline-after": [2, "always-multi-line"],
"selector-no-id": 2,
"string-quotes": [2, "double"],
"value-no-vendor-prefix": 2
}
}
Is there any chance of having an option in this plugin to run against the projects version of stylelint (e.g. if a version of stylelint is found in the projects node_modules/stylelint
folder then use that) rather than the plugins own?
Given the config:
{
"extends": "/Volumes/Macintosh/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/stylelint-config-standard",
"ignoreFiles": [
"source/_assets/stylesheets/vendor/*.scss"
],
"rules": {
"at-rule-empty-line-before": [ "always", {
"except": ["blockless-group", "first-nested"]
} ],
"declaration-colon-newline-after": "always-multi-line",
"function-url-quotes": "none",
"indentation": 4
}
}
and folders/files such:
source
โโ _assets
โโ stylesheets
โโ vendor
โโ _rouge.scss
When editing _rouge.scss, linting errors are still reported. Running stylelint directly from the CLI however, the ignoreFiles
value is respected.
From: stylelint/stylelint#708
'indentation': [2, {
hierarchicalSelectors: true
}]
According to the maintainers I'm using this correctly, it's just not working in linter.
I was trying out your plugin, but it threw an error after I installed it: cannot find module
atom-linter`. Here's my atom error report:
Atom Version: 1.0.2
System: Mac OS X 10.10.4
Thrown From: linter-stylelint package, v0.2.3
Failed to load the linter-stylelint package
At Cannot find module 'atom-linter'
Error: Cannot find module 'atom-linter'
at Module._resolveFilename (module.js:328:15)
at Function.Module._resolveFilename (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/module-cache.js:383:52)
at Function.Module._load (module.js:270:25)
at Module.require (module.js:357:17)
at require (module.js:376:17)
at Object.<anonymous> (/Users/ismay/.atom/packages/linter-stylelint/index.js:17:19)
at Module._compile (module.js:452:26)
at Object.loadFile [as .js] (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/babel.js:166:19)
at Module.load (module.js:347:32)
at Function.Module._load (module.js:302:12)
at Module.require (module.js:357:17)
at require (module.js:376:17)
at Package.module.exports.Package.requireMainModule (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package.js:709:34)
at /opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package.js:188:28
at Package.module.exports.Package.measure (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package.js:165:15)
at Package.module.exports.Package.load (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package.js:179:12)
at PackageManager.module.exports.PackageManager.loadPackage (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package-manager.js:372:14)
at PackageManager.module.exports.PackageManager.activatePackage (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/package-manager.js:451:30)
at /opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/node_modules/settings-view/lib/package-manager.js:368:29
at exit (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/node_modules/settings-view/lib/package-manager.js:59:16)
at triggerExitCallback (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/buffered-process.js:213:47)
at /opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/buffered-process.js:220:18
at Socket.<anonymous> (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/src/buffered-process.js:98:18)
at emitOne (events.js:82:20)
at Socket.emit (events.js:166:7)
at Pipe.close (net.js:464:12)
-0:30.8.0 settings-view:open (atom-text-editor.editor.is-focused)
-0:17.4.0 core:confirm (atom-text-editor.editor.mini.is-focused)
{
"core": {
"audioBeep": false
}
}
# User
editorconfig, v1.0.1
highlight-selected, v0.10.1
linter, v1.2.4
linter-eslint, v3.0.1
linter-stylelint, v0.2.3
minimap, v4.12.0
# Dev
No dev packages
Hey @1000ch! Thanks for making this project.
linter-stylelint tries to load configuration from a .stylelintrc file. Since v3 (see stylelint/stylelint#490) this isn't the only way to load config files! We can now use the package.json stylelint
directive to declare options within our package.jsons, just like eslint or browserify.
atom-linter-eslint currently has code for handling this. Maybe linter-stylelint could borrow it to do the same thing for stylelint?
I'd like to implement Rules settings as indicated on https://github.com/stylelint/stylelint -- something like:
{
"rules": {
"rule-no-single-line": 0, // turn rule off
"declaration-no-important": 2, // turn rule on
}
}
I get an error when I put that in .stylelintrc -- SyntaxError: Unexpected token
Am I doing it wrong?
This issue is fixed in 4.2.0, but still exists when using this plugin in Atom.
I always appreciate a good changelog. When I see that the version bumped to 2.0 I would like to be able to come and quickly see what that means so I know whether I should upgrade or not.
I'm not sure if this is a stylelint problem or a linter-stylelint problem, but is it possible to add an option for something like Sass?
The problem comes because I'll frequently have a style with just a single mixin in it, and the at-rule-empty-line-before
thing interprets the mixin as an @ rule.
This means I end up with these all over the place:
.foo {
@include button(red);
}
Minimal setup to reproduce:
.stylelintrc.yml
---
rules:
no-duplicate-selectors: [true, {severity: error}]
blah.css
.blah {
color: red;
}
CLI output says that there is no error. I use stylelint 5.1
and linter-stylelint 2.0.1
.
Looks like text from editor is duplicated somehow when it's passed to stylelint. If that's true, it may explain #133.
Setup blah.zip
Use the rc
package which handles finding the config file and is lenient in allowing comments in JSON.
Currently, linter-stylelint
is using JSON.parse
Hello. Iโm getting the following error when I use the ignoreFiles
directive. Here is my config:
{
"extends": "/Volumes/Macintosh/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/stylelint-config-standard",
"ignoreFiles": [
"source/_assets/stylesheets/vendor/*.scss"
],
"rules": {
"at-rule-empty-line-before": [ "always", {
"except": ["blockless-group", "first-nested"]
} ],
"declaration-colon-newline-after": "always-multi-line",
"function-url-quotes": "none",
"indentation": 4
}
}
and here is the error generated:
TypeError: Cannot assign to read only property '0' of [object String]
at assignKey (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/deep-assign/index.js:28:11)
at assign (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/deep-assign/index.js:43:4)
at assignKey (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/deep-assign/index.js:30:13)
at assign (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/deep-assign/index.js:43:4)
at deepAssign (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/node_modules/deep-assign/index.js:64:3)
at then.atom.notifications.addError.detail (/Users/paulrobertlloyd/.atom/packages/linter-stylelint/lib/index.js:131:28)
Not sure if this is an AtomLinter issue or related directly to stylelintโฆ I tried running stylelint directly from the CLI to see if I could reproduce, but got a number of different unrelated issues (partly it seems, because it was trying to lint text within comments).
I guess the first question is: is my config file correct?
Please check *.pcss and *.postcss too.
Because stylelint uses two severity levels, 1 and 2, couldn't this plugin show a yellow warning for level 1 messages and a red error for level 2? Right now I'm only seeing yellow warnings.
Until eslint/eslint#5476 is fixed, use ESLint v2.2.0.
The semver used in package.json is ^2.2.0 which causes ESLint v2.3.0 to be installed on clean installs.
You can transfer it to the AtomLinter org if you'd like. You'll still be the maintainer.
The sooner you do it, the less the statistics of downloads you will lose)
flow:
apm unpublish
command to unpublish packageThis allows us to more easily keep track of linters that need to be fixed after major updates to the core linter. Additionally, by pulling you into the organization it allows us to keep linter creators up to date with changes and plans people have to advance the project. Lastly it has been a good tool when people have issues with the linters where users can rely on a larger stable of developers to help them with their issues on any given linter.
I just downloaded this linter plugin, and it is giving me warnings related to the at-rule-empty-line-before
rule. This rule is no where in my .stylelintrc
. Why am I getting these warnings?
When using a custom .stylelintrc
(uncheck Use Preset
) that has some JSON syntax errors, the following error is thrown which is not immediately clear what the error actually is. Adding a nicer message explaining what went wrong could help ease confusion.
SyntaxError: Unexpected string
at Object.parse (native)
at Object.lint (/Users/Eastwood/.atom/packages/linter-stylelint/index.js:76:25)
at Promise.then._this.emitter.emit.linter (/Users/Eastwood/.atom/packages/linter/lib/linter-registry.coffee:59:22)
at LinterRegistry.triggerLinter (/Users/Eastwood/.atom/packages/linter/lib/linter-registry.coffee:58:16)
at /Users/Eastwood/.atom/packages/linter/lib/linter-registry.coffee:52:17
at Array.map (native)
at /Users/Eastwood/.atom/packages/linter/lib/linter-registry.coffee:50:27
Atom Version: 1.2.4
System: Mac OS X 10.11.1
Thrown From: linter package, v1.11.2
Uncaught TypeError: Invalid Point: (NaN, NaN)
At /Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/point.js:65
TypeError: Invalid Point: (NaN, NaN)
at Function.module.exports.Point.assertValid (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/point.js:65:15)
at TextBuffer.module.exports.TextBuffer.clipPosition (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/text-buffer.js:980:13)
at TextBuffer.module.exports.TextBuffer.clipRange (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/text-buffer.js:968:20)
at TextBuffer.module.exports.TextBuffer.markRange (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/text-buffer.js:693:46)
at DisplayBuffer.module.exports.DisplayBuffer.markBufferRange (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/src/display-buffer.js:1065:41)
at TextEditor.module.exports.TextEditor.markBufferRange (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/src/text-editor.js:1267:59)
at /Users/sambev/.atom/packages/linter/lib/editor-linter.js:50:34
at Emitter.module.exports.Emitter.emit (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:86:11)
at EditorLinter.addMessage (/Users/sambev/.atom/packages/linter/lib/editor-linter.js:137:20)
at /Users/sambev/.atom/packages/linter/lib/linter-views.js:104:22
at Array.forEach (native)
at LinterViews.notifyEditorLinters (/Users/sambev/.atom/packages/linter/lib/linter-views.js:102:11)
at LinterViews.render (/Users/sambev/.atom/packages/linter/lib/linter-views.js:59:10)
at /Users/sambev/.atom/packages/linter/lib/linter.coffee:39:14
at Emitter.module.exports.Emitter.emit (/Users/sambev/Downloads/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:86:11)
at MessageRegistry.updatePublic (/Users/sambev/.atom/packages/linter/lib/message-registry.js:84:18)
at UpdateMessages (/Users/sambev/.atom/packages/linter/lib/message-registry.js:24:16)
{
"core": {
"disabledPackages": [
"linter-flow"
]
},
"linter": {
"lintOnFlyInterval": 500
}
}
# User
docblockr, v0.7.3
language-babel, v2.3.0
linter, v1.11.2
linter-eslint, v5.2.4
linter-jsonlint, v1.0.1
linter-stylelint, v1.3.0
minimap, v4.16.2
pigments, v0.19.0
vim-mode, v0.63.0
# Dev
No dev packages
Is there a way to pass a config to stylelint? Maybe something like a .stylelintrc
would be a good temporary solution, until the stylelint api's been finalized.
related: postcss/postcss#477 & stylelint/stylelint#288
error: You must pass stylelint a files glob or a code string, though not both
Error: You must pass stylelint a `files` glob or a `code` string, though not both
at Function.exports.default (/Users/ismay/.atom/packages/linter-stylelint/node_modules/stylelint/dist/standalone.js:50:11)
at /Users/ismay/.atom/packages/linter-stylelint/index.js:82:8
at Object.lint (/Users/ismay/.atom/packages/linter-stylelint/index.js:80:11)
at promises.push.Promise.then._this.emitter.emit.linter (/Users/ismay/.atom/packages/linter/lib/linter-registry.js:63:26)
at /Users/ismay/.atom/packages/linter/lib/linter-registry.js:62:23
at Set.forEach (native)
at LinterRegistry.lint (/Users/ismay/.atom/packages/linter/lib/linter-registry.js:60:18)
at /Users/ismay/.atom/packages/linter/lib/linter.coffee:14:3
at Emitter.module.exports.Emitter.emit (/opt/homebrew-cask/Caskroom/atom/latest/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:86:11)
at /Users/ismay/.atom/packages/linter/lib/editor-linter.js:80:22
at /Users/ismay/.atom/packages/linter/lib/helpers.coffee:23:18
Happened when I opened an empty .css file, without a stylelint present in the project. Stylelint is @1.2.2 and I've not selected use preset
.
Let me know if you need more information!
Happens the second I remove a quote (happens all the time for other stuff too but this time I caught it).
/**
* Multi-line comment
*/
.selector-1,
.selector-2,
.selector-3[type=text"] {
background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
box-sizing: border-box;
display: block;
color: #333;
}
.selector-a,
.selector-b {
padding: 10px !important;
top: calc(calc(1em * 2) / 3);
}
.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }
/* Single-line comment */
@media (min-width >= 60em) {
.selector {
/* Flush to parent comment */
transform: translate(1, 1) scale(3);
}
}
@media (min-orientation: portrait), projection and (color) {
.selector-i + .selector-ii {
background: color(rgb(0, 0, 0) lightness(50%));
font-family: helvetica, arial, sans-serif;
}
}
/* Flush single line comment */
@media screen and (min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
.selector {
background-image:
repeating-linear-gradient(
-45deg,
transparent,
#fff 25px,
rgba(255, 255, 255, 1) 50px
);
margin: 10px;
margin-bottom: 5px;
box-shadow:
0 1px 1px #000,
0 1px 0 #fff,
2px 2px 1px 1px #ccc inset;
height: 10rem;
}
/* Flush nested single line comment */
.selector::after {
content: "โ";
background-image: url("x.svg");
}
}
// stylelint.config.js
module.exports = {
'plugins': [
'stylelint-statement-max-nesting-depth'
],
'rules': {
// Plugins
'statement-max-nesting-depth': [3, {
countAtRules: false,
countedNestedAtRules: false
}],
// String
'string-quotes': 'single',
// Color
'color-hex-case': 'lower',
'color-hex-length': 'short',
'color-no-invalid-hex': true,
'color-no-named': true,
// Number
'number-leading-zero': 'always',
'number-max-precision': 3,
'number-no-trailing-zeros': true,
'number-zero-length-no-unit': true,
// Function
'function-calc-no-unspaced-operator': true,
'function-comma-space-after': 'always',
'function-comma-space-before': 'never',
'function-linear-gradient-no-nonstandard-direction': true,
// Value list
'value-list-comma-space-after': 'always',
'value-list-comma-space-before': 'never',
// Unit
'unit-blacklist': ['em', 'rem'], // Disallow these because PostCSS adds them
// Declaration
'declaration-bang-space-after': 'never',
'declaration-bang-space-before': 'always',
'declaration-colon-space-after': 'always',
'declaration-colon-space-before': 'never',
'declaration-no-important': true, // Ask DG if this is causing you problems
// Declaration block
'declaration-block-semicolon-newline-after': 'always-multi-line',
'declaration-block-semicolon-space-after': 'always-single-line',
// Block
'block-closing-brace-newline-after': 'always',
'block-closing-brace-newline-before': 'always-multi-line',
'block-closing-brace-space-before': 'always-single-line',
'block-no-empty': true,
'block-opening-brace-newline-after': 'always-multi-line',
'block-opening-brace-space-after': 'always-single-line',
'block-opening-brace-space-before': 'always',
// Selector
'selector-combinator-space-after': 'always',
'selector-combinator-space-before': 'always',
'selector-no-id': true,
'selector-no-type': true, // Ask DG if this is causing you problems
'selector-no-universal': true,
'selector-no-vendor-prefix': true,
'selector-pseudo-element-colon-notation': 'double',
// Selector list
'selector-list-comma-space-after': 'always-single-line',
'selector-list-comma-space-before': 'never',
// Rules
'rule-nested-empty-line-before': ['always', {
except: ['first-nested'],
ignore: ['after-comment']
}],
'rule-no-duplicate-properties': true,
'rule-no-shorthand-property-overrides': true,
'rule-non-nested-empty-line-before': ['always-multi-line', {
ignore: ['after-comment']
}],
'rule-properties-order': [
{
emptyLineBefore: true,
properties: [
'content'
]
},
{
emptyLineBefore: true,
properties: [
'position',
'top',
'right',
'bottom',
'left',
'z-index'
]
},
{
emptyLineBefore: true,
properties: [
'align-content',
'align-items',
'align-self',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'order'
]
},
{
emptyLineBefore: true,
properties: [
'display',
'float',
'height',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'max-height',
'max-width',
'min-height',
'min-width',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'table-layout',
'width'
]
},
{
emptyLineBefore: true,
properties: [
'font-family',
'font-size',
'font-style',
'font-weight',
'letter-spacing',
'line-height',
'text-align',
'text-decoration',
'text-overflow'
]
},
{
emptyLineBefore: true,
properties: [
'appearance',
'background',
'background-attachment',
'background-blend-mode',
'background-color',
'background-image',
'background-position',
'background-repeat',
'background-size',
'border',
'border-top',
'border-right',
'border-bottom',
'border-left',
'border-radius',
'border-top-left-radius',
'border-top-right-radius',
'border-bottom-right-radius',
'border-bottom-left-radius',
'box-shadow',
'color',
'cursor',
'mix-blend-mode',
'opacity',
'overflow',
'overflow-x',
'overflow-y',
'visibility'
]
},
{
emptyLineBefore: true,
properties: [
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
'transform',
'transition'
]
}
],
'rule-trailing-semicolon': 'always',
// Media
'media-feature-colon-space-after': 'always',
'media-feature-colon-space-before': 'never',
'media-feature-name-no-vendor-prefix': true,
'media-feature-range-operator-space-after': 'always',
'media-feature-range-operator-space-before': 'always',
// Custom media
'custom-media-pattern': 'xs|sm|md|lg|xlg|xxlg.+/',
// Media query
'media-query-parentheses-space-inside': 'never',
// At rule
'at-rule-empty-line-before': ['always', {
except: ['blockless-group', 'first-nested'],
ignore: ['after-comment']
}],
'at-rule-no-vendor-prefix': true,
// Comment
'comment-whitespace-inside': 'always',
// General
'indentation': 2,
'no-eol-whitespace': true,
'no-missing-eof-newline': true
}
}
Originally ran into this and opened an issue here: steelbrain/linter#1069
Then I went to stylelint to open an issue: stylelint/stylelint#688 and was pointed here.
@Arcanemagus @davidtheclark can we get to the bottom of this? It happens so frequently it makes linter-stylelint unusable.
Please add support for <style>
tag in html files. We need for Polymer Theme.
I get the following error when opening or saving a file:
TypeError: Cannot read property 'findFile' of undefined
at Object.lint (/Users/Eastwood/.atom/packages/linter-stylelint/index.js:67:8)
at promises.push.Promise.then._this.emitter.emit.linter (/Users/Eastwood/.atom/packages/linter/lib/linter-registry.js:63:26)
at /Users/Eastwood/.atom/packages/linter/lib/linter-registry.js:62:23
at Set.forEach (native)
at LinterRegistry.lint (/Users/Eastwood/.atom/packages/linter/lib/linter-registry.js:60:18)
at /Users/Eastwood/.atom/packages/linter/lib/linter.coffee:98:16
at Emitter.module.exports.Emitter.emit (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:86:11)
at /Users/Eastwood/.atom/packages/linter/lib/editor-linter.js:80:22
at /Users/Eastwood/.atom/packages/linter/lib/helpers.coffee:23:18
Right now when I work on a project that doesn't use stylelint but does use CSS files, I get the warning Unable to run stylelint. No rules found within configuration. Have you provided a "rules" property?
.
I would prefer if linter-stylelint didn't try to run unless it can find a stylelint configuration. What do you think?
Iโve just upgraded to linter-stylelint 2.0.0, and now getting the following errors:
Undefined rule "declaration-block-no-shorthand-property-overrides"
Undefined rule "declaration-block-trailing-semicolon"
Undefined rule "string-no-newline"
Iโm extending stylelint-config-standard
, which is at v4.0.1. Whatโs going onโฆ trying to keep up with the changes across this package and stylelint gets confusing fast!
At the moment only css and scss file types are hardcoded. How difficult is to add add LESS support?
Currently in activate()
some settings are being observed, but those subscriptions are never being disposed of in a deactivate()
.
I would expect [data-foo]:not(:last-child)
to be identified as more specific than [data-foo]
. I get error:
Expected selector "[data-foo]:not(:last-child)" to come before selector "[data-foo]" (no-descending-specificity)
[data-foo] {
display: block;
}
[data-foo]:not(:last-child) {
display: none;
}
{
"rules": {
"no-descending-specificity": [true, {
"severity": "error"
}]
}
}
I use stylelint 5.0.1
with linter-stylelint 2.0.1
. When running from CLI there is no error.
Weird one here. It does work with the stylelint CLI, but seems to fail here.
configA:
{ "extends": [ "./build-lib/configB.json" ] }
build-lib/configB:
{
"extends": [ "stylelint-config-standard" ],
"plugins": [ "stylelint-selector-bem-pattern" ],
"rules": {..}
}
If I run this, I get the error Cannot find module 'stylelint-selector-bem-pattern'
.
If I remove configB's extends
(keeping the plugins
), it works.
If I remove configB's plugins
(keeping the extends
), it works.
If I remove configB's extends
and change configA so that it "extends": [ "stylelint-config-standard", "./build-lib/configB.json" ]
, it works.
Any ideas?
Full error:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
Stack Trace:
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
at Function (native)
at installColorSpace (/Users/strom/.atom/packages/linter-stylelint/node_modules/stylelint/node_modules/colorguard/node_modules/pipetteur/node_modules/onecolor/one-color-all-debug.js:97:32)
at Object.<anonymous> (/Users/strom/.atom/packages/linter-stylelint/node_modules/stylelint/node_modules/colorguard/node_modules/pipetteur/node_modules/onecolor/one-color-all-debug.js:218:1)
at Module._compile (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27)
at Object.<anonymous> (/Users/strom/.atom/packages/linter-stylelint/node_modules/stylelint/node_modules/colorguard/node_modules/pipetteur/pipetteur.js:2:13)
at Module._compile (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27)
at Object.<anonymous> (/Users/strom/.atom/packages/linter-stylelint/node_modules/stylelint/node_modules/colorguard/lib/colorguard.js:5:17)
at Module._compile (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27)
at Object.<anonymous> (/Users/strom/.atom/packages/linter-stylelint/node_modules/stylelint/node_modules/colorguard/index.js:1:97)
at Module._compile (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (/Applications/Atom.app/Contents/Resources/app.asar/src/compile-cache.js:208:21)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (/Applications/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27)
On Atom v1.5.4
Using linter-stylelint v1.13.1
Mac OSX 10.11.3
3rd party shared-configs were removed in #122
The readme.md #config section should be updated,
I get this error on line 1 of every single one of my CSS files after upgrading to 1.10.2. Everything used to work fine before. Here's my rule-properties-order
config in .stylelintrc
:
"rule-properties-order": [
"display",
"float",
"position",
"top",
"right",
"bottom",
"left",
"margin",
"border",
"padding"
],
Not sure why, but linter-stylelint doesn't lint all css files. For example, it lints this file:
/**
* CourseMaterialItem
* =============================================================================
*/
/**
* Main component class
*/
.CourseMaterialItem {
margin-bottom: 0.5rem;
}
.CourseMaterialItem-link {
border-radius: var(--border-radius);
border: 2px solid var(--gray-light);
color: var(--gray-dark);
display: block;
font-weight: 600;
padding: 0.75rem 1rem;
text-transform: capitalize;
transition: var(--transition);
}
.CourseMaterialItem-link:--interaction {
background: var(--gray);
border-color: var(--gray);
color: var(--white);
}
But it doesn't lint this file:
/**
* Grid
* =============================================================================
* A CSS flexbox grid component, based on Philip Waltons Solved by Flexbox grid:
* philipwalton.github.io/solved-by-flexbox/demos/grids/
*
* Meant to be used with the 'size' responsive sizing utilities.
*
* TODO Add offset classes, order reversing, horizontal space division.
*/
@import '../base/breakpoints';
/**
* Settings
*/
:root {
--Grid-gutterSm: 1.0rem;
--Grid-gutterMd: 1.5rem;
--Grid-gutterLg: 2.0rem;
}
/**
* Main component class
*
* 1. Cells distribute horizontal space evenly by default.
*/
.Grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.Grid-cell {
flex: 1; /* 1 */
}
/**
* Modifiers: vertical cell alignment
*/
.Grid--top {
align-items: flex-start;
}
.Grid--bottom {
align-items: flex-end;
}
.Grid--center {
align-items: center;
}
/**
* Modifiers: vertical cell self-alignment
*/
.Grid-cell--top {
align-self: flex-start;
}
.Grid-cell--bottom {
align-self: flex-end;
}
.Grid-cell--center {
align-self: center;
}
/**
* Modifier: center cells horizontally
*/
.Grid--justifyCenter {
justify-content: center;
}
/**
* Modifiers: change cell order
*/
.sm-Grid-cell--first {
order: -1;
}
.sm-Grid-cell--last {
order: 1000;
}
/**
* Responsive cell order modifiers
*/
@media (--md-up) {
.md-Grid-cell--first {
order: -1;
}
.md-Grid-cell--last {
order: 1000;
}
}
/**
* Modifiers: set all cell widths
*
* 1. Distribute width evenly between cells (default)
* 2. All cells 100% width
* 3. Shrinkwrap all cells
*/
.sm-Grid--fit > .Grid-cell { /* 1 */
flex: 1;
}
.sm-Grid--full > .Grid-cell { /* 2 */
flex: 0 0 100%;
}
.sm-Grid--shrink > .Grid-cell { /* 3 */
flex: 0 1 0;
}
.sm-Grid--1of2 > .Grid-cell {
flex: 0 0 50%;
}
.sm-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%;
}
.sm-Grid--1of4 > .Grid-cell {
flex: 0 0 25%;
}
/**
* Responsive cell width modifiers
*/
@media (--md-up) {
.md-Grid--fit > .Grid-cell {
flex: 1;
}
.md-Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.md-Grid--1of2 > .Grid-cell {
flex: 0 0 50%;
}
.md-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%;
}
.md-Grid--1of4 > .Grid-cell {
flex: 0 0 25%;
}
}
@media (--lg-up) {
.lg-Grid--fit > .Grid-cell {
flex: 1;
}
.lg-Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.lg-Grid--1of2 > .Grid-cell {
flex: 0 0 50%;
}
.lg-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%;
}
.lg-Grid--1of4 > .Grid-cell {
flex: 0 0 25%;
}
}
/**
* Modifier: gutters between grid cells
*
* [screen size]-Grid--gutters[gutter size]
*
* Because of our mobile first approach, the classes prefixed with sm-* apply to
* all screen sizes, unless overwritten. Gutters can be either small, medium or
* large. Which is indicated by the {Sm,Md,Lg} suffix.
*/
.sm-Grid--guttersSm {
margin-top: calc(-1 * var(--Grid-gutterSm));
margin-right: 0;
margin-bottom: var(--Grid-gutterSm);
margin-left: calc(-1 * var(--Grid-gutterSm));
}
.sm-Grid--guttersSm > .Grid-cell {
padding-top: var(--Grid-gutterSm);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterSm);
}
.sm-Grid--guttersMd {
margin-top: calc(-1 * var(--Grid-gutterMd));
margin-right: 0;
margin-bottom: var(--Grid-gutterMd);
margin-left: calc(-1 * var(--Grid-gutterMd));
}
.sm-Grid--guttersMd > .Grid-cell {
padding-top: var(--Grid-gutterMd);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterMd);
}
.sm-Grid--guttersLg {
margin-top: calc(-1 * var(--Grid-gutterLg));
margin-right: 0;
margin-bottom: var(--Grid-gutterLg);
margin-left: calc(-1 * var(--Grid-gutterLg));
}
.sm-Grid--guttersLg > .Grid-cell {
padding-top: var(--Grid-gutterLg);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterLg);
}
/**
* Responsive gutter modifiers
*/
@media (--md-up) {
.md-Grid--guttersSm {
margin-top: calc(-1 * var(--Grid-gutterSm));
margin-right: 0;
margin-bottom: var(--Grid-gutterSm);
margin-left: calc(-1 * var(--Grid-gutterSm));
}
.md-Grid--guttersSm > .Grid-cell {
padding-top: var(--Grid-gutterSm);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterSm);
}
.md-Grid--guttersMd {
margin-top: calc(-1 * var(--Grid-gutterMd));
margin-right: 0;
margin-bottom: var(--Grid-gutterMd);
margin-left: calc(-1 * var(--Grid-gutterMd));
}
.md-Grid--guttersMd > .Grid-cell {
padding-top: var(--Grid-gutterMd);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterMd);
}
.md-Grid--guttersLg {
margin-top: calc(-1 * var(--Grid-gutterLg));
margin-right: 0;
margin-bottom: var(--Grid-gutterLg);
margin-left: calc(-1 * var(--Grid-gutterLg));
}
.md-Grid--guttersLg > .Grid-cell {
padding-top: var(--Grid-gutterLg);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterLg);
}
}
@media (--lg-up) {
.lg-Grid--guttersSm {
margin-top: calc(-1 * var(--Grid-gutterSm));
margin-right: 0;
margin-bottom: var(--Grid-gutterSm);
margin-left: calc(-1 * var(--Grid-gutterSm));
}
.lg-Grid--guttersSm > .Grid-cell {
padding-top: var(--Grid-gutterSm);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterSm);
}
.lg-Grid--guttersMd {
margin-top: calc(-1 * var(--Grid-gutterMd));
margin-right: 0;
margin-bottom: var(--Grid-gutterMd);
margin-left: calc(-1 * var(--Grid-gutterMd));
}
.lg-Grid--guttersMd > .Grid-cell {
padding-top: var(--Grid-gutterMd);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterMd);
}
.lg-Grid--guttersLg {
margin-top: calc(-1 * var(--Grid-gutterLg));
margin-right: 0;
margin-bottom: var(--Grid-gutterLg);
margin-left: calc(-1 * var(--Grid-gutterLg));
}
.lg-Grid--guttersLg > .Grid-cell {
padding-top: var(--Grid-gutterLg);
padding-right: 0;
padding-bottom: 0;
padding-left: var(--Grid-gutterLg);
}
}
I've just installed atom with linter and linter-stylelint, so I'm running the latest versions of stuff.
When I open a .css file, the linter highlights the error correctly but as soon as I fix some of them, the errors still persist. I guess the linting is only running once..
If I close the file and open it again, the errors that I fixed previously do not appear as expected.
Thoughts?
I'm getting the following error with linter-stylelint:
Error: Column start (2) greater than line length (1)
at rangeFromLineNumber (C:\Users\ismay.DEFACTO\.atom\packages\linter-stylelint\node_modules\atom-linter\lib\index.js:195:11)
at createRange (C:/Users/ismay.DEFACTO/.atom/packages/linter-stylelint/lib/index.js:35:10)
at C:/Users/ismay.DEFACTO/.atom/packages/linter-stylelint/lib/index.js:74:14
at Array.map (native)
at stylelint.lint.then.error.type (C:/Users/ismay.DEFACTO/.atom/packages/linter-stylelint/lib/index.js:70:38)
With this .stylelintrc
:
{
"extends": [
"stylelint-config-suitcss"
],
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"selector-bem-pattern": {
"preset": "suit"
}
}
}
For the following file (apologies for the large amount of text):
/** @define Button */
/*
Button
The basic button upon which all button styles are built. Buttons should always have the `.Button--default` class.
Intentionally minimalistic and not meant to be used on its own.
Markup:
<a class="Button Button--default {{modifier_class}}">Link</a>
<button class="Button Button--default {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default {{modifier_class}}" value="Input">
Styleguide Components.Button
*/
.Button--default {
border: none;
border-radius: 0.25rem;
text-transform: uppercase;
padding: 0.5rem 1rem;
}
/*
Button--tab
Deprecated: Buttons to use for tabbed navigation. Deprecated because it shares functionality with the
navigation buttons. Should be refactored to a single type.
:hover - Fades to a dark background and white text
:focus - Same as hover, with an outline as well
:active - Same as hover
.isActive - Same as hover
Markup:
<a class="Button Button--default Button--tab {{modifier_class}}">Link</a>
<button class="Button Button--default Button--tab {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--tab {{modifier_class}}" value="Input">
Styleguide Components.Button.Tab
*/
.Button--tab {
background: var(--white);
color: var(--gray);
border-radius: 0;
line-height: 2;
font-weight: 600;
transition: var(--transition);
}
.Button--tab:hover,
.Button--tab:focus,
.Button--tab:active,
.Button--tab.isActive {
background: var(--gray);
color: var(--white);
}
/*
Button--red
Deprecated: A red button. Useful for actions that are dangerous, like deleting something. Should be replaced
by a `Button--danger`.
:hover - Lightens the whole button
:focus - Same as hover, with an outline as well
:active - Same as hover
Markup:
<a class="Button Button--default Button--red {{modifier_class}}">Link</a>
<button class="Button Button--default Button--red {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--red {{modifier_class}}" value="Input">
Styleguide Components.Button.Red
*/
.Button--red {
background: var(--red);
transition: var(--transition);
color: var(--white);
font-weight: 600;
font-size: 0.75rem;
transition: var(--transition);
}
.Button--red:hover,
.Button--red:focus,
.Button--red:active {
background: var(--red-light);
}
/*
Button--green
Deprecated: A green button. Useful for positive actions, like adding or saving something. Should be replaced
by a `Button--success`.
:hover - Lightens the whole button
:focus - Same as hover, with an outline as well
:active - Same as hover
Markup:
<a class="Button Button--default Button--green {{modifier_class}}">Link</a>
<button class="Button Button--default Button--green {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--green {{modifier_class}}" value="Input">
Styleguide Components.Button.Green
*/
.Button--green {
background: var(--green);
transition: var(--transition);
color: var(--white);
font-weight: 600;
font-size: 0.75rem;
transition: var(--transition);
}
.Button--green:hover,
.Button--green:focus,
.Button--green:active {
background: var(--green-light);
}
/*
Button--border
A button with a border and a transparent background.
:hover - Inverts the button colors
:focus - Same as hover, with an outline as well
:active - Same as hover
.isActive - Same as hover
Markup:
<a class="Button Button--default Button--border {{modifier_class}}">Link</a>
<button class="Button Button--default Button--border {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--border {{modifier_class}}" value="Input">
Styleguide Components.Button.Border
*/
.Button--border {
border: 1px solid var(--gray);
color: var(--blue-dark);
font-weight: 600;
font-size: 0.75rem;
transition: var(--transition);
}
.Button--border:hover,
.Button--border:focus,
.Button--border:active,
.Button--border.isActive {
color: var(--white);
background: var(--gray);
}
/*
Button--text
Deprecated: A text button. Originally meant to look like text, but that isn't really what you want because
users won't know that it's a link. To be removed.
Markup:
<a class="Button Button--default Button--text">Link</a>
<button class="Button Button--default Button--text">Button</button>
<input type="submit" class="Button Button--default Button--text" value="Input">
Styleguide Components.Button.Text
*/
.Button--text {
font-family: var(--body-condensed);
text-transform: none;
padding: 0;
}
/*
Button--subtle
Deprecated: A button that looks different from text but blends in with the background to not stand out too much.
:hover - Inverts the button colors
:focus - Same as hover, with an outline as well
:active - Same as hover
.isActive - Same as hover
Markup:
<a class="Button Button--default Button--subtle {{modifier_class}}">Link</a>
<button class="Button Button--default Button--subtle {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--subtle {{modifier_class}}" value="Input">
Styleguide Components.Button.Subtle
*/
.Button--subtle {
color: var(--gray);
font-weight: 600;
font-size: 0.75rem;
transition: var(--transition);
}
.Button--subtle:hover,
.Button--subtle:focus,
.Button--subtle:active,
.Button--subtle.isActive {
color: var(--white);
background: var(--gray);
}
/*
Button--status
Deprecated: A button with a fixed width, meant to lessen the jarring effect of the transition between
two button styles with different widths. Should be solved differently as it is likely to break because
of the fixed width.
Markup:
<a class="Button Button--default Button--status">Link</a>
<button class="Button Button--default Button--status">Button</button>
<input type="submit" class="Button Button--default Button--status" value="Input">
Styleguide Components.Button.Status
*/
.Button--status {
min-width: 11em;
}
/*
Button--nav
Deprecated: A button meant only for navigation links. Meant to be used on a dark background. Deprecated because it
shares functionality with the tab buttons. Should be refactored to a single type.
:hover - Brightens the background a little.
:focus - Same as hover, with an outline as well
:active - Same as hover
.isActive - Same as hover
Markup:
<div style="background: gray;">
<a class="Button Button--default Button--nav {{modifier_class}}">Link</a>
<button class="Button Button--default Button--nav {{modifier_class}}">Button</button>
<input type="submit" class="Button Button--default Button--nav {{modifier_class}}" value="Input">
</div>
Styleguide Components.Button.Navigation
*/
.Button--nav {
border-radius: 0;
line-height: 3;
color: var(--white);
font-weight: 600;
font-size: 0.75rem;
transition: var(--transition);
}
.Button--nav:hover,
.Button--nav:focus,
.Button--nav:active,
.Button--nav.isActive {
color: var(--white);
background: var(--white-transparent);
}
/*
Button--sort
Deprecated: The sorting buttons have arrow designating the current sorting direction. The `sort-asc` and `sort-desc` classes
are used to hide the arrows on inital load. This should be refactored to more global classes as this is too specific.
Markup:
<a class="Button Button--default Button--sort-asc">Link</a>
<a class="Button Button--default Button--sort-desc">Link</a>
Styleguide Components.Button.Sort
*/
.Button--sort-asc,
.Button--sort-desc {
display: none;
}
/*
Button--bar
Deprecated: This is currently only used in one location (ItemFooter). The padding this class applies is to compensate for the absence
of padding on its parent section. This should be done differently as its too dependent on its context. Should be refactored to a full-width
modifier.
Markup:
<a class="Button Button--default Button--bar">Link</a>
<button class="Button Button--default Button--bar">Button</button>
<input type="submit" class="Button Button--default Button--bar" value="Input">
Styleguide Components.Button.Bar
*/
.Button--bar {
padding: 1rem;
}
/*
Button--dropdown
Deprecated: This button was specifically meant to be used for triggering the sorting dropdown. Only used in one location
and it looks like text instead of a button. Should be refactored to a more global style and look more like a button.
Markup:
<a class="Button Button--default Button--dropdown">Link</a>
<button class="Button Button--default Button--dropdown">Button</button>
<input type="submit" class="Button Button--default Button--dropdown" value="Input">
Styleguide Components.Button.Dropdown
*/
.Button--dropdown {
color: var(--gray);
font-weight: 600;
font-size: 0.75rem;
}
Might be related to this issue: AtomLinter/linter-eslint#322?
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.