fix: classify named packages by package.json name

Webpack's `descriptionData` matches against the nearest `package.json`, so paragon, shell, and brand classification now works regardless of filesystem layout (workspace symlinks, bind-mounts, renamed checkouts). The site/app split stays path-based (broadened to cover `/packages/`) since it's a project-vs-dep question.

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

Author: arbrandes

tools/webpack/common-config/all/getStylesheetRule.test.ts

@@ -0,0 +1,55 @@
+import { APP_RESOURCE, BRAND_RESOURCE, PARAGON_RESOURCE, SHELL_RESOURCE } from './getStylesheetRule';
+
+describe('stylesheet resource patterns', () => {
+  describe('PARAGON_RESOURCE', () => {
+    it('matches an installed-package path', () => {
+      expect(PARAGON_RESOURCE.test('/site/node_modules/@openedx/paragon/dist/core.min.css')).toBe(true);
+    });
+
+    it('matches an npm-workspace symlink target', () => {
+      expect(PARAGON_RESOURCE.test('/site/packages/paragon/dist/core.min.css')).toBe(true);
+    });
+
+    it('does not match an unrelated path containing "paragon"', () => {
+      expect(PARAGON_RESOURCE.test('/site/src/paragon-overrides.scss')).toBe(false);
+    });
+  });
+
+  describe('SHELL_RESOURCE', () => {
+    it('matches an installed-package path', () => {
+      expect(SHELL_RESOURCE.test('/site/node_modules/@openedx/frontend-base/dist/shell/style.scss')).toBe(true);
+    });
+
+    it('matches an npm-workspace symlink target with dist/', () => {
+      expect(SHELL_RESOURCE.test('/site/packages/frontend-base/dist/shell/style.scss')).toBe(true);
+    });
+
+    it('matches a dev:shell in-place source path', () => {
+      expect(SHELL_RESOURCE.test('/home/u/frontend-base/shell/style.scss')).toBe(true);
+    });
+  });
+
+  describe('APP_RESOURCE', () => {
+    it('matches a node_modules path', () => {
+      expect(APP_RESOURCE.test('/site/node_modules/some-pkg/index.js')).toBe(true);
+    });
+
+    it('matches an npm-workspace packages path', () => {
+      expect(APP_RESOURCE.test('/site/packages/some-pkg/index.js')).toBe(true);
+    });
+
+    it('does not match a site source path', () => {
+      expect(APP_RESOURCE.test('/site/src/component.scss')).toBe(false);
+    });
+  });
+
+  describe('BRAND_RESOURCE', () => {
+    it('matches an installed-package path', () => {
+      expect(BRAND_RESOURCE.test('/site/node_modules/@openedx/brand-openedx/paragon.scss')).toBe(true);
+    });
+
+    it('matches an npm-workspace symlink target', () => {
+      expect(BRAND_RESOURCE.test('/site/packages/brand-openedx/paragon.scss')).toBe(true);
+    });
+  });
+});

tools/webpack/common-config/all/getStylesheetRule.ts

@@ -21,10 +21,12 @@ import postcssWrapLayer from './postcssWrapLayer';
  *            precedence of runtime brand CSS (which is injected unlayered via
  *            <link> tags and thus beats every layered rule).
  */
-const PARAGON_RESOURCE = /@openedx[\\/]paragon[\\/]/;
-const SHELL_RESOURCE = /(@openedx[\\/]frontend-base|frontend-base[\\/]shell)[\\/]/;
-const BRAND_RESOURCE = /@(open)?edx[\\/]brand(-[^\\/]+)?[\\/]/;
-const NODE_MODULES = /[\\/]node_modules[\\/]/;
+// Also match `packages/<pkg>` so that npm-workspace symlink targets
+// (where webpack's symlink resolution lands) classify correctly.
+export const PARAGON_RESOURCE = /(@openedx|packages)[\\/]paragon[\\/]/;
+export const SHELL_RESOURCE = /((@openedx|packages)[\\/]frontend-base|frontend-base[\\/](dist[\\/])?shell)[\\/]/;
+export const BRAND_RESOURCE = /(@(open)?edx[\\/]brand(-[^\\/]+)?|packages[\\/]brand(-[^\\/]+)?)[\\/]/;
+export const APP_RESOURCE = /[\\/](node_modules|packages)[\\/]/;
 
 /*
  * There are a few things we need to do here.
@@ -64,7 +66,7 @@ export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRu
         ],
       },
       {
-        resource: { not: [NODE_MODULES] },
+        resource: { not: [APP_RESOURCE] },
         use: [
           getFirstLoader(mode),
           ...getStyleUseConfig(mode, 'site'),