@wistia/eslint-config 0.2.4 → 0.3.1

package/.tool-versions

@@ -0,0 +1,3 @@
+ruby 2.7.5
+nodejs 16.10.0
+yarn 1.22.10

package/eslintRules/react.js

@@ -32,9 +32,16 @@ module.exports = {
   ],
   // adjust to allow render props
   'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
+  // airbnb config for this rule is not compatible with the vast majority of
+  // our existing code, so instead of refactoring everything we just adjust this rule
+  'react/function-component-definition': [
+    'error',
+    {
+      namedComponents: 'arrow-function',
+      unnamedComponents: 'arrow-function',
+    },
+  ],
   // these two rules are no longer required with React 17 & babel `automatic` runtime
   'react/jsx-uses-react': 'off',
   'react/react-in-jsx-scope': 'off',
-  // temporarily disable as this rule seems to be acting up
-  'react/function-component-definition': 'off',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wistia/eslint-config",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Wistia's ESLint configurations",
   "main": "react.js",
   "scripts": {
@@ -16,8 +16,8 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.2.4",
-    "eslint-plugin-jest-dom": "^3.9.2",
+    "eslint-plugin-jest": "^26.0.0",
+    "eslint-plugin-jest-dom": "^4.0.1",
     "eslint-plugin-jest-formatting": "^3.0.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -26,16 +26,17 @@
     "eslint-plugin-styled-components-a11y": "^0.0.34",
     "eslint-plugin-testing-library": "^5.0.0",
     "prettier": "^2.4.1",
-    "stylelint": "^13.0.0",
+    "stylelint": "^14.0.0",
     "stylelint-config-prettier": "^9.0.0",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.0.0",
-    "stylelint-prettier": "^1.0.0",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
+    "stylelint-prettier": "^2.0.0",
     "stylelint-processor-styled-components": "^1.10.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^14.1.0",
+    "@commitlint/cli": "^16.0.1",
+    "@commitlint/config-conventional": "^16.0.0",
     "husky": "^7.0.1"
   },
   "engines": {

package/stylelint/styled-components.js

@@ -4,7 +4,11 @@ const styledComponentRules = require('../stylelintRules/styled-components');
 module.exports = {
   plugins: ['stylelint-prettier', 'stylelint-declaration-block-no-ignored-properties'],
   processors: ['stylelint-processor-styled-components'],
-  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-styled-components',
+    'stylelint-config-prettier',
+  ],
   rules: {
     ...commonRules,
     ...styledComponentRules,

package/stylelintRules/styled-components.js

@@ -1,10 +1,18 @@
 // only add rules pertaining to styled-components
 
 module.exports = {
+  // in css-in-js when variables are being passed around, this rule
+  // often leads to less readable code, even though it is more compact
+  'declaration-block-no-redundant-longhand-properties': null,
+  // this appears to conflict with styled-components keyframes method
+  'keyframes-name-pattern': null,
   // without this pretty much every file will throw an error¯\_(ツ)_/¯
   'no-empty-source': null,
   // disallow property values that are ignored due to another property value in the same rule
   'plugin/declaration-block-no-ignored-properties': true,
+  // prevent snake case from being used for class/id selectors but be otherwise flexible
+  'selector-class-pattern': '^[a-zA-Z0-9-]+(-[a-zA-Z0-9]+)*$',
+  'selector-id-pattern': '^[a-zA-Z0-9-]+(-[a-zA-Z0-9]+)*$',
   // these selectors are used as placeholders by styled-components preprocessor
   'selector-type-no-unknown': [true, { ignoreTypes: ['$dummyValue', '/^-styled-/'] }],
   'value-keyword-case': [