feat(lint): add no-styled-core rule

Author: natemoo-re

eslint.config.ts

@@ -462,6 +462,7 @@ export default typescript.config([
     plugins: {'@sentry/scraps': sentryScrapsPlugin},
     rules: {
       '@sentry/scraps/no-core-import': 'error',
+      '@sentry/scraps/no-styled-core': 'error',
       '@sentry/scraps/no-token-import': 'error',
       '@sentry/scraps/use-semantic-token': [
         'error',

static/eslint/eslintPluginScraps/src/rules/index.ts

@@ -1,10 +1,12 @@
 import {noCoreImport} from './no-core-import';
+import {noStyledCore} from './no-styled-core';
 import {noTokenImport} from './no-token-import';
 import {restrictJsxSlotChildren} from './restrict-jsx-slot-children';
 import {useSemanticToken} from './use-semantic-token';
 
 export const rules = {
   'no-core-import': noCoreImport,
+  'no-styled-core': noStyledCore,
   'no-token-import': noTokenImport,
   'restrict-jsx-slot-children': restrictJsxSlotChildren,
   'use-semantic-token': useSemanticToken,

static/eslint/eslintPluginScraps/src/rules/no-styled-core.spec.ts

@@ -0,0 +1,128 @@
+import {RuleTester} from '@typescript-eslint/rule-tester';
+
+import {noStyledCore} from './no-styled-core';
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-styled-core', noStyledCore, {
+  valid: [
+    {
+      name: 'styled HTML element is allowed',
+      code: `
+        import styled from '@emotion/styled';
+        const Wrapper = styled('div')\`color: red;\`;
+      `,
+    },
+    {
+      name: 'styled.element shorthand is allowed',
+      code: `
+        import styled from '@emotion/styled';
+        const Wrapper = styled.div\`color: red;\`;
+      `,
+    },
+    {
+      name: 'styled with non-scraps component is allowed',
+      code: `
+        import styled from '@emotion/styled';
+        import {SomeComponent} from 'other-lib';
+        const Wrapper = styled(SomeComponent)\`color: red;\`;
+      `,
+    },
+    {
+      name: 'styled with local component is allowed',
+      code: `
+        import styled from '@emotion/styled';
+        function MyComponent() { return null; }
+        const Wrapper = styled(MyComponent)\`color: red;\`;
+      `,
+    },
+    {
+      name: 'components option filters enforcement',
+      code: `
+        import styled from '@emotion/styled';
+        import {Button} from '@sentry/scraps/button';
+        const StyledButton = styled(Button)\`color: red;\`;
+      `,
+      options: [{components: ['Flex']}],
+    },
+  ],
+  invalid: [
+    {
+      name: 'styled(Component)`` with scraps import',
+      code: `
+        import styled from '@emotion/styled';
+        import {Button} from '@sentry/scraps/button';
+        const StyledButton = styled(Button)\`color: red;\`;
+      `,
+      errors: [
+        {
+          messageId: 'forbidden',
+          data: {name: 'Button', source: '@sentry/scraps/button'},
+        },
+      ],
+    },
+    {
+      name: 'styled(Component)({}) object syntax',
+      code: `
+        import styled from '@emotion/styled';
+        import {Flex} from '@sentry/scraps/layout';
+        const StyledFlex = styled(Flex)({display: 'block'});
+      `,
+      errors: [
+        {
+          messageId: 'forbidden',
+          data: {name: 'Flex', source: '@sentry/scraps/layout'},
+        },
+      ],
+    },
+    {
+      name: 'aliased import is still caught',
+      code: `
+        import styled from '@emotion/styled';
+        import {Button as Btn} from '@sentry/scraps/button';
+        const StyledBtn = styled(Btn)\`color: red;\`;
+      `,
+      errors: [
+        {
+          messageId: 'forbidden',
+          data: {name: 'Btn', source: '@sentry/scraps/button'},
+        },
+      ],
+    },
+    {
+      name: 'components option matches listed component',
+      code: `
+        import styled from '@emotion/styled';
+        import {Button} from '@sentry/scraps/button';
+        const StyledButton = styled(Button)\`color: red;\`;
+      `,
+      options: [{components: ['Button']}],
+      errors: [
+        {
+          messageId: 'forbidden',
+          data: {name: 'Button', source: '@sentry/scraps/button'},
+        },
+      ],
+    },
+    {
+      name: 'multiple scraps components in one file',
+      code: `
+        import styled from '@emotion/styled';
+        import {Text} from '@sentry/scraps/text';
+        import {Container} from '@sentry/scraps/layout';
+        const StyledText = styled(Text)\`color: red;\`;
+        const StyledContainer = styled(Container)\`padding: 8px;\`;
+      `,
+      errors: [
+        {
+          messageId: 'forbidden',
+          data: {name: 'Text', source: '@sentry/scraps/text'},
+        },
+        {
+          messageId: 'forbidden',
+          data: {name: 'Container', source: '@sentry/scraps/layout'},
+        },
+      ],
+    },
+  ],
+});

static/eslint/eslintPluginScraps/src/rules/no-styled-core.ts

@@ -0,0 +1,74 @@
+/**
+ * ESLint rule: no-styled-core
+ *
+ * Disallows wrapping @sentry/scraps components with styled().
+ * Use the component's props API instead.
+ */
+import type {TSESTree} from '@typescript-eslint/utils';
+import {ESLintUtils} from '@typescript-eslint/utils';
+
+import {createImportTracker} from '../ast/tracker/imports';
+import {getStyledCallInfo} from '../ast/utils/styled';
+
+interface Options {
+  components?: string[];
+}
+
+export const noStyledCore = ESLintUtils.RuleCreator.withoutDocs<[Options], 'forbidden'>({
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow wrapping @sentry/scraps components with styled(). Use the component props API instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          components: {
+            type: 'array',
+            items: {type: 'string'},
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      forbidden:
+        "Do not use `styled()` with core component `{{name}}` from `{{source}}`. Use the component's props API instead.",
+    },
+  },
+  defaultOptions: [{}],
+  create(context, [options = {}]) {
+    const importTracker = createImportTracker();
+    const componentSet = options.components ? new Set(options.components) : null;
+
+    function check(node: TSESTree.TaggedTemplateExpression | TSESTree.CallExpression) {
+      const info = getStyledCallInfo(node);
+      if (info?.kind !== 'component') {
+        return;
+      }
+
+      const resolved = importTracker.resolve(info.name);
+      if (!resolved?.source.startsWith('@sentry/scraps/')) {
+        return;
+      }
+
+      if (componentSet && !componentSet.has(resolved.imported)) {
+        return;
+      }
+
+      context.report({
+        node: info.tag,
+        messageId: 'forbidden',
+        data: {name: info.name, source: resolved.source},
+      });
+    }
+
+    return {
+      ...importTracker.visitors,
+      TaggedTemplateExpression: check,
+      CallExpression: check,
+    };
+  },
+});