*chore bump css and scss deps

hazelcast · Oct 9, 2024 · 6475dd3 · 6475dd3
1 parent 5e6901c
commit 6475dd3
Show file tree

Hide file tree

Showing 12 changed files with 824 additions and 667 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@typescript-eslint/parser": "^5.7.0",
     "babel-jest": "^29.7.0",
     "chromatic": "^6.2.3",
-    "css-loader": "^6.5.1",
+    "css-loader": "^7.1.2",
     "doctoc": "^2.1.0",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.8.0",
@@ -31,10 +31,10 @@
     "patch-package": "^6.5.1",
     "prettier": "^2.8.8",
     "regenerator-runtime": "^0.13.11",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
+    "sass": "^1.79.4",
+    "sass-loader": "^16.0.2",
     "shx": "^0.3.3",
-    "style-loader": "^3.3.1",
+    "style-loader": "^4.0.0",
     "typescript": "^4.8.4"
   },
   "scripts": {

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -52,6 +52,6 @@
     "loki": "^0.31.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "webpack": "^5.81.0"
+    "webpack": "^5.95.0"
   }
 }
diff --git a/packages/ui/.postcss-lint/postcss.config.js → packages/ui/.postcss-lint/postcss.config.mjs b/packages/ui/.postcss-lint/postcss.config.js → packages/ui/.postcss-lint/postcss.config.mjs
@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const doiuse = require('doiuse')
+import doiuse from 'doiuse'
+import stylelint from 'stylelint'
+import postcssReporter from 'postcss-reporter'
 
 const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Safari version', 'last 1 Edge version']
 
@@ -10,25 +11,25 @@ const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Saf
  * Postcss-cli does not allow config argument override, what it does
  * allow is specifying an alternate config path, hence this location
  */
-module.exports = {
+export default {
   syntax: 'postcss-scss',
   plugins: [
-    // eslint-disable-next-line
-    require('stylelint'),
+    stylelint,
     doiuse({
       browsers,
-      //These problems are taken case of by 'autoprefixer'
       ignore: [
         // Autoprefixer takes care of flex
         'flexbox',
         // The problem is "outline-offset", which doiuse can't detect
         'outline',
         // The problem is "vmax", which doiuse can' detect
         'viewport-units',
+        // Rules are not compatible with scss
+        'css-nesting',
+        'css-when-else',
       ],
-      ignoreFiles: ['**/node_modules/**/*.css', '**/node_modules/**/*.scss', '**/coverage/**/*', '**/lib/**/*'],
+      ignoreFiles: ['**/lib/**', '**/storybook-static/**', '**/node_modules/**/*.css', '**/node_modules/**/*.scss'],
     }),
-    // eslint-disable-next-line
-    require('postcss-reporter')({ throwError: true }),
+    postcssReporter({ throwError: true }),
   ],
 }
diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
@@ -1,8 +1,10 @@
+import { dirname, join } from 'path'
 const path = require('path')
 
 module.exports = {
-  stories: ['../**/*.stories.@(tsx|mdx)'],
+  stories: ['../**/*.@(mdx|stories.@(tsx))'],
   staticDirs: ['../assets', '../styles'],
+
   addons: [
     {
       name: '@storybook/preset-scss',
@@ -14,9 +16,12 @@ module.exports = {
         },
       },
     },
-    'storybook-addon-designs',
-    '@storybook/addon-docs',
+    getAbsolutePath('storybook-addon-designs'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
   ],
+
   webpackFinal: async (config) => {
     config.module.rules = [
       ...config.module.rules,
@@ -48,6 +53,7 @@ module.exports = {
 
     return config
   },
+
   typescript: {
     check: false,
     checkOptions: {},
@@ -57,7 +63,17 @@ module.exports = {
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },
-  core: {
-    builder: 'webpack5',
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
   },
 }
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
diff --git a/packages/ui/.stylelintignore b/packages/ui/.stylelintignore
@@ -1,3 +1,4 @@
 node_modules/
 coverage
-lib
+lib
+storybook-static
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -96,23 +96,23 @@
     "@types/use-persisted-state": "^0.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.1.2",
-    "doiuse": "^4.4.1",
+    "doiuse": "^6.0.3",
     "enzyme": "^3.11.0",
     "jest-axe": "^8.0.0",
-    "loki": "^0.34.0",
-    "postcss": "^8.4.23",
-    "postcss-cli": "^9.1.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-scss": "^4.0.6",
+    "loki": "^0.35.1",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-reporter": "^7.1.0",
+    "postcss-scss": "^4.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^4.6.0",
-    "webpack": "^5.81.0",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.7.0",
+    "webpack": "^5.95.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {

diff --git a/packages/ui/src/Alert.module.scss b/packages/ui/src/Alert.module.scss
@@ -124,6 +124,7 @@
 
         &:hover,
         &.hover {
+          /* doiuse-disable text-decoration */
           text-decoration: underline solid;
         }
 

diff --git a/packages/ui/src/AppSidebar/AppSidebar.module.scss b/packages/ui/src/AppSidebar/AppSidebar.module.scss
@@ -33,7 +33,7 @@ $offset: c.$grid * 4;
   .wrapper {
     width: 100%;
     height: 100%;
-    overflow-y: auto;
+    overflow: auto;
     overflow-x: hidden;
   }
 

diff --git a/packages/ui/src/Card.module.scss b/packages/ui/src/Card.module.scss
@@ -50,7 +50,7 @@
 
   .caption {
     display: flex;
-    margin: (-$padding) (-$padding) $padding (-$padding);
+    margin: (-$padding) (-$padding) $padding;
 
     & > * {
       flex: 1;

diff --git a/packages/ui/src/Link.module.scss b/packages/ui/src/Link.module.scss
@@ -16,6 +16,7 @@
   &.focus,
   &:active,
   &.active {
+    /* doiuse-disable text-decoration */
     text-decoration: underline solid;
     outline: transparent solid c.$outlineWidth;
   }

diff --git a/packages/ui/stylelint.config.js b/packages/ui/stylelint.config.js
@@ -1,12 +1,10 @@
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
+  extends: ['stylelint-config-standard'],
   plugins: [
     // SCSS rules set, need to be explicitly set in "rules"
     'stylelint-scss',
-    'stylelint-prettier',
   ],
   rules: {
-    'prettier/prettier': true,
     /*
      * CSS-modules rules (from stylelint-config-css-module)
      * Overrides of stylelint-config-standard for CSS modules
@@ -33,7 +31,7 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['value', 'extend', 'mixin', 'include', 'use', 'forward', 'each', 'if', 'function', 'return', 'for', 'else'],
+        ignoreAtRules: ['value', 'extend', 'mixin', 'include', 'use', 'forward', 'each', 'for', 'if', 'else', 'function', 'return'],
       },
     ],
     'comment-empty-line-before': null,
@@ -46,6 +44,17 @@ module.exports = {
     'keyframes-name-pattern': /[a-z][a-zA-Z]+/,
     'scss/no-global-function-names': null,
     'font-family-name-quotes': null,
+    // todo: after upgrading stylelint packages, we disable these rules to move on with less changes in the PR.
+    // in time we better remove these suppression and change to code to comply.
     'selector-class-pattern': null,
+    'declaration-block-no-redundant-longhand-properties': null,
+    'at-rule-empty-line-before': null,
+    'function-no-unknown': null,
+    'color-function-notation': null,
+    'alpha-value-notation': null,
+    'media-feature-range-notation': null,
+    'shorthand-property-no-redundant-values': null,
+    'annotation-no-unknown': null,
+    'media-query-no-invalid': null,
   },
 }