refactor(shadow-styles): address self-review feedback

Decouple drift-check from gulpfile by extracting SHADOW_STYLE_IMPORTS
into scripts/shadow-styles-imports.mjs, so the CI check no longer
dynamically imports the gulpfile (which would also run
registerBuildTasks side effects) just to read one constant.

Broaden the drift-check regex to cover non-side-effect import forms
(`import x from 'pkg/x.css'`, `import * as x from`, named imports, and
dynamic `import('pkg/x.css')`), and strip block/line comments before
matching so commented-out imports do not produce false positives.
Split into two regexes (static vs dynamic) for readability.

Add an `assertNoCssImportRules` guard in the `shadow-styles` gulp task:
`CSSStyleSheet.replaceSync()` rejects `@import` rules at runtime, so
fail the build instead of letting Shadow DOM consumers crash. The guard
strips comments and string literals first to avoid false positives on
`@import` substrings inside CSS values.

Fold the standalone `Check Shadow Styles Imports` CI job into the
existing `tests` job — saves a redundant pnpm install (~30-60s) per PR.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: makhnatkin

.github/workflows/ci.yml

@@ -56,6 +56,9 @@ jobs:
       - name: ESBuild compatability
         run: pnpm ci:test:esbuild
 
+      - name: Check shadow styles imports
+        run: pnpm ci:test:shadow-styles
+
   check_circular_deps:
     name: Check Circular Dependencies
     runs-on: ubuntu-latest
@@ -77,25 +80,3 @@ jobs:
 
       - name: Check circular dependencies
         run: pnpm ci:test:circular-deps
-
-  check_shadow_styles_imports:
-    name: Check Shadow Styles Imports
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v5
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm run ci:deps
-
-      - name: Check shadow styles imports
-        run: pnpm ci:test:shadow-styles

packages/editor/gulpfile.mjs

@@ -7,23 +7,13 @@ import {parallel, series, task} from '@markdown-editor/gulp-tasks';
 import {registerBuildTasks} from '@markdown-editor/gulp-tasks/build';
 
 import pkg from './package.json' with {type: 'json'};
+import {SHADOW_STYLE_IMPORTS} from './scripts/shadow-styles-imports.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 
 const BUILD_DIR = resolve('build');
 const NODE_MODULES_DIR = resolve(__dirname, 'node_modules');
-// Keep this list aligned with non-relative CSS imports required by the default editor setup.
-// Drift is enforced by scripts/check-shadow-styles-imports.js.
-export const SHADOW_STYLE_IMPORTS = Object.freeze([
-    '@diplodoc/transform/dist/css/base.css',
-    '@diplodoc/transform/dist/css/_yfm-only.css',
-    '@diplodoc/cut-extension/runtime/styles.css',
-    '@diplodoc/file-extension/runtime/styles.css',
-    '@diplodoc/tabs-extension/runtime/styles.css',
-    '@diplodoc/quote-link-extension/runtime/styles.css',
-    '@diplodoc/folding-headings-extension/runtime/styles.css',
-]);
 
 const OPTIONAL_PEERS = new Set(
     Object.entries(pkg.peerDependenciesMeta ?? {})
@@ -41,6 +31,7 @@ task('shadow-styles', (done) => {
     const externalCss = readExternalShadowStyles();
     const editorCss = readFileSync(resolve(BUILD_DIR, 'styles.css'), 'utf8');
     const styles = [externalCss, editorCss].filter(Boolean).join('\n');
+    assertNoCssImportRules(styles);
     const moduleCode = createShadowStylesModule(styles);
 
     writeFileSync(resolve(BUILD_DIR, 'shadow-styles.mjs'), moduleCode.esm);
@@ -77,6 +68,21 @@ function readExternalShadowStyles() {
         .join('\n');
 }
 
+// `CSSStyleSheet.replaceSync()` rejects `@import` rules. If any inlined CSS ever
+// adds one, fail the build instead of letting consumers crash at runtime.
+function assertNoCssImportRules(css) {
+    const stripped = css
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/(["'])(?:\\.|(?!\1).)*\1/g, '');
+    if (/(?:^|[\s;}])@import\b/m.test(stripped)) {
+        throw new Error(
+            "[shadow-styles] '@import' rules are not allowed in cssText: " +
+                'CSSStyleSheet.replaceSync() would reject them at runtime. ' +
+                'Inline the imported file into SHADOW_STYLE_IMPORTS instead.',
+        );
+    }
+}
+
 function isOptionalPeerImport(cssImport) {
     const pkgName = cssImport.startsWith('@')
         ? cssImport.split('/', 2).join('/')

packages/editor/scripts/check-shadow-styles-imports.js

@@ -4,17 +4,33 @@ const path = require('node:path');
 const {pathToFileURL} = require('node:url');
 
 const SRC_DIR = path.resolve(__dirname, '..', 'src');
-const GULPFILE_URL = pathToFileURL(path.resolve(__dirname, '..', 'gulpfile.mjs')).href;
+const IMPORTS_MODULE_URL = pathToFileURL(path.resolve(__dirname, 'shadow-styles-imports.mjs')).href;
 
-// Bare `import 'pkg/path/file.css';` — non-relative, scoped or unscoped, ending in .css.
-const CSS_IMPORT_RE = /(?:^|\s)import\s+['"]((?:@[^'"\s/]+\/)?[^'"\s.][^'"\s]*\.css)['"]/gm;
+// Capture group `(...\.css)` — non-relative specifier ending in .css:
+// scoped (`@scope/pkg/...`) or unscoped (`pkg/...`). Anchored to start-of-line
+// (with optional whitespace) so matches inside string literals can't pollute
+// results. Two regexes — static and dynamic — for readability.
+const CSS_PATH = "((?:@[^'\"\\s/]+/)?[^'\"\\s.][^'\"\\s]*\\.css)";
+
+//   import 'pkg/x.css';
+//   import x from 'pkg/x.css';
+//   import * as x from 'pkg/x.css';
+//   import {x} from 'pkg/x.css';
+const STATIC_CSS_IMPORT_RE = new RegExp(
+    `^\\s*import\\s+(?:[\\w*\\s{},]+\\s+from\\s+)?['"]${CSS_PATH}['"]`,
+    'gm',
+);
+
+//   import('pkg/x.css')
+//   await import('pkg/x.css')
+const DYNAMIC_CSS_IMPORT_RE = new RegExp(`\\bimport\\s*\\(\\s*['"]${CSS_PATH}['"]`, 'g');
 
 const EXCLUDED_SCOPES = ['@gravity-ui/'];
 
 async function main() {
-    const {SHADOW_STYLE_IMPORTS} = await import(GULPFILE_URL);
+    const {SHADOW_STYLE_IMPORTS} = await import(IMPORTS_MODULE_URL);
     if (!Array.isArray(SHADOW_STYLE_IMPORTS)) {
-        console.error('Failed to import SHADOW_STYLE_IMPORTS from gulpfile.mjs');
+        console.error('Failed to import SHADOW_STYLE_IMPORTS from shadow-styles-imports.mjs');
         process.exit(1);
     }
 
@@ -34,7 +50,7 @@ async function main() {
             console.error('  Stale in SHADOW_STYLE_IMPORTS (in list, not used in src):');
             for (const item of stale) console.error(`    - ${item}`);
         }
-        console.error('Update SHADOW_STYLE_IMPORTS in packages/editor/gulpfile.mjs.');
+        console.error('Update SHADOW_STYLE_IMPORTS in packages/editor/scripts/shadow-styles-imports.mjs.');
         process.exit(1);
     }
 
@@ -46,16 +62,27 @@ function collectCssImports(dir) {
     const result = new Set();
     walk(dir, (filePath) => {
         if (!/\.(?:ts|tsx|js|jsx|mjs|cjs)$/.test(filePath)) return;
-        const content = fs.readFileSync(filePath, 'utf8');
-        for (const match of content.matchAll(CSS_IMPORT_RE)) {
-            const spec = match[1];
-            if (EXCLUDED_SCOPES.some((scope) => spec.startsWith(scope))) continue;
-            result.add(spec);
+        const content = stripComments(fs.readFileSync(filePath, 'utf8'));
+        for (const re of [STATIC_CSS_IMPORT_RE, DYNAMIC_CSS_IMPORT_RE]) {
+            for (const match of content.matchAll(re)) {
+                const spec = match[1];
+                if (EXCLUDED_SCOPES.some((scope) => spec.startsWith(scope))) continue;
+                result.add(spec);
+            }
         }
     });
     return result;
 }
 
+// Strip block and line comments so commented-out imports don't show up as
+// drift. Naive replace — acceptable because we never *add* matches by stripping,
+// only remove potential matches. The only edge case is a regex literal like
+// `/foo\/\/bar/` whose `//` would be mistaken for a line comment, but no
+// `import 'pkg/x.css'` can live inside a regex literal anyway.
+function stripComments(source) {
+    return source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/[^\n\r]*/g, '');
+}
+
 function walk(dir, visit) {
     for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
         const full = path.join(dir, entry.name);

packages/editor/scripts/shadow-styles-imports.mjs

@@ -0,0 +1,13 @@
+// Single source of truth for non-relative CSS imports inlined into shadow-styles.
+// Imported by both gulpfile.mjs (build task) and check-shadow-styles-imports.js
+// (CI drift check). Keep this list aligned with imports under packages/editor/src.
+
+export const SHADOW_STYLE_IMPORTS = Object.freeze([
+    '@diplodoc/transform/dist/css/base.css',
+    '@diplodoc/transform/dist/css/_yfm-only.css',
+    '@diplodoc/cut-extension/runtime/styles.css',
+    '@diplodoc/file-extension/runtime/styles.css',
+    '@diplodoc/tabs-extension/runtime/styles.css',
+    '@diplodoc/quote-link-extension/runtime/styles.css',
+    '@diplodoc/folding-headings-extension/runtime/styles.css',
+]);