@atlaskit/eslint-plugin-design-system 8.32.0 → 8.32.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.32.2
+
+### Patch Changes
+
+- [#77485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77485) [`887b1a3193ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/887b1a3193ce) - For `no-styled-tagged-template-expression`, do not autofix component selectors for `styled-components` implementations
+
+## 8.32.1
+
+### Patch Changes
+
+- [#77519](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77519) [`6507c28d3c88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6507c28d3c88) - Refactor implementation of `no-css-tagged-template-expression`. No change to functionality expected.
+
 ## 8.32.0
 
 ### Minor Changes

package/constellation/no-styled-tagged-template-expression/usage.mdx

@@ -86,3 +86,45 @@ export const Component = styled.div``;
 ## Limitations
 
 - Comments are not fixable.
+- Component selectors are not fixable for `styled-components`.
+
+Do not migrate to this object syntax manually, it is invalid `styled-components`.
+
+```tsx
+const Button = styled.button``;
+const Wrapper = styled.div({
+  color: 'red',
+  [`${Button}`]: {
+    color: 'blue',
+  },
+});
+<Wrapper><Button /><Wrapper>
+```
+
+Instead, style the button directly—make it clear that you're styling that button.
+
+```tsx
+const buttonStyles = css({ color: 'blue' });
+const Wrapper = styled.div({
+  color: 'red',
+});
+
+<Wrapper>
+  <button css={buttonStyles} />
+</Wrapper>;
+```
+
+If that's not feasible, you can use data attributes, but these will result in failing the UI Styling Standard around nested styles, pushing the error down the road.
+
+```tsx
+const Wrapper = styled.div({
+  color: 'red',
+  '[data-component-selector="my.button"]': {
+    color: 'blue',
+  },
+});
+
+<Wrapper>
+  <button data-component-selector="my.button" />
+</Wrapper>;
+```