update stylelint

frontend/.stylelintrc.js

@@ -16,7 +16,7 @@ module.exports = {
       'always',
       { except: ['first-nested'], ignore: ['after-comment', 'stylelint-commands'] },
     ],
-    'value-keyword-case': ['lower', { ignoreProperties: ['composes'] }],
+    'value-keyword-case': ['lower', { ignoreProperties: ['composes'], camelCaseSvgKeywords: true }],
     'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }],
     'property-no-unknown': [true, { ignoreProperties: ['composes'] }],
     'mavrin/stylelint-declaration-use-css-custom-properties': {
@@ -30,5 +30,16 @@ module.exports = {
         importFrom: CUSTOM_PROPERTIES_PATH,
       },
     ],
+    'selector-class-pattern': null,
+    'color-function-notation': null,
+    'shorthand-property-no-redundant-values': null,
+    'alpha-value-notation': null,
+    'declaration-block-no-redundant-longhand-properties': null,
   },
+  overrides: [
+    {
+      files: ['*.html', '**/*.html', '*.ejs', '**/*.ejs'],
+      customSyntax: 'postcss-html',
+    },
+  ],
 };

frontend/app/styles/global.css

@@ -3,7 +3,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: 6px;
-  font-family: PT Sans, Helvetica, Arial, sans-serif;
+  font-family: "PT Sans", Helvetica, Arial, sans-serif;
   color: rgb(var(--primary-text-color));
   box-sizing: border-box;
 }

frontend/package.json

@@ -45,7 +45,7 @@
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
     "@formatjs/cli": "^4.2.11",
-    "@mavrin/stylelint-declaration-use-css-custom-properties": "1.0.0-alpha.2",
+    "@mavrin/stylelint-declaration-use-css-custom-properties": "^2.0.0",
     "@prefresh/babel-plugin": "^0.4.1",
     "@prefresh/webpack": "^3.2.2",
     "@size-limit/file": "^4.10.2",
@@ -97,16 +97,17 @@
     "mini-css-extract-plugin": "^2.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
+    "postcss-html": "^1.3.0",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.2.3",
     "prettier": "^2.5.1",
     "redux-mock-store": "^1.5.4",
     "size-limit": "^7.0.5",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-value-no-unknown-custom-properties": "^3.0.0",
+    "stylelint": "^14.6.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^9.1.2",
     "tsconfig-paths-webpack-plugin": "^3.5.1",

frontend/templates/markdown-help.html

@@ -54,7 +54,7 @@
       }
 
       body {
-        font: 16px/26px Helvetica, Helvetica Neue, Arial, sans-serif;
+        font: 16px/26px Helvetica, "Helvetica Neue", Arial, sans-serif;
       }
 
       .wrapper {