@elliemae/ds-monorepo-devops 3.70.0-next.49 → 3.70.0-next.51

package/configs/jest/testing/jest.config.base.mjs

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import normalizePath from 'normalize-path';
@@ -19,6 +20,38 @@ const getNodeModulesPath = (fileName) => {
   );
 };
 
+// styled-components@5.3.11 currently resolves to two different pnpm store instances (one paired
+// with react-is@18.3.1, one with react-is@19.2.8 — see pnpm/pnpm#11834: dedupePeerDependents
+// fails to collapse peer-cyclic packages like styled-components <-> babel-plugin-styled-components).
+// @xstyled/styled-components (used by ds-system's styled() wrapper and themeProviderHOC for theme
+// merging) inherits that split per-consumer. Two module instances means two separate Context
+// objects, so ThemeProvider from one instance is invisible to styled() calls resolved through the
+// other, which is what actually breaks theme merging (not react-is itself). This pins both
+// packages to the single instance built against react-is@18.3.1. Resolved dynamically (not a
+// hardcoded folder name) because the pnpm store path encodes @babel/core's version in its hash.
+const resolvePinnedStyledComponentsPaths = () => {
+  const monorepoRoot = findMonoRepoRoot(process.cwd());
+  if (!monorepoRoot) return null;
+  const pnpmDir = path.join(monorepoRoot, 'node_modules', '.pnpm');
+  if (!fs.existsSync(pnpmDir)) return null;
+  const entries = fs.readdirSync(pnpmDir);
+  const scEntry = entries.find((e) => e.startsWith('styled-components@5.3.11') && e.includes('_react-is@18.3.1_'));
+  if (!scEntry) return null;
+  const styledComponentsPath = path.join(pnpmDir, scEntry, 'node_modules', 'styled-components');
+  const scRealPath = fs.realpathSync(styledComponentsPath);
+  const xscEntry = entries
+    .filter((e) => e.startsWith('@xstyled+styled-components@3.8.1'))
+    .find((e) => {
+      const nested = path.join(pnpmDir, e, 'node_modules', 'styled-components');
+      return fs.existsSync(nested) && fs.realpathSync(nested) === scRealPath;
+    });
+  if (!xscEntry) return null;
+  const xstyledStyledComponentsPath = path.join(pnpmDir, xscEntry, 'node_modules', '@xstyled', 'styled-components');
+  return { styledComponentsPath, xstyledStyledComponentsPath };
+};
+
+const pinnedStyledComponentsPaths = resolvePinnedStyledComponentsPaths();
+
 const configuredJestConfig = {
   coverageThreshold: {},
   coverageProvider: 'v8',
@@ -39,6 +72,13 @@ const configuredJestConfig = {
     '@elliemae/pui-diagnostics': getMockFilePath('pui-diagnostics.js'),
     'react-spring/web': getNodeModulesPath('react-spring/web.cjs.js'),
     'react-spring/renderprops': getNodeModulesPath('react-spring/renderprops.cjs.js'),
+    // See resolvePinnedStyledComponentsPaths above for why these two are needed.
+    ...(pinnedStyledComponentsPaths
+      ? {
+          '^styled-components$': normalizePath(pinnedStyledComponentsPaths.styledComponentsPath),
+          '^@xstyled/styled-components$': normalizePath(pinnedStyledComponentsPaths.xstyledStyledComponentsPath),
+        }
+      : {}),
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFilesAfterEnv: [path.resolve(__dirname, './setup-tests.js'), path.resolve(__dirname, './setup-react-env.js')],

package/configs/playwright/playwright-component-testing-config.mjs

@@ -1,6 +1,41 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import { defineConfig, devices } from '@playwright/experimental-ct-react';
-// import { defineConfig as viteDefineConfig } from 'vite';
-// import react from '@vitejs/plugin-react';
+import { findMonoRepoRoot } from '../jest/testing/utils.cjs';
+
+// styled-components@5.3.11 currently resolves to two different pnpm store instances (one paired
+// with react-is@18.3.1, one with react-is@19.2.8 — see pnpm/pnpm#11834: dedupePeerDependents
+// fails to collapse peer-cyclic packages like styled-components <-> babel-plugin-styled-components).
+// @xstyled/styled-components (used by ds-system's styled() wrapper and themeProviderHOC for theme
+// merging) inherits that split per-consumer. Two module instances means two separate Context
+// objects, so ThemeProvider from one instance is invisible to styled() calls resolved through the
+// other, which is what actually breaks theme merging. This pins both packages to the single
+// instance built against react-is@18.3.1. Resolved dynamically (not a hardcoded folder name)
+// because the pnpm store path encodes @babel/core's version in its hash. Same fix as the Jest
+// moduleNameMapper and the Storybook/Portal/react-18-vite resolve.alias entries — this is the
+// Playwright component-testing runtime's own internal Vite instance, which none of those cover.
+const resolvePinnedStyledComponentsAliases = () => {
+  const monorepoRoot = findMonoRepoRoot(process.cwd());
+  if (!monorepoRoot) return {};
+  const pnpmDir = path.join(monorepoRoot, 'node_modules', '.pnpm');
+  if (!fs.existsSync(pnpmDir)) return {};
+  const entries = fs.readdirSync(pnpmDir);
+  const scEntry = entries.find((e) => e.startsWith('styled-components@5.3.11') && e.includes('_react-is@18.3.1_'));
+  if (!scEntry) return {};
+  const styledComponentsPath = path.join(pnpmDir, scEntry, 'node_modules', 'styled-components');
+  const scRealPath = fs.realpathSync(styledComponentsPath);
+  const xscEntry = entries
+    .filter((e) => e.startsWith('@xstyled+styled-components@3.8.1'))
+    .find((e) => {
+      const nested = path.join(pnpmDir, e, 'node_modules', 'styled-components');
+      return fs.existsSync(nested) && fs.realpathSync(nested) === scRealPath;
+    });
+  if (!xscEntry) return {};
+  return {
+    'styled-components': styledComponentsPath,
+    '@xstyled/styled-components': path.join(pnpmDir, xscEntry, 'node_modules', '@xstyled', 'styled-components'),
+  };
+};
 
 export const config = defineConfig({
   testDir: './src/tests',
@@ -15,13 +50,21 @@ export const config = defineConfig({
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'list',
-  // ctViteConfig: viteDefineConfig({ logLevel: 'info', plugins: [react()] }),
   use: {
     ctPort: 31500,
     headless: process.env.CI || process.env.PW_HEADLESS ? true : false,
     launchOptions: {
       devtools: process.env.CI || process.env.PW_HEADLESS ? false : true,
     },
+    // Note: ctViteConfig deep-merges with Playwright's own base/framework Vite config (see
+    // experimental-ct-core/lib/viteUtils.js — mergeConfig, then frameworkOverrides applied after).
+    // Do not add a `plugins` entry here — the React plugin is injected separately via
+    // frameworkOverrides regardless of what's passed here, so re-adding it would register it twice.
+    ctViteConfig: {
+      resolve: {
+        alias: resolvePinnedStyledComponentsAliases(),
+      },
+    },
   },
   projects: [
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-monorepo-devops",
-  "version": "3.70.0-next.49",
+  "version": "3.70.0-next.51",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Monorepo Devops",
   "type": "module",