chore(deps): update linters [skip netlify] (major) (#3317)

* chore(deps): update linters [skip netlify]

* chore: add missing peer dependencies

* style: update styelint

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: ylemkimon <y@ylem.kim>

.stylelintrc

@@ -1,8 +1,20 @@
 {
     "extends": "stylelint-config-standard",
     "rules": {
+        "at-rule-no-vendor-prefix": null,
+        "font-family-name-quotes": "always-where-required",
         "indentation": 4,
+        "number-max-precision": 6,
+        "property-no-vendor-prefix": null,
+        "selector-class-pattern": null,
+        "value-no-vendor-prefix": null,
     },
+    "overrides": [
+      {
+        "files": ["**/*.less"],
+        "customSyntax": "postcss-less",
+      }
+    ],
     "ignoreFiles": [
         "**/*.min.css"
     ]

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "7.32.0-sdk",
+  "version": "8.1.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

.yarn/sdks/stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint",
-  "version": "13.13.1-sdk",
+  "version": "14.0.1-sdk",
   "main": "lib/index.js",
   "type": "commonjs"
 }

package.json

@@ -21,6 +21,8 @@
     "@babel/core": "^7.10.4",
     "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-flow": "^7.10.4",
@@ -42,9 +44,9 @@
     "caniuse-lite": "^1.0.30001102",
     "css-loader": "^6.0.0",
     "cssnano": "^5.0.0-rc.1",
-    "eslint": "^7.4.0",
-    "eslint-plugin-actions": "^1.0.1",
-    "eslint-plugin-flowtype": "^6.0.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-actions": "^2.0.0",
+    "eslint-plugin-flowtype": "^8.0.0",
     "eslint-plugin-react": "^7.20.3",
     "flow-bin": "^0.135.0",
     "fs-extra": "^10.0.0",
@@ -68,6 +70,7 @@
     "p-retry": "^4.6.1",
     "pako": "^2.0.0",
     "postcss": "^8.0.0",
+    "postcss-less": "^5.0.0",
     "postcss-loader": "^6.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
@@ -78,8 +81,8 @@
     "semantic-release": "^18.0.0",
     "sri-toolbox": "^0.2.0",
     "style-loader": "^3.0.0",
-    "stylelint": "^13.6.1",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint": "^14.0.0",
+    "stylelint-config-standard": "^23.0.0",
     "terser-webpack-plugin": "^5.0.3",
     "webpack": "^5.51.1",
     "webpack-bundle-analyzer": "^4.0.0",

src/katex.less

@@ -568,7 +568,7 @@
     }
 
     .boxpad {
-        padding: 0 0.3em 0 0.3em;      // \fboxsep = 3pt
+        padding: 0 0.3em;              // \fboxsep = 3pt
     }
 
     .fbox,
@@ -578,7 +578,7 @@
     }
 
     .cancel-pad {
-        padding: 0 0.2em 0 0.2em;    // ref: cancel package  \advance\dimen@ 2\p@ %  "+2"
+        padding: 0 0.2em;            // ref: cancel package  \advance\dimen@ 2\p@ %  "+2"
     }
 
     .cancel-lap {
@@ -600,7 +600,7 @@
     }
 
     .anglpad {
-        padding: 0 0.03889em 0 0.03889em; // pad 1mu left and right (in scriptstyle)
+        padding: 0 0.03889em;             // pad 1mu left and right (in scriptstyle)
     }
 
     .eqn-num::before {

website/static/css/custom.css

@@ -18,7 +18,7 @@
 }
 
 .onPageNav a.active {
-    background-color: rgba(27, 31, 35, 0.05);
+    background-color: rgb(27 31 35 / 5%);
     font-weight: bold;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .nav-footer .copyright a {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgb(255 255 255 / 60%);
 }
 
 .nav-footer .copyright a:hover,

website/static/static/index.css

@@ -1,5 +1,5 @@
 body {
-    font: 16px/1.4 "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font: 16px/1.4 Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
     margin: 0;
 }
 
@@ -76,7 +76,7 @@ textarea {
 }
 
 .header .cta a:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(255 255 255 / 10%);
 }
 
 .demo {
@@ -84,7 +84,7 @@ textarea {
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
     font-size: 22px;
     margin: 50px 0 0;
 }
@@ -112,7 +112,7 @@ textarea {
 .demo-instructions {
     line-height: 1.5;
     margin-bottom: 10px;
-    opacity: 0.8;
+    opacity: 80%;
 }
 
 .demo-left {
@@ -158,7 +158,7 @@ textarea {
 
 .main {
     background: #fff2e7;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
     min-height: 400px;
     position: relative;
     padding: 30px 15px;
@@ -209,10 +209,10 @@ textarea {
 }
 
 .main .comparison {
-    background-image: url(../img/katex-comparison.gif);
+    background-image: url("../img/katex-comparison.gif");
     background-position: 50% 50%;
     background-size: cover;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
     padding-top: 42%;
     width: 100%;
 }
@@ -228,7 +228,7 @@ textarea {
 }
 
 .main .cta a:hover {
-    background: rgba(50, 152, 148, 0.1);
+    background: rgb(50 152 148 / 10%);
 }
 
 .footer {
@@ -267,7 +267,7 @@ textarea {
 
 #options-panel {
     background: #fafafa;
-    box-shadow: 3px 0 3px rgba(50, 50, 50, 0.3);
+    box-shadow: 3px 0 3px rgb(50 50 50 / 30%);
     position: fixed;
     top: 0;
     bottom: 0;