build(stylelint): Fix and upgrade `stylelint` (#18210)

This was not actually working at all, it needs the styled component processor to extract css for stylelint. Updated some components to help the processor. When we use interpolated values e.g. when using a styled component as a selector, we need to help the stylelint processor by telling it what kind of value it is looking at. See https://styled-components.com/docs/tooling\#interpolation-tagging for more information.

package.json

@@ -163,12 +163,13 @@
     "react-test-renderer": "16.12.0",
     "source-map-loader": "^0.2.4",
     "speed-measure-webpack-plugin": "^1.3.1",
-    "stylelint": "10.1.0",
-    "stylelint-config-prettier": "^5.2.0",
-    "stylelint-config-recommended": "^2.2.0",
+    "stylelint": "13.3.1",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript-styled-plugin": "^0.14.0",
+    "typescript-styled-plugin": "^0.15.0",
     "webpack-dev-server": "3.10.3"
   },
   "optionalDependencies": {
@@ -186,7 +187,7 @@
     "test-debug": "node --inspect-brk scripts/test.js --runInBand",
     "test-staged": "yarn test --findRelatedTests $(git diff --name-only --cached)",
     "lint": "yarn eslint tests/js src/sentry/static/sentry/app --ext .js,.jsx,.ts,.tsx",
-    "lint:css": "yarn stylelint --syntax css-in-js 'src/sentry/static/sentry/app/**/*.jsx'",
+    "lint:css": "yarn stylelint 'src/sentry/static/sentry/app/**/*.[jt]sx'",
     "dev": "(yarn check --verify-tree || yarn install --check-files) && sentry devserver",
     "dev-server": "webpack-dev-server",
     "dev-acceptance": "NO_DEV_SERVER=1 NODE_ENV=development yarn webpack --watch",

src/sentry/static/sentry/app/components/dropdownBubble.tsx

@@ -123,7 +123,7 @@ const DropdownBubble = styled('div')<Params>`
    * below dropdown actor button's zindex */
   z-index: ${p => p.theme.zIndex.dropdownAutocomplete.menu};
 
-  ${SettingsHeader} & {
+  ${/* sc-selector */ SettingsHeader} & {
     z-index: ${p => p.theme.zIndex.dropdownAutocomplete.menu + 2};
   }
 `;

src/sentry/static/sentry/app/components/events/eventEntries.jsx

@@ -264,10 +264,10 @@ class EventEntries extends React.Component {
 }
 
 const BorderlessEventEntries = styled(EventEntries)`
-  & ${DataSection} {
+  & ${/* sc-selector */ DataSection} {
     padding: ${space(3)} 0 0 0;
   }
-  & ${DataSection}:first-child {
+  & ${/* sc-selector */ DataSection}:first-child {
     padding-top: 0;
     border-top: 0;
   }

src/sentry/static/sentry/app/components/events/styles.tsx

@@ -36,7 +36,11 @@ export const BannerContainer = styled('div')<BannerProps>`
   border-bottom: 1px solid ${p => COLORS[p.priority].border};
 
   /* Muted box & processing errors are in different parts of the DOM */
-  & + ${DataSection}:first-child, & + div > ${DataSection}:first-child {
+  &
+    + ${/* sc-selector */ DataSection}:first-child,
+    &
+    + div
+    > ${/* sc-selector */ DataSection}:first-child {
     border-top: 0;
   }
 `;

src/sentry/static/sentry/app/components/hovercard.jsx

@@ -272,7 +272,6 @@ const HovercardArrow = styled('span')`
   &::before {
     top: 1px;
     border: 10px solid transparent;
-    /* stylelint-disable-next-line property-no-unknown */
     border-${getTipDirection}-color: ${p => p.tipColor || p.theme.borderLight};
 
     ${p => (p.placement === 'bottom' ? 'top: -1px' : '')};
@@ -281,7 +280,6 @@ const HovercardArrow = styled('span')`
   }
   &::after {
     border: 10px solid transparent;
-    /* stylelint-disable-next-line property-no-unknown */
     border-${getTipDirection}-color: ${p => p.tipColor || getTipColor(p)};
   }
 `;

src/sentry/static/sentry/app/components/panels/panelTable.tsx

@@ -133,7 +133,7 @@ const Wrapper = styled(Panel, {
     }
   }
 
-  > ${TableEmptyStateWarning}, > ${LoadingWrapper} {
+  > ${/* sc-selector */ TableEmptyStateWarning}, > ${/* sc-selector */ LoadingWrapper} {
     border: none;
     grid-column: auto / span ${p => p.columns};
   }

src/sentry/static/sentry/app/components/projectSelector.jsx

@@ -511,7 +511,10 @@ const BadgeAndActionsWrapper = styled('div')`
   border-style: solid;
   border-width: 1px 0;
   border-color: transparent;
-  &:hover ${StyledBookmarkStar}, &:hover ${SettingsIconLink} {
+  &:hover
+    ${/* sc-selector */ StyledBookmarkStar},
+    &:hover
+    ${/* sc-selector */ SettingsIconLink} {
     opacity: 1;
   }
 `;

src/sentry/static/sentry/app/components/search/searchResult.jsx

@@ -157,9 +157,7 @@ class SearchResult extends React.Component {
 export default withRouter(SearchResult);
 
 // This is for tests
-const SearchTitle = styled('span')`
-  /* stylelint-disable-next-line no-empty-block */
-`;
+const SearchTitle = styled('span')``;
 
 const SearchDetail = styled('div')`
   font-size: 0.8em;
@@ -188,7 +186,7 @@ const ResultTypeIcon = styled(InlineSvg)`
   font-size: 1.2em;
   flex-shrink: 0;
 
-  ${SettingsSearch} & {
+  ${/* sc-selector*/ SettingsSearch} & {
     color: inherit;
   }
 `;

src/sentry/static/sentry/app/components/text.tsx

@@ -7,7 +7,7 @@ import Panel from 'app/components/panels/panel';
 const Text = styled('div')`
   ${textStyles};
 
-  ${Panel} & {
+  ${/* sc-selector */ Panel} & {
     padding-left: ${space(2)};
     padding-right: ${space(2)};
 

src/sentry/static/sentry/app/views/eventsV2/eventDetails/content.tsx

@@ -361,10 +361,10 @@ const MetadataJSON = styled(ExternalLink)`
 `;
 
 const StyledEventEntries = styled(EventEntries)`
-  & ${DataSection} {
+  & ${/* sc-selector */ DataSection} {
     padding: ${space(3)} 0 0 0;
   }
-  & ${DataSection}:first-child {
+  & ${/* sc-selector */ DataSection}:first-child {
     padding-top: 0;
     border-top: none;
   }