From 1ceab20ff8551cce99629eed0541b33482700962 Mon Sep 17 00:00:00 2001 From: Brett Jankord Date: Wed, 22 Jun 2016 21:24:12 -0500 Subject: [PATCH] Initial commit --- .gitattributes | 1 + .gitignore | 7 + .travis.yml | 22 +++ CHANGELOG.md | 3 + Gemfile | 3 + Gemfile.lock | 17 ++ LICENSE | 21 +++ README.md | 42 +++++ __tests__/index.js | 108 ++++++++++++ index.js | 89 ++++++++++ package.json | 50 ++++++ src/.scss-lint.yml | 216 +++++++++++++++++++++++ src/.stylelintrc.json | 89 ++++++++++ src/failing-test-cases.scss | 336 ++++++++++++++++++++++++++++++++++++ src/passing-test-cases.scss | 228 ++++++++++++++++++++++++ 15 files changed, 1232 insertions(+) create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .travis.yml create mode 100644 CHANGELOG.md create mode 100644 Gemfile create mode 100644 Gemfile.lock create mode 100644 LICENSE create mode 100644 README.md create mode 100644 __tests__/index.js create mode 100644 index.js create mode 100644 package.json create mode 100644 src/.scss-lint.yml create mode 100644 src/.stylelintrc.json create mode 100644 src/failing-test-cases.scss create mode 100644 src/passing-test-cases.scss diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..fcadb2c --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text eol=lf diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3e104fe --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +*.css.map +.bundle +.sass-cache +node_modules +npm-debug.log +vendor +notes.md diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..d4ba6d1 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,22 @@ +sudo: false + +git: + depth: 1 + +branches: + only: + - master + +language: node_js + +# cache node modules +cache: + directories: + - node_modules + +node_js: + - '6' + +before_install: + # remove outdated deps, assists with cache maintenance + - npm prune diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..3fafbcd --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +# 0.1.0 + +- Initial release diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..a4a5ba5 --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source "https://rubygems.org" + +gem 'scss_lint', require: false diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..9b0d8a2 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,17 @@ +GEM + remote: https://rubygems.org/ + specs: + rake (11.2.2) + sass (3.4.22) + scss_lint (0.48.0) + rake (>= 0.9, < 12) + sass (~> 3.4.15) + +PLATFORMS + ruby + +DEPENDENCIES + scss_lint + +BUNDLED WITH + 1.12.1 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1e4a634 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Brett Jankord + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..d6ae984 --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +# stylelint-config-sass-guidelines + +> Sass Guidelines shareable config for stylelint. + +Configuration rules to ensure your CSS code is compliant with [Sass Guidelines's code style](https://sass-guidelin.es/). + +## Installation + +```console +$ npm install --save stylelint-config-sass-guidelines +``` + +## Usage + +Set your stylelint config to: + +```json +{ + "extends": "stylelint-config-sass-guidelines" +} +``` + +### Extending the config + +Simply add a `"rules"` key to your config and add your overrides there. + +For example, to change the `indentation` to tabs and turn off the `number-leading-zero` rule: + + +```json +{ + "extends": "stylelint-config-sass-guidelines", + "rules": { + "indentation": "tab", + "number-leading-zero": null + } +} +``` + +## [Changelog](CHANGELOG.md) + +## [License](LICENSE) diff --git a/__tests__/index.js b/__tests__/index.js new file mode 100644 index 0000000..a25b068 --- /dev/null +++ b/__tests__/index.js @@ -0,0 +1,108 @@ +import config from "../" +import stylelint from "stylelint" +import test from "ava" + +const validCss = ( +`@import url('x.css'); +@import url('y.css'); + +/** + * Multi-line comment + */ + +.selector-foo, +.selector-bar, +.selector-baz[type='text'] { + background: linear-gradient(#fff, rgba(0, 0, 0, 0.8)); + box-sizing: border-box; + display: block; + color: #333; +} + +.selector-a, +.selector-b:not(:first-child) { + 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 black', sans-serif; + } +} + +/* Flush single line comment */ +@media 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'); + } +} + +`) + +const invalidCss = ( +`a { + top: .2em; +} + +`) + +test("no warnings with valid css", t => { + return stylelint.lint({ + code: validCss, + config: config, + }) + .then(data => { + const { errored, results } = data + const { warnings } = results[0] + t.falsy(errored, "no errored") + t.is(warnings.length, 0, "flags no warnings") + }) +}) + +test("a warning with invalid css", t => { + return stylelint.lint({ + code: invalidCss, + config: config, + }) + .then(data => { + const { errored, results } = data + const { warnings } = results[0] + t.truthy(errored, "errored") + t.is(warnings.length, 1, "flags one warning") + t.is(warnings[0].text, "Expected a leading zero (number-leading-zero)", "correct warning text") + }) +}) diff --git a/index.js b/index.js new file mode 100644 index 0000000..8768324 --- /dev/null +++ b/index.js @@ -0,0 +1,89 @@ +module.exports = { + "plugins": [ + "stylelint-scss" + ], + "rules": { + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-property-value-blacklist": { + "/^border/": [ + "none" + ] + }, + "color-named": "never", + "block-closing-brace-newline-after": [ + "always", + { + "ignoreAtRules": ["if", "else"] + } + ], + "at-rule-blacklist": ["debug"], + "rule-nested-empty-line-before": [ + "always-multi-line", + { + "except": [ + "first-nested" + ], + "ignore": [ + "after-comment" + ] + } + ], + "rule-non-nested-empty-line-before": [ + "always-multi-line", + { + "ignore": [ + "after-comment" + ] + } + ], + "block-no-empty": true, + "color-hex-length": "short", + "color-hex-case": "lower", + "color-no-invalid-hex": true, + "selector-no-id": true, + "scss/at-import-no-partial-leading-underscore": true, + "indentation": 2, + "number-leading-zero": "always", + "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "selector-max-compound-selectors": 3, + "scss/at-extend-no-missing-placeholder": true, + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": true, + "selector-no-qualifying-type": true, + "selector-class-pattern": [ + "^(?:u|is|has)-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:-[a-z][a-zA-Z0-9]*)?(?:--[a-z][a-zA-Z0-9]*)?$", + { + "message": "Selector should be written in lowercase with hyphens (selector-class-pattern)" + } + ], + "shorthand-property-no-redundant-values": true, + "declaration-block-semicolon-newline-after": "always", + "declaration-block-single-line-max-declarations": 1, + "selector-list-comma-newline-after": "always", + "function-comma-space-after": "always-single-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "function-calc-no-unspaced-operator": true, + "block-opening-brace-space-before": "always", + "string-quotes": "single", + "declaration-block-semicolon-space-before": "never", + "number-no-trailing-zeros": true, + "scss/selector-no-redundant-nesting-selector": true, + "function-url-quotes": "always", + "value-no-vendor-prefix": true, + "property-no-vendor-prefix": true, + "length-zero-no-unit": true, + "no-missing-eof-newline": true, + "max-nesting-depth": 3, + + + + "declaration-block-trailing-semicolon": "always", + "no-extra-semicolons": true, + "string-no-newline": true + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..3b7cf67 --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "stylelint-config-sass-guidelines", + "version": "0.1.0", + "description": "Sharable stylelint config based on https://sass-guidelin.es/", + "keywords": [ + "stylelint", + "stylelint-config", + "stylelint-scss", + "scss", + "sass", + "guidelines" + ], + "author": "Brett Jankord", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/bjankord/stylelint-config-sass-guidelines.git" + }, + "homepage": "https://github.com/bjankord/stylelint-config-sass-guidelines#readme", + "bugs": { + "url": "https://github.com/bjankord/stylelint-config-sass-guidelines/issues" + }, + "main": "index.js", + "files": [ + "index.js" + ], + "dependencies": { + "stylelint-scss": "^1.1.1", + "stylelint-selector-no-utility": "^1.1.0" + }, + "devDependencies": { + "ava": "^0.15.2", + "copyfiles": "^1.0.0", + "rename-files": "0.0.2", + "replace": "^0.3.0", + "stylelint": "^6.7.0" + }, + "scripts": { + "ava": "ava --verbose \"__tests__/**/*.js\"", + "build": "npm run copy; npm run replace; npm run rename", + "copy": "copyfiles -u 1 src/.stylelintrc.json .", + "rename": "rename-files ./ '.stylelintrc.json' 'index.js'", + "replace": "replace '^{+\n..\"plugins\":' 'module.exports = {\n \"plugins\":' .stylelintrc.json", + "scss-lint-failing-case": "cd src; bundle exec scss-lint failing-test-cases.scss -c .scss-lint.yml; exit 0", + "scss-lint-passing-case": "cd src; bundle exec scss-lint passing-test-cases.scss -c .scss-lint.yml; exit 0", + "stylelint-failing-case": "cd src; stylelint failing-test-cases.scss -s scss; exit 0", + "stylelint-passing-case": "cd src; stylelint passing-test-cases.scss -c .stylelintrc.json -s scss; exit 0", + "test": "npm run ava" + } +} diff --git a/src/.scss-lint.yml b/src/.scss-lint.yml new file mode 100644 index 0000000..f7aa69d --- /dev/null +++ b/src/.scss-lint.yml @@ -0,0 +1,216 @@ +linters: + + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: true + max_elements: 1 + + BorderZero: + enabled: true + convention: zero + + ChainedClasses: + enabled: false + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: false + + Comment: + enabled: false + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: true + + DisableLinterReason: + enabled: true + + DuplicateProperty: + enabled: false + + ElsePlacement: + enabled: true + style: same_line + + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short + + HexNotation: + enabled: true + style: lowercase + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: false + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: true + character: space + width: 2 + + LeadingZero: + enabled: true + style: include_zero + + MergeableSelector: + enabled: false + force_nesting: false + + NameFormat: + enabled: true + convention: hyphenated_lowercase + allow_leading_underscore: true + + NestingDepth: + enabled: true + max_depth: 1 + + PlaceholderInExtend: + enabled: true + + PrivateNamingConvention: + enabled: true + prefix: _ + + PropertyCount: + enabled: false + + PropertySortOrder: + enabled: false + + PropertySpelling: + enabled: true + extra_properties: [] + + PropertyUnits: + enabled: false + + PseudoElement: + enabled: true + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 3 + + SelectorFormat: + enabled: true + convention: hyphenated_lowercase + class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$' + + Shorthand: + enabled: true + + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: false + + SingleLinePerSelector: + enabled: true + + SpaceAfterComma: + enabled: true + + SpaceAfterPropertyColon: + enabled: true + style: one_space + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableColon: + enabled: true + style: at_least_one_space + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space + + SpaceBeforeBrace: + enabled: true + style: space + allow_single_line_padding: true + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: single_quotes + + TrailingSemicolon: + enabled: true + + TrailingZero: + enabled: true + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: false + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + + VendorPrefixes: + enabled: true + identifier_list: base + include: [] + exclude: [] + + ZeroUnit: + enabled: true diff --git a/src/.stylelintrc.json b/src/.stylelintrc.json new file mode 100644 index 0000000..a919cff --- /dev/null +++ b/src/.stylelintrc.json @@ -0,0 +1,89 @@ +{ + "plugins": [ + "stylelint-scss" + ], + "rules": { + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-property-value-blacklist": { + "/^border/": [ + "none" + ] + }, + "color-named": "never", + "block-closing-brace-newline-after": [ + "always", + { + "ignoreAtRules": ["if", "else"] + } + ], + "at-rule-blacklist": ["debug"], + "rule-nested-empty-line-before": [ + "always-multi-line", + { + "except": [ + "first-nested" + ], + "ignore": [ + "after-comment" + ] + } + ], + "rule-non-nested-empty-line-before": [ + "always-multi-line", + { + "ignore": [ + "after-comment" + ] + } + ], + "block-no-empty": true, + "color-hex-length": "short", + "color-hex-case": "lower", + "color-no-invalid-hex": true, + "selector-no-id": true, + "scss/at-import-no-partial-leading-underscore": true, + "indentation": 2, + "number-leading-zero": "always", + "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "selector-max-compound-selectors": 3, + "scss/at-extend-no-missing-placeholder": true, + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": true, + "selector-no-qualifying-type": true, + "selector-class-pattern": [ + "^(?:u|is|has)-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:-[a-z][a-zA-Z0-9]*)?(?:--[a-z][a-zA-Z0-9]*)?$", + { + "message": "Selector should be written in lowercase with hyphens (selector-class-pattern)" + } + ], + "shorthand-property-no-redundant-values": true, + "declaration-block-semicolon-newline-after": "always", + "declaration-block-single-line-max-declarations": 1, + "selector-list-comma-newline-after": "always", + "function-comma-space-after": "always-single-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "function-calc-no-unspaced-operator": true, + "block-opening-brace-space-before": "always", + "string-quotes": "single", + "declaration-block-semicolon-space-before": "never", + "number-no-trailing-zeros": true, + "scss/selector-no-redundant-nesting-selector": true, + "function-url-quotes": "always", + "value-no-vendor-prefix": true, + "property-no-vendor-prefix": true, + "length-zero-no-unit": true, + "no-missing-eof-newline": true, + "max-nesting-depth": 3, + + + + "declaration-block-trailing-semicolon": "always", + "no-extra-semicolons": true, + "string-no-newline": true + } +} diff --git a/src/failing-test-cases.scss b/src/failing-test-cases.scss new file mode 100644 index 0000000..9591999 --- /dev/null +++ b/src/failing-test-cases.scss @@ -0,0 +1,336 @@ +// Bang Format test +.bangformat { + color: #000!important; // Bang format test + background-color: #000! important; // Bang format test +} + +// Havn't found a way to test this with stylelint +// BEM Depth test +// scss-lint:disable SelectorFormat +// stylelint-disable selector-class-pattern +.block__element__subelement { + color: #f00; +} +// stylelint-enable selector-class-pattern +// scss-lint:enable SelectorFormat + +// Border Zero test +.borderzero { + border: none; +} + +// Color Keyword test +.colorkeyword { + color: green; +} + +// Debug statement test +$color-blue: #1c94c6; + +.debug { + @debug $color-blue; +} + +// scss features not lintable for declaration order in stylelint +// DeclarationOrder test +.declarationorder { + p { + color: #f00; + } + + color: #f00; + @include message-box(); + @extend %error; +} + +// stylelint does not seem to be checking this +// ElsePlacement test +$width: auto; + +.elseplacement { + @if $width == 'auto' { + color: #f00; + } + @else { + display: inline-block; + width: $width; + } +} + +// EmptyLineBetweenBlocks test +p { + margin: 0; + em { + color: #f00; + } +} +a { + color: #f00; +} + +// EmptyRule test +.cat { +} + +// Hexlength test +.hexlength { + color: #ff22ee; +} + +// HexNotation test +.hexnotation { + color: #F00; +} + +// HexValidation test +.hexvalidation { + background: #ab; // Clearly a typo +} + +// ID Selector test +#id-selector { + color: #f00; +} + +// Import Path test +@import 'foo/_bar.scss'; +@import '_bar.scss'; +@import '_bar'; +@import 'bar.scss'; // stylelint-scss does not seem to be checking this + +// Indentation test +.indentation { + color: #f00; +} +// No test for allow_non_nested_indentation + +// Leading Zero test +.leadingzero { + margin: .5em; +} + + +// NameFormat test +// Functions, mixins, variables, and placeholders should be declared with all lowercase letters and hyphens instead of underscores. +@function calculationFunction($some-number, $another-number) { + @return $some-number + $another-number; +} + +@mixin myMixin() { + color: #fff; +} + +// stylelint-scss rule for this seems to be broken +$myVar: 10px; + +%placeHolder { + color: #f00; +} + +// Nesting Depth test +.one { + .two { + .three { + .four { + color: #f00; + } + } + } +} + +// Placeholder In Extend test +.fatal { + @extend .error; +} + +// stylelint does not seem to be checking this +// Private Naming Convention test +// Enforces that functions, mixins, and variables that follow the private naming convention (default to underscore-prefixed, e.g. $_foo) are defined and used within the same file. + +$_foo: #f00; + +figcaption { + color: #00f; +} + +// stylelint does not seem to be checking this +// PropertySpelling test +.propertyspelling { + diplay: none; // "display" is spelled incorrectly +} + +// PseudoElement test +p:before { + content: '>'; +} + +p::hover { + color: #f00; +} + +// QualifyingElement test +// scss-lint:disable IdSelector +div#thing { + color: #f00; +} +// scss-lint:enable IdSelector + +ul.list { + color: #f00; +} + +ul li.item { + color: #f00; +} + +a[href='place'] { + color: #f00; +} + +// SelectorDepth test +.one .two .three > .four { + color: #f00; +} + +.one .two { + .three > .four { + color: #f00; + } +} + +// Selector Format test +.SELECTOR__FORMAT { + color: #f00; +} + +// Shorthand test +.shorthand { + margin: 1px 1px 1px 1px; +} + +// SingleLinePerProperty test +.singlelineproperty1 { + margin: 0; padding: 0; +} + +.singlelineproperty1 { margin: 0; padding: 0; } + +// SingleLinePerSelector test +.error, .explanation { + color: #f00; +} + +// Stylelint doesn't seem to catch comma space in @include line +// SpaceAfterComma test +.spaceaftercomma { + @include box-shadow(0 2px 2px rgba(0,0,0,0.2)); + color: rgba(0,0,0,0.1); +} + +// SpaceAfterPropertyColon test +.spaceafterpropertycolon { + margin:0; // No space + padding: 0; // Too many spaces +} + +// SpaceAfterPropertyName test +.spaceafterpropertyname { + margin : 0; +} + +// stylelint does not seem to be checking this +// SpaceAfterVariableColon test +$spaceaftervariblecolon:#fff; // No space + +// stylelint does not seem to be checking this +// SpaceAfterVariableName test +$spaceaftervariblename : #f00; + +// SpaceAroundOperator test +.spacearoundoperator { + margin: calc(5px+5px); // No Space + padding: calc(5px + 5px); // Too much space +} + +// SpaceBeforeBrace test +.spacebeforebrace1{ + color: #f00; +} + +.spacebeforebrace2 { + color: #f00; +} + +// stylelint does not seem to support this? +// allow_single_line_padding test +.icon-chevronup { &::before { content: '\e030'; } } +.icon-chevrondown { &::before { content: '\e031'; } } +.icon-chevronleft { &::before { content: '\e032'; } } + +// Stylelint doesn't seem to catch parens space in @include line +// SpaceBetweenParens test +.spacebetweenparens { + @include box-shadow( 0 2px 2px rgba( 0, 0, 0, 0.2 ) ); + color: rgba( 0, 0, 0, 0.1 ); +} + +// StringQuotes test +.stringquotes { + content: "hello"; +} + +// TrailingSemicolon test +.trailingsemicolon { + background-color: #fff ; + color: #fff +} + +// TrailingZero test +.trailingzero { + margin: 0.500em; +} + +// stylelint does not seem to support this? +// UnnecessaryMantissa test +.mantissa { + margin: 1.0em; +} + +// UnnecessaryParentReference test +.parentreference { + & > .bar { + color: #f00; + } +} + +// UrlQuotes test +.quotes-url { + background: url(example.png); +} + +// Vendor Prefixes test +// stylelint does not seem to catch this +@-webkit-keyframes anim { + 0% { + opacity: 0; + } +} + +// stylelint does not seem to catch this +::-moz-placeholder { + color: #f00; +} + +.foo { + -webkit-transition: none; +} + +// stylelint does not seem to catch this +.bar { + position: -moz-sticky; +} + +// Zero Unit test +.zerounit { + margin: 0px; +} diff --git a/src/passing-test-cases.scss b/src/passing-test-cases.scss new file mode 100644 index 0000000..177c497 --- /dev/null +++ b/src/passing-test-cases.scss @@ -0,0 +1,228 @@ +// Bang Format test +.bangformat { + color: #000 !important; +} + +// BEM Depth test +// scss-lint:disable SelectorFormat +// stylelint-disable selector-class-pattern +.block__element { + color: #f00; +} +// stylelint-enable selector-class-pattern +// scss-lint:enable SelectorFormat + +// Border Zero test +.borderzero { + border: 0; +} + +// Color Keyword test +.colorkeyword { + color: #0f0; +} + +// Debug statement test + +// DeclarationOrder test +// scss-lint:disable NestingDepth +.declarationorder { + @extend %error; + @include message-box(); + + color: #f00; + + p { + color: #f00; + } +} +// scss-lint:enable NestingDepth + +// ElsePlacement test +$width: auto; + +.elseplacement { + @if $width == 'auto' { + width: $width; + } @else { + display: inline-block; + width: $width; + } +} + +// EmptyLineBetweenBlocks test +// scss-lint:disable NestingDepth +p { + margin: 0; + + em { + color: #f00; + } +} + +a { + color: #f00; +} +// scss-lint:enable NestingDepth + +// Hexlength test +.hexlength { + color: #f2e; +} + +// HexNotation test +.hexnotation { + color: #f00; +} + +// Import Path test +@import 'foo/bar'; +@import 'bar'; + +// Indentation test +.indentation { + color: #f00; +} +// No test for allow_non_nested_indentation + +// Leading Zero test +.leadingzero { + margin: 0.5em; +} + +// NameFormat test +// Functions, mixins, variables, and placeholders should be declared with all lowercase letters and hyphens instead of underscores. + +@function calculation-function($some-number, $another-number) { + @return $some-number + $another-number; +} + +@mixin my-mixin() { + color: #fff; +} + +$my-var: 10px; + +%place-holder { + color: #f00; +} + +// Private Naming Convention test +// Enforces that functions, mixins, and variables that follow the private naming convention (default to underscore-prefixed, e.g. $_foo) are defined and used within the same file. + +$_foo: #f00; + +figure { + color: $_foo; +} + +// PseudoElement test +a::before { + content: '>'; +} + +a:hover { + color: #f00; +} + +// Selector Format test +.selector-format { + color: #f00; +} + +// Shorthand test +.shorthand { + margin: 1px; +} + +// SingleLinePerProperty test +.singlelineproperty1 { + padding: 0; + margin: 0; +} + +// SingleLinePerSelector test +.error, +.explanation { + color: #f00; +} + +// SpaceAfterComma test +.spaceaftercomma { + @include box-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); + color: rgba(0, 0, 0, 0.1); +} + +// SpaceAfterPropertyColon test +.spaceafterpropertycolon { + padding: 0; + margin: 0; +} + +// SpaceAfterPropertyName test +.spaceafterpropertyname { + margin: 0; +} + +// SpaceAfterVariableColon test +$spaceaftervariblecolon: #fff; // No space + +// SpaceAfterVariableName test +$spaceaftervariblename: #f00; + +// SpaceAroundOperator test +.spacearoundoperator { + padding: 5px + 5px; + margin: 5px + 5px; +} + +// SpaceBeforeBrace test +.spacebeforebrace1 { + color: #f00; +} + +// SpaceBetweenParens test +.spacebetweenparens { + @include box-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); + color: rgba(0, 0, 0, 0.1); +} + +// StringQuotes test +.stringquotes { + content: 'hello'; +} + +// TrailingSemicolon test +.trailingsemicolon { + color: #fff; + background-color: #fff; +} + +// TrailingZero test +.trailingzero { + margin: 0.5em; +} + +// UnnecessaryMantissa test +.mantissa { + margin: 1em; +} + +// UnnecessaryParentReference test +// scss-lint:disable NestingDepth +.parentreference { + > .bar { + color: #f00; + } +} +// scss-lint:enable NestingDepth + +// UrlQuotes test +.quotes-url { + background: url('example.png'); +} + +// Zero Unit test +.zerounit { + margin: 0; +}