build(stylelint): Upgrade to stylelint@10.1.0 (#13638)

This upgrades stylelint to the latest version and fix our stylelint to use the `css-in-js` syntax

package.json

@@ -140,10 +140,10 @@
     "prettier": "1.16.4",
     "react-test-renderer": "16.7.0",
     "source-map-loader": "^0.2.4",
-    "stylelint": "9.1.3",
-    "stylelint-config-recommended": "^2.1.0",
+    "stylelint": "10.1.0",
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript-styled-plugin": "^0.14.0",
     "webpack-dev-server": "^3.1.10"
@@ -160,7 +160,7 @@
     "test-debug": "node --inspect-brk scripts/test.js --runInBand",
     "test-staged": "yarn test --findRelatedTests $(git diff --name-only --cached)",
     "lint": "node_modules/.bin/eslint tests/js src/sentry/static/sentry/app --ext .js,.jsx,.ts,.tsx",
-    "lint:css": "stylelint 'src/sentry/static/sentry/app/**/*.jsx'",
+    "lint:css": "yarn stylelint --syntax css-in-js 'src/sentry/static/sentry/app/**/*.jsx'",
     "dev": "(yarn check --verify-tree || yarn install --check-files) && sentry devserver",
     "dev-server": "webpack-dev-server",
     "storybook": "start-storybook -p 9001 -c .storybook",

src/sentry/static/sentry/app/components/forms/selectControl.jsx

@@ -127,6 +127,7 @@ const StyledSelect = styled(React.forwardRef(forwardRef))`
     }
   }
 
+  /* stylelint-disable-next-line no-descending-specificity */
   .Select.is-focused:not(.is-open) > .Select-control {
     border-color: ${p => p.theme.gray};
   }

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/dateRange/index.jsx

@@ -272,8 +272,6 @@ const StyledDateRangePicker = styled(DateRangePicker)`
   }
 
   .rdrDayStartOfMonth,
-  .rdrDayStartOfMonth,
-  .rdrDayStartOfWeek,
   .rdrDayStartOfWeek {
     .rdrInRange {
       border-top-left-radius: 0;
@@ -282,8 +280,6 @@ const StyledDateRangePicker = styled(DateRangePicker)`
   }
 
   .rdrDayEndOfMonth,
-  .rdrDayEndOfMonth,
-  .rdrDayEndOfWeek,
   .rdrDayEndOfWeek {
     .rdrInRange {
       border-top-right-radius: 0;
@@ -337,7 +333,7 @@ const StyledDateRangePicker = styled(DateRangePicker)`
 const TimeAndUtcPicker = styled('div')`
   display: flex;
   align-items: center;
-  padding: ${p => space(2)};
+  padding: ${space(2)};
   border-top: 1px solid ${p => p.theme.borderLight};
 `;
 

src/sentry/static/sentry/app/views/organizationEventsV2/modalPagination.jsx

@@ -98,7 +98,7 @@ const StyledLink = styled(Link, {shouldForwardProp: isPropValid})`
   ${p => (p.isLast ? '' : `border-right: 1px solid ${p.theme.borderDark};`)}
   ${p => (p.disabled ? 'pointer-events: none;' : '')}
 
-  @media(max-width: ${p => p.theme.breakpoints[0]}) {
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
     flex-grow: 1;
   }
 `;

src/sentry/static/sentry/app/views/organizationGroupDetails/groupMerged/mergedItem.jsx

@@ -157,12 +157,14 @@ const Controls = styled(({expanded: _expanded, ...props}) => (
   padding: ${space(0.5)} 0;
   ${p => p.expanded && `border-bottom: 1px solid ${p.theme.borderLight}`};
 
-  ${MergedGroup}:first-child & {
-    border-top: none;
-  }
-  ${MergedGroup}:last-child & {
-    border-top: none;
-    border-bottom: 1px solid ${p => p.theme.borderLight};
+  ${MergedGroup} {
+    &:first-child & {
+      border-top: none;
+    }
+    &:last-child & {
+      border-top: none;
+      border-bottom: 1px solid ${p => p.theme.borderLight};
+    }
   }
 `;
 

stylelint.config.js

@@ -1,10 +1,19 @@
 /*eslint-env node*/
 module.exports = {
-  processors: ['stylelint-processor-styled-components'],
-  extends: ['stylelint-config-recommended', 'stylelint-config-styled-components'],
+  extends: [
+    'stylelint-config-recommended',
+    'stylelint-config-styled-components',
+    'stylelint-config-prettier',
+  ],
   rules: {
     'declaration-colon-newline-after': null,
     'block-no-empty': null,
-    'selector-type-no-unknown': [true, {ignoreTypes: ['$dummyValue']}],
+
+    // This is formatting related
+    'declaration-bang-space-before': null,
+
+    // Doesn't work when we use values from theme
+    'unit-no-unknown': null,
+    'font-family-no-missing-generic-family-keyword': null,
   },
 };