feat: no-token-import rule

config/tsconfig.base.json

@@ -117,6 +117,6 @@
       }
     ]
   },
-  "include": ["../static/app", "../static/gsApp", "../tests/js"],
+  "include": ["../static/app", "../static/gsApp", "../tests/js", "../static/eslint"],
   "exclude": ["../node_modules"]
 }

eslint.config.mjs

@@ -33,6 +33,8 @@
 import invariant from 'invariant';
 import typescript from 'typescript-eslint';
 
+import * as sentryScrapsPlugin from './static/eslint/eslintPluginScraps/index.mjs';
+
 invariant(react.configs.flat, 'For typescript');
 invariant(react.configs.flat.recommended, 'For typescript');
 invariant(react.configs.flat['jsx-runtime'], 'For typescript');
@@ -417,6 +419,13 @@
       'import/no-unresolved': 'off', // Disabled in favor of typescript-eslint
     },
   },
+  {
+    name: 'plugin/@sentry/scraps',
+    plugins: {'@sentry/scraps': sentryScrapsPlugin},
+    rules: {
+      '@sentry/scraps/no-token-import': 'error',
+    },
+  },
   {
     name: 'plugin/no-relative-import-paths',
     // https://github.com/MelvinVermeer/eslint-plugin-no-relative-import-paths?tab=readme-ov-file#rule-options
@@ -767,6 +776,20 @@
       'import/no-nodejs-modules': 'off',
     },
   },
+  {
+    name: 'eslint',
+    files: ['static/eslint/**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+
+    rules: {
+      'no-console': 'off',
+      'import/no-nodejs-modules': 'off',
+    },
+  },
   {
     name: 'files/scripts',
     files: ['scripts/**/*.{js,ts}', 'tests/js/test-balancer/index.js'],
@@ -1065,6 +1088,11 @@
           type: 'scripts',
           pattern: 'scripts',
         },
+        // --- eslint ---
+        {
+          type: 'eslint',
+          pattern: 'static/eslint',
+        },
       ],
     },
     rules: {

jest.config.ts

@@ -303,6 +303,7 @@ const config: Config.InitialOptions = {
   transform: {
     '^.+\\.jsx?$': ['babel-jest', babelConfig as any],
     '^.+\\.tsx?$': ['babel-jest', babelConfig as any],
+    '^.+\\.mjs?$': ['babel-jest', babelConfig as any],
     '^.+\\.pegjs?$': '<rootDir>/tests/js/jest-pegjs-transform.js',
   },
   transformIgnorePatterns: [

knip.config.ts

@@ -49,6 +49,7 @@ const config: KnipConfig = {
     ...productionEntryPoints.map(entry => `${entry}!`),
     ...testingEntryPoints,
     ...storyBookEntryPoints,
+    'static/eslint/**/index.mjs',
   ],
   project: [
     'static/**/*.{js,mjs,ts,tsx}!',
@@ -61,6 +62,8 @@ const config: KnipConfig = {
     // helper files for stories - it's fine that they are only used in tests
     '!static/app/**/__stories__/*.{js,mjs,ts,tsx}!',
     '!static/app/stories/**/*.{js,mjs,ts,tsx}!',
+    // ignore eslint plugins in production
+    '!static/eslint/**/*.mjs!',
     // TEMPORARY! Abdullah Khan: WILL BE REMOVING IN STACKED PRs. Trying to merge PRs in smaller batches.
     '!static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/**/*.{js,mjs,ts,tsx}!',
   ],

static/eslint/eslintPluginScraps/index.mjs

@@ -0,0 +1,5 @@
+import noTokenImport from './no-token-import.mjs';
+
+export const rules = {
+  'no-token-import': noTokenImport,
+};

static/eslint/eslintPluginScraps/no-token-import.mjs

@@ -0,0 +1,52 @@
+const TOKEN_PATH = 'utils/theme/scraps';
+const EXCEPT_DIR_NAME = 'static/app/utils/theme';
+
+/**
+ *
+ * @param {unknown} importPath
+ * @returns {boolean}
+ */
+function isForbiddenImportPath(importPath) {
+  if (typeof importPath !== 'string') return false;
+
+  return importPath.includes(TOKEN_PATH);
+}
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const noTokenImport = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Disallow imports from "${TOKEN_PATH}" except within a directory named "${EXCEPT_DIR_NAME}".`,
+      recommended: false,
+    },
+    schema: [],
+    messages: {
+      forbidden: `Do not import scraps tokens directly - prefer using theme tokens.`,
+    },
+  },
+
+  create(context) {
+    const importerIsInAllowedDir = context.filename?.includes(EXCEPT_DIR_NAME);
+
+    return {
+      ImportDeclaration(node) {
+        if (!node || node.source.type !== 'Literal') return;
+        if (importerIsInAllowedDir) return;
+
+        const value = node.source.value;
+
+        if (isForbiddenImportPath(value)) {
+          context.report({
+            node,
+            messageId: 'forbidden',
+          });
+        }
+      },
+    };
+  },
+};
+
+export default noTokenImport;

static/eslint/eslintPluginScraps/no-token-import.spec.ts

@@ -0,0 +1,31 @@
+import {RuleTester} from 'eslint';
+
+import noTokenImport from './no-token-import.mjs';
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-token-import', noTokenImport, {
+  valid: [
+    {
+      code: 'import x from "other-package";',
+      filename: '/project/src/foo/file.ts',
+    },
+    {
+      code: 'const x = require("other-package");',
+      filename: '/project/src/foo/file.js',
+    },
+
+    {
+      code: 'import {colors} from "sentry/utils/theme/scraps/colors";',
+      filename: '/static/app/utils/theme/theme.tsx',
+    },
+  ],
+
+  invalid: [
+    {
+      code: 'import {colors} from "sentry/utils/theme/scraps/colors";',
+      filename: '/static/app/index.tsx',
+      errors: [{messageId: 'forbidden'}],
+    },
+  ],
+});

tests/js/setup.ts

@@ -3,7 +3,12 @@
 import '@testing-library/jest-dom';
 
 import {webcrypto} from 'node:crypto';
-import {TextDecoder, TextEncoder} from 'node:util';
+import {
+  // @ts-expect-error structuredClone is available in Node 17+ but types don't like it
+  structuredClone as nodeStructuredClone,
+  TextDecoder,
+  TextEncoder,
+} from 'node:util';
 
 import {type ReactElement} from 'react';
 import {configure as configureRtl} from '@testing-library/react'; // eslint-disable-line no-restricted-imports
@@ -335,3 +340,7 @@ Object.defineProperty(global.self, 'crypto', {
     subtle: webcrypto.subtle,
   },
 });
+
+if (typeof globalThis.structuredClone === 'undefined') {
+  globalThis.structuredClone = nodeStructuredClone;
+}

tsconfig.json

@@ -10,6 +10,7 @@
     "static/app",
     "static/gsApp",
     "static/gsAdmin",
+    "static/eslint",
     "tests/js",
     "config",
     "scripts"