feat: add scss handling to stencil plugin (#1846)

johnjenkins · web-flow · commit acba6b85ab05 · 2026-07-01T20:47:52.000+02:00
diff --git a/packages/knip/fixtures/plugins/stencil/package.json b/packages/knip/fixtures/plugins/stencil/package.json
@@ -2,5 +2,8 @@
   "name": "@plugins/stencil",
   "dependencies": {
     "@stencil/core": "*"
+  },
+  "devDependencies": {
+    "@stencil/sass": "*"
   }
 }
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/ios.scss b/packages/knip/fixtures/plugins/stencil/src/components/ios.scss
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/md.scss b/packages/knip/fixtures/plugins/stencil/src/components/md.scss
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-button.scss b/packages/knip/fixtures/plugins/stencil/src/components/my-button.scss
@@ -0,0 +1 @@
+:host { display: inline-block; }
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-button.tsx b/packages/knip/fixtures/plugins/stencil/src/components/my-button.tsx
@@ -1,6 +1,6 @@
 import { Component, h } from '@stencil/core';
 
-@Component({ tag: 'my-button' })
+@Component({ tag: 'my-button', styleUrl: 'my-button.scss' })
 export class MyButton {
   render() { return <button><slot /></button>; }
 }
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-card-rtl.scss b/packages/knip/fixtures/plugins/stencil/src/components/my-card-rtl.scss
@@ -0,0 +1 @@
+:host { direction: rtl; }
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-card.scss b/packages/knip/fixtures/plugins/stencil/src/components/my-card.scss
@@ -0,0 +1 @@
+:host { display: block; }
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-card.tsx b/packages/knip/fixtures/plugins/stencil/src/components/my-card.tsx
@@ -0,0 +1,6 @@
+import { Component, h } from '@stencil/core';
+
+@Component({ tag: 'my-card', styleUrls: ['my-card.scss', 'my-card-rtl.scss'] })
+export class MyCard {
+  render() { return <div class='card'><slot /></div>; }
+}
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/my-mode-style.tsx b/packages/knip/fixtures/plugins/stencil/src/components/my-mode-style.tsx
@@ -0,0 +1,9 @@
+import { Component, h } from '@stencil/core';
+
+@Component({ tag: 'my-mode-style', styleUrls: {
+    md: './ios.scss',
+    ios: './md.scss' 
+  }})
+export class MyModeStyle {
+  render() { return <div class='card'><slot /></div>; }
+}
diff --git a/packages/knip/fixtures/plugins/stencil/src/components/unused.scss b/packages/knip/fixtures/plugins/stencil/src/components/unused.scss
@@ -0,0 +1 @@
+:host { display: block; }
diff --git a/packages/knip/fixtures/plugins/stencil/src/global-1.scss b/packages/knip/fixtures/plugins/stencil/src/global-1.scss
diff --git a/packages/knip/fixtures/plugins/stencil/src/global-2.scss b/packages/knip/fixtures/plugins/stencil/src/global-2.scss
diff --git a/packages/knip/fixtures/plugins/stencil/stencil.config.ts b/packages/knip/fixtures/plugins/stencil/stencil.config.ts
@@ -1,9 +1,15 @@
 import { Config } from '@stencil/core';
+import { sass } from '@stencil/sass';
 
 export const config: Config = {
   namespace: 'MyApp',
   globalScript: 'src/global.ts',
+  globalStyle: 'src/global-1.scss',
+  outputTargets: [{type: 'global-style', input: 'src/global-2.scss'}],
   testing: {
     setupFilesAfterEnv: ['./setup-jest.ts'],
   },
+  plugins: [
+    sass()
+  ],
 };
diff --git a/packages/knip/src/plugins/stencil/index.ts b/packages/knip/src/plugins/stencil/index.ts
@@ -1,8 +1,18 @@
-import type { IsPluginEnabled, Plugin, RegisterVisitors, ResolveFromAST } from '../../types/config.ts';
+import { Visitor, type Class, type ImportDeclaration, type ObjectExpression } from 'oxc-parser';
+import scss from '../../compilers/scss.ts';
+import { IMPORT_FLAGS } from '../../constants.ts';
 import { type Input, toConfig, toEntry, toProductionEntry } from '../../util/input.ts';
+import { dirname, join } from '../../util/path.ts';
 import { hasDependency } from '../../util/plugin.ts';
-import { collectPropertyValues } from '../../typescript/ast-helpers.ts';
+import { collectPropertyValues, getPropertyValues } from '../../typescript/ast-helpers.ts';
 import { createCustomElementVisitor } from '../_custom-elements/custom-element-visitor.ts';
+import type {
+  IsPluginEnabled,
+  Plugin,
+  RegisterCompilers,
+  RegisterVisitors,
+  ResolveFromAST,
+} from '../../types/config.ts';
 
 // https://stenciljs.com/docs/config
 
@@ -20,8 +30,51 @@ const entry = ['**/*.spec.{ts,tsx}', '**/*.e2e.{ts,tsx}'];
 
 const isStencilSpecifier = (specifier: string): boolean => specifier === '@stencil/core';
 
+// Activate the SCSS compiler when @stencil/sass is a direct dep, so styleUrl .scss references are tracked
+const registerCompilers: RegisterCompilers = ({ hasDependency, registerCompiler }) => {
+  if (hasDependency('@stencil/sass'))
+    for (const ext of ['.scss', '.sass']) registerCompiler({ extension: ext, compiler: scss.compiler });
+};
+
 const registerVisitors: RegisterVisitors = ({ ctx, registerVisitor }) => {
   registerVisitor(createCustomElementVisitor(ctx, isStencilSpecifier, { decoratorName: 'Component' }));
+
+  // Resolve styleUrl / styleUrls from @Component decorator args so knip doesn't flag referenced SCSS files
+  const componentNames = new Set<string>();
+
+  registerVisitor({
+    Program() {
+      componentNames.clear();
+    },
+    ImportDeclaration(node: ImportDeclaration) {
+      if (!isStencilSpecifier(node.source?.value)) return;
+      for (const spec of node.specifiers ?? []) {
+        if (
+          spec.type === 'ImportSpecifier' &&
+          spec.imported.type === 'Identifier' &&
+          spec.imported.name === 'Component'
+        )
+          componentNames.add(spec.local.name);
+      }
+    },
+    ClassDeclaration(node: Class) {
+      resolveStyleUrls(node);
+    },
+  });
+
+  function resolveStyleUrls(node: Class) {
+    const dir = dirname(ctx.filePath);
+    for (const decorator of node.decorators ?? []) {
+      const expr = decorator.expression;
+      if (expr?.type !== 'CallExpression') continue;
+      if (expr.callee?.type !== 'Identifier' || !componentNames.has(expr.callee.name)) continue;
+      const arg = expr.arguments?.[0];
+      if (arg?.type !== 'ObjectExpression') continue;
+      for (const url of getPropertyValues(arg, 'styleUrl')) ctx.addImport(join(dir, url), arg.start, IMPORT_FLAGS.NONE);
+      for (const url of getPropertyValues(arg, 'styleUrls'))
+        ctx.addImport(join(dir, url), arg.start, IMPORT_FLAGS.NONE);
+    }
+  }
 };
 
 const resolveFromAST: ResolveFromAST = program => {
@@ -37,6 +90,19 @@ const resolveFromAST: ResolveFromAST = program => {
     inputs.push(toProductionEntry(script));
   }
 
+  for (const style of collectPropertyValues(program, 'globalStyle')) {
+    inputs.push(toProductionEntry(style));
+  }
+
+  // v5: outputTargets: [{ type: 'global-style', input: 'src/global.scss' }]
+  new Visitor({
+    ObjectExpression(node: ObjectExpression) {
+      const typeValues = getPropertyValues(node, 'type');
+      if (!typeValues.has('global-style')) return;
+      for (const input of getPropertyValues(node, 'input')) inputs.push(toProductionEntry(input));
+    },
+  }).visit(program);
+
   for (const tsconfig of collectPropertyValues(program, 'tsconfig')) {
     inputs.push(toConfig('typescript', tsconfig));
   }
@@ -60,6 +126,7 @@ const plugin: Plugin = {
   entry,
   production,
   resolveFromAST,
+  registerCompilers,
   registerVisitors,
 };
 
diff --git a/packages/knip/test/plugins/stencil.test.ts b/packages/knip/test/plugins/stencil.test.ts
@@ -17,11 +17,15 @@ test('Find dependencies and credit @Component with the Stencil plugin', async ()
   // A genuinely unused sibling export is still flagged (proves the file is analyzed, not entry-exempt):
   assert.equal(issues.exports['src/my-controller.ts'].unusedHelper.symbol, 'unusedHelper');
 
+  // A genuinely unused scss file is still flagged (proves the file is analyzed, not exempt):
+  assert('src/components/unused.scss' in issues.files);
+
   // `*.spec`/`*.e2e` test files and `testing.setupFilesAfterEnv` setup are entries, not unused files (files: 0):
   assert.deepEqual(counters, {
     ...baseCounters,
+    files: 1,
     exports: 1,
-    processed: 7,
-    total: 7,
+    processed: 17,
+    total: 17,
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,8 @@`
`2`	`2`	`"name": "@plugins/stencil",`
`3`	`3`	`"dependencies": {`
`4`	`4`	`"@stencil/core": "*"`
	`5`	`+ },`
	`6`	`+ "devDependencies": {`
	`7`	`+ "@stencil/sass": "*"`
`5`	`8`	`}`
`6`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { Component, h } from '@stencil/core';`
`2`	`2`
`3`		`-@Component({ tag: 'my-button' })`
	`3`	`+@Component({ tag: 'my-button', styleUrl: 'my-button.scss' })`
`4`	`4`	`export class MyButton {`
`5`	`5`	`render() { return <button><slot /></button>; }`
`6`	`6`	`}`