@wistia/eslint-config 0.18.0 → 0.19.0

package/configs/eslint/react.js

@@ -14,6 +14,6 @@ module.exports = {
   extends: [
     '../../rules/eslint/react',
     '../../rules/eslint/react-a11y',
-    '../../rules/eslint/react-hooks.js',
+    '../../rules/eslint/react-hooks',
   ].map(require.resolve),
 };

package/configs/eslint/typescript-react.js

@@ -12,5 +12,10 @@ module.exports = {
     es2022: true,
   },
 
-  extends: ['../../rules/eslint/react', '../../rules/eslint/typescript-react'].map(require.resolve),
+  extends: [
+    '../../rules/eslint/react',
+    '../../rules/eslint/react-a11y',
+    '../../rules/eslint/react-hooks',
+    '../../rules/eslint/typescript-react',
+  ].map(require.resolve),
 };

package/configs/stylelint/scss.js

@@ -1,6 +1,10 @@
 module.exports = {
   plugins: ['stylelint-prettier', 'stylelint-scss'],
-  extends: ['../../rules/stylelint/css', '../../rules/stylelint/scss'].map(require.resolve),
+  extends: [
+    '../../rules/stylelint/css',
+    '../../rules/stylelint/scss',
+    'stylelint-config-prettier',
+  ].map(require.resolve),
   customSyntax: require('postcss-scss'),
   rules: {
     // prettier configuration

package/configs/stylelint/styled-components.js

@@ -1,17 +1,11 @@
 module.exports = {
-  plugins: [
-    'stylelint-prettier',
-    'stylelint-scss',
-    'stylelint-declaration-block-no-ignored-properties',
-  ],
+  plugins: ['stylelint-prettier', 'stylelint-declaration-block-no-ignored-properties'],
   extends: [
     '../../rules/stylelint/css',
-    '../../rules/stylelint/scss',
     '../../rules/stylelint/styled-components',
     'stylelint-config-prettier',
   ].map(require.resolve),
-  customSyntax: require('postcss-scss'),
-  processors: ['stylelint-processor-styled-components'],
+  customSyntax: require('postcss-styled-syntax'),
   rules: {
     // prettier configuration
     'prettier/prettier': true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wistia/eslint-config",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Wistia's ESLint configurations",
   "main": "react.js",
   "exports": {
@@ -62,12 +62,12 @@
     "eslint-plugin-testing-library": "^5.10.2",
     "postcss": "^8.4.21",
     "postcss-scss": "^4.0.6",
+    "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.7",
     "stylelint": "^15.4.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
     "stylelint-prettier": "^3.0.0",
-    "stylelint-processor-styled-components": "^1.10.0",
     "stylelint-scss": "^4.6.0"
   },
   "devDependencies": {

package/rules/eslint/typescript.js

@@ -546,7 +546,7 @@ module.exports = {
     '@typescript-eslint/no-magic-numbers': [
       'error',
       {
-        ignore: [-1, 0, 1, 2, 3, 4, 5, 100, 1000, 2000, 3000, 4000, 5000],
+        ignore: [-1, 0, 1, 2, 3, 4, 5, 100, 1024, 1000, 10000],
         ignoreArrayIndexes: true,
         ignoreDefaultValues: true,
         ignoreTypeIndexes: true,

package/rules/stylelint/css.js

@@ -2,8 +2,8 @@
 
 module.exports = {
   rules: {
-    // https://github.com/stylelint/stylelint-config-recommended/blob/main/index.js
-    // 'annotation-no-unknown': true,
+    // https://github.com/stylelint/stylelint-config-recommended/blob/main/index.js#L5
+    'annotation-no-unknown': true,
     'at-rule-no-unknown': true,
     'block-no-empty': true,
     'color-no-invalid-hex': true,
@@ -30,11 +30,11 @@ module.exports = {
     'no-duplicate-at-import-rules': true,
     'no-duplicate-selectors': true,
     'no-empty-source': true,
-    'no-extra-semicolons': true,
     'no-invalid-double-slash-comments': true,
     'no-invalid-position-at-import-rule': true,
     'no-irregular-whitespace': true,
     'property-no-unknown': true,
+    'selector-anb-no-unmatchable': true,
     'selector-pseudo-class-no-unknown': true,
     'selector-pseudo-element-no-unknown': true,
     'selector-type-no-unknown': [
@@ -46,7 +46,7 @@ module.exports = {
     'string-no-newline': true,
     'unit-no-unknown': true,
 
-    // https://github.com/stylelint/stylelint-config-standard/blob/main/index.js
+    // https://github.com/stylelint/stylelint-config-standard/blob/main/index.js#L5
     'alpha-value-notation': [
       'percentage',
       {
@@ -66,19 +66,8 @@ module.exports = {
         ignore: ['after-comment'],
       },
     ],
-    'at-rule-name-case': 'lower',
-    'at-rule-name-space-after': 'always-single-line',
     'at-rule-no-vendor-prefix': true,
-    'at-rule-semicolon-newline-after': 'always',
-    'block-closing-brace-empty-line-before': 'never',
-    'block-closing-brace-newline-after': 'always',
-    'block-closing-brace-newline-before': 'always-multi-line',
-    'block-closing-brace-space-before': 'always-single-line',
-    'block-opening-brace-newline-after': 'always-multi-line',
-    'block-opening-brace-space-after': 'always-single-line',
-    'block-opening-brace-space-before': 'always',
     'color-function-notation': 'modern',
-    'color-hex-case': 'lower',
     'color-hex-length': 'short',
     'comment-empty-line-before': [
       'always',
@@ -107,17 +96,7 @@ module.exports = {
         message: (name) => `Expected custom property name "${name}" to be kebab-case`,
       },
     ],
-    'declaration-bang-space-after': 'never',
-    'declaration-bang-space-before': 'always',
-    'declaration-block-semicolon-newline-after': 'always-multi-line',
-    'declaration-block-semicolon-space-after': 'always-single-line',
-    'declaration-block-semicolon-space-before': 'never',
-    'declaration-block-single-line-max-declarations': 1,
-    'declaration-block-trailing-semicolon': 'always',
     'declaration-block-no-redundant-longhand-properties': true,
-    'declaration-colon-newline-after': 'always-multi-line',
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
     'declaration-empty-line-before': [
       'always',
       {
@@ -126,45 +105,26 @@ module.exports = {
       },
     ],
     'font-family-name-quotes': 'always-where-recommended',
-    'function-comma-newline-after': 'always-multi-line',
-    'function-comma-space-after': 'always-single-line',
-    'function-comma-space-before': 'never',
-    'function-max-empty-lines': 0,
     'function-name-case': 'lower',
-    'function-parentheses-newline-inside': 'always-multi-line',
-    'function-parentheses-space-inside': 'never-single-line',
     'function-url-quotes': 'always',
-    'function-whitespace-after': 'always',
     'hue-degree-notation': 'angle',
     'import-notation': 'url',
-    indentation: 2,
-    // 'keyframe-selector-notation': 'percentage-unless-within-keyword-only-block',
+    'keyframe-selector-notation': 'percentage-unless-within-keyword-only-block',
     'keyframes-name-pattern': [
       '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
       {
         message: (name) => `Expected keyframe name "${name}" to be kebab-case`,
       },
     ],
-    'length-zero-no-unit': true,
-    'max-empty-lines': 1,
-    'max-line-length': 120,
-    'media-feature-colon-space-after': 'always',
-    'media-feature-colon-space-before': 'never',
-    'media-feature-name-case': 'lower',
+    'length-zero-no-unit': [
+      true,
+      {
+        ignore: ['custom-properties'],
+      },
+    ],
     'media-feature-name-no-vendor-prefix': true,
-    'media-feature-parentheses-space-inside': 'never',
-    'media-feature-range-operator-space-after': 'always',
-    'media-feature-range-operator-space-before': 'always',
-    'media-query-list-comma-newline-after': 'always-multi-line',
-    'media-query-list-comma-space-after': 'always-single-line',
-    'media-query-list-comma-space-before': 'never',
-    'no-empty-first-line': true,
-    'no-eol-whitespace': true,
-    'no-missing-end-of-source-newline': true,
-    'number-leading-zero': 'always',
+    'media-feature-range-notation': 'prefix',
     'number-max-precision': 4,
-    'number-no-trailing-zeros': true,
-    'property-case': 'lower',
     'property-no-vendor-prefix': true,
     'rule-empty-line-before': [
       'always-multi-line',
@@ -173,9 +133,6 @@ module.exports = {
         ignore: ['after-comment'],
       },
     ],
-    'selector-attribute-brackets-space-inside': 'never',
-    'selector-attribute-operator-space-after': 'never',
-    'selector-attribute-operator-space-before': 'never',
     'selector-attribute-quotes': 'always',
     'selector-class-pattern': [
       '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
@@ -183,38 +140,23 @@ module.exports = {
         message: (selector) => `Expected class selector "${selector}" to be kebab-case`,
       },
     ],
-    'selector-combinator-space-after': 'always',
-    'selector-combinator-space-before': 'always',
-    'selector-descendant-combinator-no-non-space': true,
     'selector-id-pattern': [
       '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
       {
         message: (selector) => `Expected id selector "${selector}" to be kebab-case`,
       },
     ],
-    'selector-list-comma-newline-after': 'always',
-    'selector-list-comma-space-before': 'never',
-    'selector-max-empty-lines': 0,
     'selector-no-vendor-prefix': true,
     'selector-not-notation': 'complex',
-    'selector-pseudo-class-case': 'lower',
-    'selector-pseudo-class-parentheses-space-inside': 'never',
-    'selector-pseudo-element-case': 'lower',
     'selector-pseudo-element-colon-notation': 'double',
     'selector-type-case': 'lower',
     'shorthand-property-no-redundant-values': true,
-    'string-quotes': 'double',
-    'unit-case': 'lower',
     'value-keyword-case': 'lower',
-    'value-list-comma-newline-after': 'always-multi-line',
-    'value-list-comma-space-after': 'always-single-line',
-    'value-list-comma-space-before': 'never',
-    'value-list-max-empty-lines': 0,
     'value-no-vendor-prefix': [
       true,
       {
         // `-webkit-box` is allowed as standard. See https://www.w3.org/TR/css-overflow-3/#webkit-line-clamp
-        ignoreValues: ['box'],
+        ignoreValues: ['box', 'inline-box'],
       },
     ],
   },

package/rules/stylelint/styled-components.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   rules: {
+    // unfortunately this causes false positives
+    'block-no-empty': null,
     // 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,
@@ -14,17 +16,7 @@ module.exports = {
     // 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-case': ['lower', { ignoreTypes: ['$dummyValue'] }],
-    'selector-type-no-unknown': [true, { ignoreTypes: ['$dummyValue', '/^-styled-/'] }],
     // prefer single to double quotes for better js compat
     'string-quotes': 'single',
-    'value-keyword-case': [
-      'lower',
-      { ignoreKeywords: [/dummyValue/], ignoreProperties: [/dummyValue/] },
-    ],
-    // styled-components adds vendor prefixes if necessary so we should avoid adding them in code
-    'value-no-vendor-prefix': true,
-    'property-no-vendor-prefix': true,
   },
 };