fix(deps): update stylelint and related deps to v16 (#17770)

* ci: stylelint16_upgrade

* fix: dedupe changes

* fix: updates to stylelint16

* refactor: added old rules back

* refactor: revert rules

* fix: updates SCSS files &  migrate to Stylelint 16.0.0

* refactor: null check

* chore: yarn dedupe changes

* refactor: refined package.json, updated rules object

* refactor: cleaned comments & package.json

* refactor: cleaned rules object

.stylelintignore

@@ -9,6 +9,7 @@
 **/packages/colors/**/*.scss
 **/packages/elements/scss/**/*.scss
 **/packages/themes/**/*.scss
+**/packages/web-components/scss/**/*.scss
 
 # packages/components
 packages/components/demo/**

config/eslint-config-carbon/rules/best-practices.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-module.exports = {
+export default {
   rules: {
     // @see https://eslint.org/docs/rules/curly
     curly: 'error',

config/stylelint-config-carbon/index.js

@@ -7,17 +7,16 @@
 
 'use strict';
 
-module.exports = {
+export default {
   extends: [
-    require.resolve('stylelint-config-standard'),
-    require.resolve('stylelint-no-unsupported-browser-features'),
-    require.resolve('stylelint-config-idiomatic-order'),
-    require.resolve('stylelint-config-standard-scss'),
-    require.resolve('./rules/possible-errors'),
-    require.resolve('./rules/limit-language-features'),
-    require.resolve('./rules/stylistic-issues'),
-    require.resolve('./plugins/a11y'),
-    require.resolve('./plugins/prettier'),
-    require.resolve('./plugins/scss'),
+    'stylelint-config-standard',
+    'stylelint-no-unsupported-browser-features',
+    'stylelint-config-idiomatic-order',
+    'stylelint-config-standard-scss',
+    './rules/possible-errors',
+    './rules/limit-language-features',
+    './rules/stylistic-issues',
+    './plugins/a11y',
+    './plugins/scss',
   ],
 };

config/stylelint-config-carbon/package.json

@@ -3,6 +3,7 @@
   "description": "Stylelint configuration for Carbon",
   "version": "1.19.0",
   "license": "Apache-2.0",
+  "type": "module",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -24,22 +25,21 @@
     "provenance": true
   },
   "peerDependencies": {
-    "stylelint": "^15.0.0"
+    "stylelint": "^16.0.0"
   },
   "dependencies": {
-    "stylelint-a11y": "^1.2.3",
+    "@double-great/stylelint-a11y": "^3.0.2",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^11.0.0",
-    "stylelint-no-unsupported-browser-features": "^7.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.0",
-    "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^4.1.0",
+    "stylelint-scss": "^6.2.1",
     "stylelint-use-logical": "^2.1.0"
   },
   "devDependencies": {
     "prettier": "^2.8.8",
-    "stylelint": "^15.0.0"
+    "stylelint": "^16.0.0"
   }
 }

config/stylelint-config-carbon/plugins/a11y.js

@@ -7,8 +7,8 @@
 
 'use strict';
 
-module.exports = {
-  plugins: ['stylelint-a11y'],
+export default {
+  plugins: ['@double-great/stylelint-a11y'],
   rules: {
     'a11y/media-prefers-reduced-motion': true,
   },

config/stylelint-config-carbon/plugins/prettier.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-module.exports = {
+export default {
   extends: ['stylelint-config-prettier'],
   plugins: ['stylelint-prettier'],
   rules: {

config/stylelint-config-carbon/plugins/scss.js

@@ -9,7 +9,7 @@
 
 const OFF = null;
 
-module.exports = {
+export default {
   plugins: ['stylelint-scss', 'stylelint-use-logical'],
   rules: {
     // @-else

config/stylelint-config-carbon/rules/limit-language-features.js

@@ -9,7 +9,7 @@
 
 const OFF = null;
 
-module.exports = {
+export default {
   rules: {
     // Color
     // Require (where possible) or disallow named colors.
@@ -111,7 +111,7 @@ module.exports = {
     // Limit the number of compound selectors in a selector.
     'selector-max-compound-selectors': OFF,
     // Limit the number of adjacent empty lines within selectors.
-    'selector-max-empty-lines': OFF,
+    // 'selector-max-empty-lines': OFF,
     // Limit the number of id selectors in a selector.
     'selector-max-id': OFF,
     // Limit the specificity of selectors.

config/stylelint-config-carbon/rules/possible-errors.js

@@ -9,7 +9,7 @@
 
 const OFF = null;
 
-module.exports = {
+export default {
   rules: {
     // Color
     'color-no-invalid-hex': true,
@@ -65,7 +65,7 @@ module.exports = {
     'no-duplicate-at-import-rules': true,
     'no-duplicate-selectors': true,
     'no-empty-source': true,
-    'no-extra-semicolons': true,
+    // 'no-extra-semicolons': true,
     // Doesn't trigger when using a preprocessor that allows double slash
     // comments
     'no-invalid-double-slash-comments': true,