feat(stylelint-config-elements): add stylelint (#333)

* chore(project): sync offline mirror

* feat(stylelint-config-elements): add stylelint

* chore(project): add copyright banners

.stylelintignore

@@ -0,0 +1,8 @@
+**/build/**
+**/dist/**
+**/examples/**
+
+# Generated SCSS directories and files
+**/packages/colors/**/*.scss
+**/packages/elements/scss/**/*.scss
+**/packages/themes/**/*.scss

package.json

@@ -23,7 +23,7 @@
     "format:diff": "prettier --list-different '**/*.{css,js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:staged": "prettier --write",
     "lint": "toolkit lint .",
-    "lint:styles": "toolkit stylelint \"**/*.{css,scss}\"",
+    "lint:styles": "stylelint \"**/*.{css,scss}\" --config ./packages/stylelint-config-elements",
     "sync": "node tasks/sync.js",
     "test": "jest",
     "test:e2e": "jest --testPathPattern=e2e --testPathIgnorePatterns=examples"
@@ -37,7 +37,6 @@
     "@carbon/cli-plugin-editorconfig": "^0.0.23",
     "@carbon/cli-plugin-eslint": "^0.0.23",
     "@carbon/cli-plugin-github-files": "^0.0.23",
-    "@carbon/cli-plugin-stylelint": "^0.0.23",
     "@carbon/toolkit": "^0.0.23",
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
@@ -60,12 +59,12 @@
     "prettier": "^1.15.2",
     "remark": "^10.0.1",
     "remark-word-wrap": "^2.0.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "stylelint": "^9.10.1"
   },
   "toolkit": {
     "plugins": [
       "@carbon/cli-plugin-eslint",
-      "@carbon/cli-plugin-stylelint",
       "@carbon/cli-plugin-github-files",
       "@carbon/cli-plugin-editorconfig"
     ]
@@ -88,6 +87,7 @@
     ],
     "*.{scss,css}": [
       "yarn format:staged",
+      "yarn lint:styles",
       "git add"
     ],
     "*.md": [

packages/grid/scss/_container.scss

@@ -45,6 +45,7 @@
 // gets the last breakpoint width, and sets it to a max-width
 @mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
+
   max-width: map-get($largest-breakpoint, 'width');
 }
 

packages/grid/scss/grid.scss

@@ -20,11 +20,11 @@
 .#{$prefix}--grid {
   @include carbon--make-container();
   @include carbon--make-container-max-widths();
+}
 
-  &--full-width {
-    @include carbon--largest-breakpoint() {
-      max-width: 100%;
-    }
+.#{$prefix}--grid--full-width {
+  @include carbon--largest-breakpoint() {
+    max-width: 100%;
   }
 }
 

packages/stylelint-config-elements/.npmignore

@@ -0,0 +1,4 @@
+**/__mocks__/**
+**/__tests__/**
+**/examples/**
+**/tasks/**

packages/stylelint-config-elements/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  extends: [
+    require.resolve('./rules/possible-errors'),
+    require.resolve('./rules/limit-language-features'),
+    require.resolve('./rules/stylistic-issues'),
+    require.resolve('./plugins/prettier'),
+    require.resolve('./plugins/scss'),
+  ],
+};

packages/stylelint-config-elements/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@carbon/stylelint-config-elements",
+  "private": true,
+  "description": "Stylelint configuration for Carbon Elements",
+  "version": "0.0.1-alpha.31",
+  "license": "Apache-2.0",
+  "main": "index.js",
+  "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/stylelint-config-elements",
+  "bugs": "https://github.com/IBM/carbon-elements/issues",
+  "keywords": [
+    "ibm",
+    "elements",
+    "carbon",
+    "carbon-elements",
+    "carbon-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "stylelint": "^9.10.1"
+  },
+  "dependencies": {
+    "stylelint-config-prettier": "^4.0.0",
+    "stylelint-prettier": "^1.0.6",
+    "stylelint-scss": "^3.5.3"
+  },
+  "devDependencies": {
+    "stylelint": "^9.10.1"
+  }
+}

packages/stylelint-config-elements/plugins/prettier.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-prettier'],
+  plugins: ['stylelint-prettier'],
+  rules: {
+    'prettier/prettier': true,
+  },
+};

packages/stylelint-config-elements/plugins/scss.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const OFF = null;
+
+module.exports = {
+  plugins: ['stylelint-scss'],
+  rules: {
+    // @-else
+    // Require or disallow a newline after the closing brace of @else statements.
+    'scss/at-else-closing-brace-newline-after': 'always-last-in-chain',
+    // Require a single space or disallow whitespace after the closing brace of @else statements.
+    'scss/at-else-closing-brace-space-after': 'always-intermediate',
+    // Require an empty line or disallow empty lines before @-else.
+    'scss/at-else-empty-line-before': 'never',
+    // Require or disallow a space before @else if parentheses.
+    'scss/at-else-if-parentheses-space-before': OFF,
+
+    // @-extend
+    // Disallow at-extends (@extend) with missing placeholders.
+    'scss/at-extend-no-missing-placeholder': OFF,
+
+    // @-function
+    // Require named parameters in SCSS function call rule.
+    'scss/at-function-named-arguments': OFF,
+    // Require or disallow a space before @function parentheses.
+    'scss/at-function-parentheses-space-before': OFF,
+    // Specify a pattern for Sass/SCSS-like function names.
+    'scss/at-function-pattern': OFF,
+
+    // @-if
+    // Require or disallow a newline after the closing brace of @if statements.
+    'scss/at-if-closing-brace-newline-after': OFF,
+    // Require a single space or disallow whitespace after the closing brace of @if statements.
+    'scss/at-if-closing-brace-space-after': OFF,
+
+    // @-import
+    // Disallow leading underscore in partial names in @import.
+    'scss/at-import-no-partial-leading-underscore': OFF,
+    // Specify blacklist of disallowed file extensions for partial names in @import commands.
+    'scss/at-import-partial-extension-blacklist': OFF,
+    // Specify whitelist of allowed file extensions for partial names in @import commands.
+    'scss/at-import-partial-extension-whitelist': OFF,
+
+    // @-mixin
+    // Require or disallow parentheses in argumentless @mixin calls.
+    'scss/at-mixin-argumentless-call-parentheses': OFF,
+    // Require named parameters in at-mixin call rule.
+    'scss/at-mixin-named-arguments': OFF,
+    // Require or disallow a space before @mixin parentheses.
+    'scss/at-mixin-parentheses-space-before': OFF,
+    // Specify a pattern for Sass/SCSS-like mixin names.
+    'scss/at-mixin-pattern': OFF,
+
+    // @-rule
+    // Disallow unknown at-rules. Should be used instead of stylelint's at-rule-no-unknown.
+    'scss/at-rule-no-unknown': true,
+
+    // $-variable
+    // Require a newline after the colon in $-variable declarations.
+    'scss/dollar-variable-colon-newline-after': OFF,
+    // Require a single space or disallow whitespace after the colon in $-variable declarations.
+    'scss/dollar-variable-colon-space-after': OFF,
+    // Require a single space or disallow whitespace before the colon in $-variable declarations.
+    'scss/dollar-variable-colon-space-before': OFF,
+    // Require !default flag for $-variable declarations.
+    'scss/dollar-variable-default': OFF,
+    // Require a single empty line or disallow empty lines before $-variable declarations.
+    'scss/dollar-variable-empty-line-before': OFF,
+    // Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.
+    'scss/dollar-variable-no-missing-interpolation': true,
+    // Specify a pattern for Sass-like variables.
+    'scss/dollar-variable-pattern': OFF,
+
+    // %-placeholder
+    // Specify a pattern for %-placeholders.
+    'scss/percent-placeholder-pattern': OFF,
+
+    // //-comment
+    // Require or disallow an empty line before //-comments.
+    'scss/double-slash-comment-empty-line-before': OFF,
+    // Require or disallow //-comments to be inline comments.
+    'scss/double-slash-comment-inline': 'never',
+    // Require or disallow whitespace after the // in //-comments
+    'scss/double-slash-comment-whitespace-inside': OFF,
+
+    // Declaration
+    // Require or disallow properties with - in their names to be in a form of a nested group.
+    'scss/declaration-nested-properties': 'never',
+    // Disallow nested properties of the same "namespace" be divided into multiple groups.
+    'scss/declaration-nested-properties-no-divided-groups': OFF,
+
+    // Media feature
+    // Require a media feature value be a $-variable or disallow $-variables in media feature values.
+    'scss/media-feature-value-dollar-variable': OFF,
+
+    // Operator
+    // Disallow linebreaks after Sass operators.
+    'scss/operator-no-newline-after': OFF,
+    // Disallow linebreaks before Sass operators.
+    'scss/operator-no-newline-before': true,
+    // Disallow unspaced operators in Sass operations.
+    'scss/operator-no-unspaced': true,
+
+    // Partial
+    // Disallow non-CSS @imports in partial files.
+    'scss/partial-no-import': OFF,
+
+    // Selector
+    // Disallow redundant nesting selectors (&).
+    'scss/selector-no-redundant-nesting-selector': true,
+  },
+};