feat(core): rules setup (#2)

* feat(core): rules setup * feat(core): setup husky * feat(core): rules rebase * fix(pr): pr fixes * remove code * add readme * Update README.md * feat: newlines and braces for at-rules (#3) * feat(core): add rule for newlines before at-rules * feat(sass): add rules for newlines before and after at-rules * chore: ci and dependabot config (#4) * chore: pin node version * chore(github): add CI workflow * chore(github): add dependabot config Co-authored-by: Yves Rijckaert <y.rijckaert@edenspiekermann.com> Co-authored-by: Norman Rusch <me@nrmnrsh.com>
edenspiekermann · Nov 5, 2020 · e5ee4f2 · e5ee4f2
1 parent 568f0fa
commit e5ee4f2
Show file tree

Hide file tree

Showing 13 changed files with 2,561 additions and 429 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=false
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,8 @@
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "monthly"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,47 @@
+# This workflow will do a clean install of node dependencies and run tests and
+# validations. This will use the pinned version inside the .nvmrc file
+# for the node installation.
+#
+# Required secrets:
+# ------------------------------------------------------------------------------
+# (none)
+
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+      - develop
+      - feature/*
+      - feat/*
+
+jobs:
+  tests:
+    name: Validations
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v2
+
+      - name: Read .nvmrc
+        id: nvm
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+
+      - name: Use Node.js ${{ steps.nvm.outputs.NVMRC }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run validations
+        run: yarn lint
+        env:
+          CI: true
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v10.22.1
diff --git a/README.md b/README.md
@@ -18,6 +18,63 @@ Then have your project's `.stylelintrc` file extend the ruleset.
 }
 ```
 
+### Core rules
+
+Using `"extends": ["@edenspiekermann/stylelint-config"]` is a short hand for `"extends": ["@edenspiekermann/stylelint-config/rules/core"]`. The core rules use extend the stylelint-config-standard configuration. It contains all rulesets for a _frameworkless_ / _vanilla css_ validation. On top of that its possible to extend these rules with some more specific configurations (see the following).
+
+
+### BEM
+
+Add this configuration if you want to use stylelint with the rules of [BEM](http://getbem.com/introduction/).
+
+```json
+{
+  "extends": [
+    "@edenspiekermann/stylelint-config",
+    "@edenspiekermann/stylelint-config/rules/bem"
+  ]
+}
+```
+
+### SASS
+
+Add this configuration if you want to use stylelint with the rules of [SASS](https://sass-lang.com/).
+
+```json
+{
+  "extends": [
+    "@edenspiekermann/stylelint-config",
+    "@edenspiekermann/stylelint-config/rules/sass"
+  ]
+}
+```
+
+### Styled components
+
+Add this configuration if you want to use stylelint with the rules of [styled components](https://styled-components.com/).
+
+```json
+{
+  "extends": [
+    "@edenspiekermann/stylelint-config",
+    "@edenspiekermann/stylelint-config/rules/styled-components"
+  ]
+}
+```
+
+### Tailwind
+
+Add this configuration if you want to use stylelint with the rules of [tailwind](https://tailwindcss.com/).
+
+```json
+{
+  "extends": [
+    "@edenspiekermann/stylelint-config",
+    "@edenspiekermann/stylelint-config/rules/tailwind"
+  ]
+}
+```
+
 ## License
 
 The MIT License (MIT). Please see [License File](LICENSE) for more information.
diff --git a/index.js b/index.js
@@ -1,31 +1 @@
-module.exports = {
-  extends: ['stylelint-config-standard'],
-
-  rules: {
-    'selector-list-comma-newline-after': null,
-    'block-closing-brace-empty-line-before': null,
-    'rule-empty-line-before': 'always',
-    'declaration-empty-line-before': null,
-    'font-family-name-quotes': 'always-where-recommended',
-    'color-named': 'always-where-possible',
-    'comment-empty-line-before': null,
-    'comment-whitespace-inside': null,
-    'function-url-quotes': 'never',
-    'string-quotes': 'single',
-    'declaration-no-important': true,
-    'no-duplicate-selectors': true,
-    'selector-max-id': 0,
-    'number-max-precision': 2,
-    'shorthand-property-no-redundant-values': true,
-    'selector-no-qualifying-type': [true, { ignore: 'attribute' }],
-    'selector-max-universal': 0,
-    'selector-no-vendor-prefix': true,
-    'property-no-vendor-prefix': true,
-    'media-feature-name-case': 'lower',
-    'number-no-trailing-zeros': true,
-    'number-leading-zero': 'never',
-    'value-keyword-case': 'lower',
-    'no-extra-semicolons': true,
-    'declaration-block-no-shorthand-property-overrides': true,
-  },
-};
+module.exports = require('./rules/core');
diff --git a/package.json b/package.json
@@ -3,8 +3,18 @@
   "version": "0.0.1",
   "description": "A shareable stylelint config for ESPI projects",
   "main": "index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "keywords": [
+    "stylelint",
+    "stylelint config",
+    "linting",
+    "tailwind",
+    "styled components"
+  ],
   "scripts": {
-    "lint": "eslint --fix index.js",
+    "lint": "eslint . --ext .js",
     "release": "np"
   },
   "repository": {
@@ -13,19 +23,32 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn run test"
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "*.js,!__fixtures/**/*.js": [
+      "eslint --fix"
+    ]
+  },
   "author": "Edenspiekermann",
   "license": "MIT",
-  "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "eslint": "^7.10.0"
-  },
   "dependencies": {
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "stylelint-scss": "^3.18.0"
+  },
+  "devDependencies": {
+    "@edenspiekermann/eslint-config": "^1.0.1",
+    "eslint": "^7.10.0",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.4.0",
     "np": "^6.5.0",
-    "stylelint": "^13.7.2",
-    "stylelint-config-standard": "^20.0.0"
+    "yarn": "^1.22.10"
+  },
+  "peerDependencies": {
+    "stylelint": "^13.7.2"
   }
 }
diff --git a/rules/bem.js b/rules/bem.js
@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    // Specify a pattern for class selectors.
+    // https://stylelint.io/user-guide/rules/selector-class-pattern
+    'selector-class-pattern':
+      '^[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$',
+  },
+};
diff --git a/rules/core.js b/rules/core.js
@@ -0,0 +1,152 @@
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
+  plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
+  rules: {
+    // Specify the alphabetical order of properties within declaration blocks.
+    // https://github.com/hudochenkov/stylelint-order/tree/master/rules/properties-alphabetical-order
+    'order/properties-alphabetical-order': null,
+
+    // Specify the order of properties within declaration blocks.
+    // https://github.com/hudochenkov/stylelint-order/tree/master/rules/properties-order
+    'order/properties-order': [],
+
+    /*
+       1. Positioning
+       2. Box Model
+       3. Typography
+       4. Visual
+       5. Animation
+       6. Misc
+    */
+    // https://www.npmjs.com/package/stylelint-config-rational-order
+    'plugin/rational-order': true,
+
+    // Require or disallow an empty line before at-rules.
+    // https://stylelint.io/user-guide/rules/at-rule-empty-line-before
+    'at-rule-empty-line-before': ['always', {
+      ignore: [
+        'after-comment',
+        'first-nested',
+        'blockless-after-same-name-blockless',
+      ],
+    }],
+
+    // Require or disallow an empty line before the closing brace of blocks.
+    // https://stylelint.io/user-guide/rules/block-closing-brace-empty-line-before
+    'block-closing-brace-empty-line-before': null,
+
+    // There must always be an empty line before rules.
+    // https://stylelint.io/user-guide/rules/rule-empty-line-before
+    'rule-empty-line-before': 'always',
+
+    // Require or disallow an empty line before declarations.
+    // https://stylelint.io/user-guide/rules/declaration-empty-line-before
+    'declaration-empty-line-before': null,
+
+    // Disallow !important within declarations.
+    // https://stylelint.io/user-guide/rules/declaration-no-important
+    'declaration-no-important': true,
+
+    // Disallow shorthand properties that override related longhand properties.
+    // https://stylelint.io/user-guide/rules/declaration-block-no-shorthand-property-overrides
+    'declaration-block-no-shorthand-property-overrides': true,
+
+    // Specify whether or not quotation marks should be used around font family names.
+    // Quotes are recommended in the spec with "font family names
+    // that contain white space, digits, or punctuation characters other than hyphens".
+    // https://stylelint.io/user-guide/rules/font-family-name-quotes
+    'font-family-name-quotes': 'always-where-recommended',
+
+    // Colors must never be named.
+    // https://stylelint.io/user-guide/rules/color-named
+    'color-named': 'never',
+
+    // Specify lowercase or uppercase for hex colors.
+    // https://stylelint.io/user-guide/rules/color-hex-case
+    'color-hex-case': 'lower',
+
+    // Require or disallow an empty line before comments.
+    // https://stylelint.io/user-guide/rules/comment-empty-line-before
+    'comment-empty-line-before': null,
+
+    // Specify short or long notation for hex colors.
+    // https://stylelint.io/user-guide/rules/color-hex-length
+    'color-hex-length': 'long',
+
+    // There must always be whitespace inside the markers.
+    // https://stylelint.io/user-guide/rules/comment-whitespace-inside
+    'comment-whitespace-inside': 'always',
+
+    // Urls must always be quoted.
+    // https://stylelint.io/user-guide/rules/function-url-quotes
+    'function-url-quotes': 'always',
+
+    // Require a single space or disallow whitespace on the inside of the parentheses of functions.
+    // https://stylelint.io/user-guide/rules/function-parentheses-space-inside
+    'function-parentheses-space-inside': 'never',
+
+    // Strings must always be wrapped with single quotes.
+    // https://stylelint.io/user-guide/rules/string-quotes
+    'string-quotes': 'single',
+
+    // Disallow duplicate selectors within a stylesheet.
+    // https://stylelint.io/user-guide/rules/no-duplicate-selectors
+    'no-duplicate-selectors': true,
+
+    // Limit the number of decimal places allowed in numbers.
+    // https://stylelint.io/user-guide/rules/number-max-precision
+    'number-max-precision': 3,
+
+    // Disallow trailing zeros in numbers.
+    // https://stylelint.io/user-guide/rules/number-no-trailing-zeros
+    'number-no-trailing-zeros': true,
+
+    // Require or disallow a leading zero for fractional numbers less than 1.
+    // https://stylelint.io/user-guide/rules/number-leading-zero
+    'number-leading-zero': 'always',
+
+    // Disallow redundant values in shorthand properties. (e.g. margin / padding)
+    // https://stylelint.io/user-guide/rules/shorthand-property-no-redundant-values
+    'shorthand-property-no-redundant-values': true,
+
+    // Disallow qualifying a selector by type. Allow attribute selectors qualified by type.
+    // https://stylelint.io/user-guide/rules/selector-no-qualifying-type
+    'selector-no-qualifying-type': [true, { ignore: 'attribute' }],
+
+    // Require a newline or disallow whitespace after the commas of selector lists.
+    // https://stylelint.io/user-guide/rules/selector-list-comma-newline-after
+    'selector-list-comma-newline-after': 'always-multi-line',
+
+    // Limit the number of ID selectors in a selector
+    // https://stylelint.io/user-guide/rules/selector-max-id
+    'selector-max-id': 0,
+
+    // Limit the number of universal selectors in a selector.
+    // https://stylelint.io/user-guide/rules/selector-max-universal
+    'selector-max-universal': 1,
+
+    // Disallow vendor prefixes for selectors.
+    // https://stylelint.io/user-guide/rules/selector-no-vendor-prefix
+    'selector-no-vendor-prefix': true,
+
+    // Disallow vendor prefixes for properties.
+    // https://stylelint.io/user-guide/rules/property-no-vendor-prefix
+    'property-no-vendor-prefix': true,
+
+    // Specify lowercase or uppercase for media feature names.
+    // https://stylelint.io/user-guide/rules/media-feature-name-case
+    'media-feature-name-case': 'lower',
+
+    // Limit the depth of nesting.
+    // https://stylelint.io/user-guide/rules/max-nesting-depth
+    'max-nesting-depth': 3,
+
+    // Specify lowercase or uppercase for keywords values.
+    // https://stylelint.io/user-guide/rules/value-keyword-case
+    'value-keyword-case': 'lower',
+
+    // Disallow extra semicolons.
+    // https://stylelint.io/user-guide/rules/no-extra-semicolons
+    'no-extra-semicolons': true,
+  },
+};