chore(deps): update dependency @zendeskgarden/stylelint-config to v22 (#1879)

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

Author: renovate[bot]

package-lock.json

@@ -65,7 +65,7 @@
     "@zendeskgarden/css-bedrock": "9.1.1",
     "@zendeskgarden/eslint-config": "40.0.0",
     "@zendeskgarden/scripts": "2.4.1",
-    "@zendeskgarden/stylelint-config": "21.0.0",
+    "@zendeskgarden/stylelint-config": "22.0.0",
     "@zendeskgarden/svg-icons": "7.2.0",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-react-remove-properties": "0.3.0",

package.json

@@ -33,7 +33,6 @@ const sizeStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
 
   return css`
     margin-bottom: ${props.$isHorizontal && `${props.theme.space.base * 2}px`};
-    /* stylelint-disable-next-line property-no-unknown */
     margin-${props.theme.rtl ? 'left' : 'right'}: ${
       !props.$isHorizontal && `${props.theme.space.base * 3}px`
     };

packages/accordions/src/styled/stepper/StyledIcon.ts

@@ -33,7 +33,6 @@ export const StyledStep = styled.li.attrs<IStyledStep>({
   }
 
   &:not(:last-of-type) ${StyledContent} {
-    /* stylelint-disable-next-line property-no-unknown */
     border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.borders.sm};
     border-color: ${({ theme }) => getColor({ theme, variable: 'border.default' })};
   }

packages/accordions/src/styled/stepper/StyledStep.ts

@@ -316,7 +316,6 @@ const groupStyles = ({
 
   return css`
     position: relative;
-    /* stylelint-disable value-keyword-case */
     /* prettier-ignore */
     transition:
       border-color 0.1s ease-in-out,
@@ -326,7 +325,6 @@ const groupStyles = ({
       margin-${startPosition} 0.1s ease-in-out,
       outline-color 0.1s ease-in-out,
       z-index 0.25s ease-in-out;
-    /* stylelint-enable value-keyword-case */
     border: ${borders.sm} ${borderColor}; /* [2] */
 
     ${SELECTOR_FOCUS_VISIBLE} {
@@ -345,7 +343,6 @@ const groupStyles = ({
       background-color: ${disabledBackgroundColor}; /* [1] */
     }
 
-    /* stylelint-disable property-no-unknown, property-case */
     &:not(:first-of-type) {
       margin-${startPosition}: ${marginDisplacement};
     }
@@ -367,17 +364,14 @@ const groupStyles = ({
       border-top-${startPosition}-radius: 0;
       border-bottom-${startPosition}-radius: 0;
     }
-    /* stylelint-enable property-no-unknown, property-case */
 
-    /* stylelint-disable property-no-unknown, selector-max-specificity */
     &:first-of-type:not(:last-of-type) ${StyledIcon} {
       margin-${endPosition}: ${iconMarginDisplacement};
     }
 
     &:last-of-type:not(:first-of-type) ${StyledIcon} {
       margin-${startPosition}: ${iconMarginDisplacement};
     }
-    /* stylelint-enable property-no-unknown, selector-max-specificity */
   `;
 };
 
@@ -506,15 +500,13 @@ export const StyledButton = styled.button.attrs<IStyledButtonProps>(props => ({
     text-decoration: ${props => props.isLink && 'none'};
   }
 
-  /* stylelint-disable */
   & ${StyledIcon} {
     ${props => iconStyles(props)}
   }
 
   ${StyledSplitButton} && {
     ${props => groupStyles(props)}
   }
-  /* stylelint-enable */
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)}
 `;

packages/buttons/src/styled/StyledButton.ts

@@ -84,7 +84,6 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
     top: ${top};
     border: ${border};
     padding: ${padding};
-    /* stylelint-disable-next-line property-no-unknown */
     padding-${theme.rtl ? 'right' : 'left'}: ${paddingStart};
     line-height: ${lineHeight};
     font-size: ${fontSize};

packages/chrome/src/styled/StyledSkipNav.ts

@@ -16,7 +16,6 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
   const size = theme.iconSizes.md;
 
   return css`
-    /* stylelint-disable-next-line property-no-unknown */
     margin-${theme.rtl ? 'left' : 'right'}: ${margin};
     width: ${size};
     height: ${size};

packages/chrome/src/styled/StyledSkipNavIcon.ts

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

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

@@ -20,7 +20,6 @@ export const StyledHueRange = styled(StyledRange as 'input').attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledRangeProps>`
-  /* stylelint-disable */
   background: linear-gradient(
       to ${props => (props.theme.rtl ? 'left' : 'right')},
       #f00 0%,

packages/colorpickers/src/styled/ColorPicker/StyledHueRange.ts

@@ -45,7 +45,6 @@ export const StyledSliders = styled.div.attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledSlidersProps>`
   position: relative;
-  /* stylelint-disable property-no-unknown */
   margin-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 2}px;
   width: 100%;