chore(deps): update dependency @zendeskgarden/stylelint-config to v20 (#1578)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jonathan Zempel <[email protected]>

Author: renovate[bot]

.stylelintrc

@@ -1,15 +1,17 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": ["@zendeskgarden/stylelint-config", "stylelint-config-styled-components"],
+  "extends": ["@zendeskgarden/stylelint-config"],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
+    "block-no-empty": null,
     "declaration-colon-newline-after": null,
     "declaration-empty-line-before": null,
     "keyframes-name-pattern": null,
-    "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
-    "block-no-empty": null,
+    "media-query-no-invalid": null,
     "number-leading-zero": null,
     "selector-type-case": null,
-    "selector-type-no-unknown": null
+    "selector-type-no-unknown": null,
+    "time-min-milliseconds": [100, { "ignore": ["delay"] }],
+    "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }]
   },
   "ignoreFiles": ["packages/**/*.spec.{js,ts,tsx}", "packages/**/dist/**"]
 }

package.json

@@ -64,7 +64,7 @@
     "@zendeskgarden/css-bedrock": "9.0.0",
     "@zendeskgarden/eslint-config": "34.0.0",
     "@zendeskgarden/scripts": "1.4.1",
-    "@zendeskgarden/stylelint-config": "16.0.1",
+    "@zendeskgarden/stylelint-config": "20.0.0",
     "@zendeskgarden/svg-icons": "6.33.0",
     "acorn-jsx": "5.3.2",
     "babel-core": "7.0.0-bridge.0",
@@ -102,6 +102,7 @@
     "mockdate": "3.0.5",
     "ora": "5.4.1",
     "pluralize": "8.0.0",
+    "postcss-styled-syntax": "0.4.0",
     "prettier": "2.8.8",
     "prettier-package-json": "2.8.0",
     "qs": "6.11.2",
@@ -119,10 +120,8 @@
     "rollup-plugin-typescript2": "0.34.1",
     "storybook": "7.0.20",
     "styled-components": "5.3.11",
-    "stylelint": "13.13.1",
-    "stylelint-config-styled-components": "0.1.1",
+    "stylelint": "15.10.2",
     "stylelint-order": "6.0.3",
-    "stylelint-processor-styled-components": "1.10.0",
     "temp": "0.9.4",
     "typescript": "5.0.4",
     "webpack": "5.86.0"

packages/accordions/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 34406,
-    "minified": 25373,
-    "gzipped": 5671,
+    "bundled": 34407,
+    "minified": 25374,
+    "gzipped": 5670,
     "treeshaked": {
       "rollup": {
-        "code": 19685,
+        "code": 19686,
         "import_statements": 683
       },
       "webpack": {
-        "code": 21848
+        "code": 21849
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 37237,
-    "minified": 27955,
-    "gzipped": 5905
+    "bundled": 37238,
+    "minified": 27956,
+    "gzipped": 5904
   }
 }

packages/accordions/src/styled/timeline/StyledItem.spec.tsx

@@ -20,15 +20,15 @@ describe('StyledItem', () => {
     });
 
     expect(item).not.toHaveStyleRule('flex', '1', {
-      modifier: '&:before'
+      modifier: '&::before'
     });
 
     expect(item).not.toHaveStyleRule('content', "''", {
-      modifier: '&:before'
+      modifier: '&::before'
     });
 
     expect(item).not.toHaveStyleRule('padding', '16px', {
-      modifier: '&:before'
+      modifier: '&::before'
     });
   });
 
@@ -42,15 +42,15 @@ describe('StyledItem', () => {
     });
 
     expect(item).toHaveStyleRule('flex', '1', {
-      modifier: '&:before'
+      modifier: '&::before'
     });
 
     expect(item).toHaveStyleRule('content', "''", {
-      modifier: '&:before'
+      modifier: '&::before'
     });
 
     expect(item).toHaveStyleRule('padding', '16px', {
-      modifier: '&:before'
+      modifier: '&::before'
     });
   });
 });

packages/accordions/src/styled/timeline/StyledItem.ts

@@ -41,10 +41,10 @@ export const StyledTimelineItem = styled.li.attrs({
     !props.hasOppositeContent &&
     props.isAlternate &&
     css`
-      &:before {
+      &::before {
         flex: 1;
-        content: '';
         padding: ${props.theme.space.base * 4}px;
+        content: '';
       }
     `}
 

packages/chrome/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 55590,
-    "minified": 42394,
-    "gzipped": 9079,
+    "bundled": 55538,
+    "minified": 42377,
+    "gzipped": 9070,
     "treeshaked": {
       "rollup": {
-        "code": 31992,
+        "code": 31977,
         "import_statements": 762
       },
       "webpack": {
-        "code": 35135
+        "code": 35113
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 60742,
-    "minified": 47280,
-    "gzipped": 9446
+    "bundled": 60683,
+    "minified": 47256,
+    "gzipped": 9438
   }
 }

packages/chrome/src/styled/subnav/StyledSubNavItemIcon.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { HTMLAttributes } from 'react';
-import styled, { ThemeProps, css } from 'styled-components';
+import styled, { ThemeProps } from 'styled-components';
 import ChevronDownStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-down-stroke.svg';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { IStyledSubNavItemHeaderProps } from './StyledSubNavItemHeader';
@@ -49,13 +49,7 @@ export const StyledSubNavItemIconWrapper = styled.div.attrs({
   height: ${getSubNavItemHeight};
 
   ${StyledSubNavItemIcon} {
-    transform: ${props => {
-      if (props.isExpanded) {
-        return css`rotate(${props.theme.rtl && '-'}180deg)`;
-      }
-
-      return undefined;
-    }};
+    transform: ${props => props.isExpanded && `rotate(${props.theme.rtl ? '-' : ''}180deg)`};
     transition: transform 0.25s ease-in-out;
   }
 

packages/colorpickers/src/styled/Colorpicker/StyledAlphaRange.ts

@@ -36,7 +36,9 @@ export const StyledAlphaRange = styled(StyledRange as 'input').attrs<IRGBColor>(
   },
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-}))<IRGBColor>``;
+}))<IRGBColor>`
+  /* stylelint-disable no-empty-source */
+`;
 
 StyledAlphaRange.defaultProps = {
   theme: DEFAULT_THEME

packages/colorpickers/src/styled/Colorpicker/StyledPreview.ts

@@ -39,7 +39,7 @@ export const StyledPreview = styled.div.attrs<IStyledColorPreviewProps>(props =>
 }))<IStyledColorPreviewProps>`
   flex-shrink: 0;
   border-radius: ${props => props.theme.borderRadii.md};
-  /* stylelint-disable-next-line color-function-notation */
+  /* stylelint-disable color-function-notation */
   box-shadow: inset 0 0 0 ${props => props.theme.borderWidths.sm}
     ${props => rgba(props.theme.palette.black as string, 0.19)};
   width: ${props => props.theme.space.base * (props.isOpaque ? 6 : 8)}px;

packages/colorpickers/src/styled/ColorpickerDialog/StyledButtonPreview.ts

@@ -45,7 +45,7 @@ export const StyledButtonPreview = styled.span.attrs<IStyleButtonPreviewProps>(p
   display: inline-block;
   bottom: ${props => props.theme.space.base}px;
   border-radius: ${props => props.theme.borderRadii.sm};
-  /* stylelint-disable-next-line color-function-notation */
+  /* stylelint-disable color-function-notation */
   box-shadow: inset 0 0 0 ${props => props.theme.borderWidths.sm}
     ${props => rgba(props.theme.palette.black as string, 0.19)};
   width: ${props => props.theme.space.base * 5}px;