feat: add stylelint support

.travis.yml

@@ -18,7 +18,8 @@ install:
   - yarn lerna bootstrap
 
 script:
-  - yarn prettier-check
+  - yarn eslint-check
+  - yarn stylelint-check
   - yarn lint
   - yarn test
 

README.md

@@ -1,6 +1,6 @@
 # configs
 
-[![Travis](https://img.shields.io/travis/com/1stg/configs.svg)](https://travis-com.org/1stg/configs)
+[![Travis](https://img.shields.io/travis/com/1stg/configs.svg)](https://travis-ci.com/1stg/configs)
 [![David](https://img.shields.io/david/1stg/configs.svg)](https://david-dm.org/1stg/configs)
 [![David Dev](https://img.shields.io/david/dev/1stg/configs.svg)](https://david-dm.org/1stg/configs?type=dev)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1stg/configs",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "description": "Personal but Shareable Configurations for all 1stG.me projects.",
   "repository": "git@github.com:1stG/configs.git",
   "author": "JounQin <admin@1stg.me>",
@@ -10,8 +10,13 @@
     "packages/*"
   ],
   "scripts": {
-    "prettier-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
-    "lint": "node --preserve-symlinks node_modules/.bin/eslint . --ext js,jsx,mdx,ts,tsx,vue",
+    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "stylelint-check": "stylelint-config-prettier-check",
+    "lint:es": "eslint . --ext js,jsx,mdx,ts,tsx,vue",
+    "lint:style:css": "stylelint --config @1stg/stylelint-config test/*.{css,less}",
+    "lint:style:scss": "stylelint --config @1stg/stylelint-config/scss test/*.{scss,vue}",
+    "lint:style": "run-p lint:style:*",
+    "lint": "run-p lint:*",
     "test": "jest"
   },
   "devDependencies": {
@@ -21,6 +26,7 @@
     "@1stg/lint-staged": "link:packages/lint-staged",
     "@1stg/prettier-config": "link:packages/prettier-config",
     "@1stg/renovate-config": "link:packages/renovate-config",
+    "@1stg/stylelint-config": "link:packages/stylelint-config",
     "@1stg/tsconfig": "link:packages/tsconfig",
     "@babel/core": "^7.5.5",
     "@commitlint/config-conventional": "^8.1.0",
@@ -34,8 +40,10 @@
     "lerna": "^3.16.4",
     "lerna-changelog": "^0.8.2",
     "lint-staged": "^9.2.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
     "react": "^16.9.0",
+    "stylelint": "^10.1.0",
     "ts-jest": "^24.0.2",
     "tslib": "^1.10.0",
     "typescript": "^3.5.3",
@@ -46,5 +54,9 @@
       "@commitlint/config-conventional"
     ]
   },
-  "prettier": "@1stg/prettier-config"
+  "prettier": "@1stg/prettier-config",
+  "stylelint": {
+    "extends": "@1stg/stylelint-config/scss",
+    "ignoreFiles": "*.less"
+  }
 }

packages/lint-staged/index.js

@@ -1,7 +1,9 @@
 module.exports = {
-  '*.{mdx,mjs,js,jsx,ts,tsx}': ['eslint --fix', 'git add'],
+  '*.{mdx,mjs,js,jsx,ts,tsx,vue}': ['eslint --fix', 'git add'],
+  '*.{css,less}': ['stylelint --config @1stg/stylelint-config'],
+  '*.{sass,scss,vue}': ['stylelint --config @1stg/stylelint-config/scss'],
   '.*rc': ['prettier --write', 'git add'],
-  '*.{css,gql,html,json,less,md,sass,scss,yml}': [
+  '*.{css,gql,html,json,less,md,sass,scss,vue,yml}': [
     'prettier --write',
     'git add',
   ],

packages/stylelint-config/base.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  plugins: ['stylelint-high-performance-animation'],
+  rules: {
+    'plugin/no-low-performance-animation-properties': true,
+  },
+}

packages/stylelint-config/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['./base', 'stylelint-prettier/recommended'],
+}

packages/stylelint-config/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@1stg/stylelint-config",
+  "version": "0.1.0",
+  "description": "Personal but Shareable Stylelint Configuration for all 1stG.me projects.",
+  "repository": "git@github.com:1stG/configs.git",
+  "author": "JounQin <admin@1stg.me>",
+  "license": "MIT",
+  "peerDependencies": {
+    "stylelint": "^10.1.0"
+  },
+  "dependencies": {
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-high-performance-animation": "^1.2.1",
+    "stylelint-prettier": "^1.1.1",
+    "stylelint-scss": "^3.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/stylelint-config/scss.js

@@ -0,0 +1,28 @@
+module.exports = {
+  extends: ['./base', 'stylelint-prettier/recommended'],
+  plugins: ['stylelint-scss'],
+  rules: {
+    'at-rule-no-unknown': null,
+    'scss/at-each-key-value-single-line': true,
+    'scss/at-import-no-partial-leading-underscore': true,
+    'scss/at-import-partial-extension-blacklist': ['sass', 'scss'],
+    'scss/at-mixin-argumentless-call-parentheses': 'never',
+    'scss/at-rule-no-unknown': true,
+    'scss/dollar-variable-default': true,
+    'scss/dollar-variable-no-missing-interpolation': true,
+    // TODO: should use ['always', { except: 'only-of-namespace' }]
+    // once https://github.com/postcss/postcss-selector-parser/issues/206 fixed
+    'scss/declaration-nested-properties': 'never',
+    'scss/declaration-nested-properties-no-divided-groups': true,
+    'scss/media-feature-value-dollar-variable': 'always',
+    'scss/no-duplicate-dollar-variables': [
+      true,
+      {
+        ignoreInsideAtRules: ['if', 'else'],
+      },
+    ],
+    'scss/operator-no-unspaced': true,
+    'scss/selector-nest-combinators': 'never',
+    'scss/selector-no-redundant-nesting-selector': true,
+  },
+}

test/test.css

@@ -0,0 +1,3 @@
+a {
+  color: red;
+}

test/test.less

@@ -0,0 +1,20 @@
+@width: 10px;
+@height: @width + 10px;
+
+#header {
+  width: @width;
+  height: @height;
+}
+
+.component {
+  width: 300px;
+  @media (min-width: 768px) {
+    width: 600px;
+    @media (min-resolution: 192dpi) {
+      background-image: url(/img/retina2x.png);
+    }
+  }
+  @media (min-width: 1280px) {
+    width: 800px;
+  }
+}

test/test.scss

@@ -0,0 +1,16 @@
+@if (1 == 1) {
+  color: red;
+}
+
+a {
+  font-size: 10px;
+  font-weight: 400;
+}
+
+$a: 1 !default;
+
+@if (true) {
+  $a: 2 !default;
+} @else {
+  $a: 3 !default;
+}

test/test.vue

@@ -25,3 +25,8 @@ export default Vue.extend({
   },
 })
 </script>
+<style>
+div {
+  color: red;
+}
+</style>