fix: re-add cjs outputs for v4 integration

.github/workflows/main.yml

@@ -62,3 +62,26 @@ jobs:
       run: pnpm run test.ci
       shell: bash
 
+    # Guards against regressions in the plugin's packaging (e.g. the exports/main
+    # fields losing CJS support) by actually building a Stencil v4 app whose
+    # stencil.config.ts is loaded via CommonJS `require`. Pinned to Stencil v4
+    # regardless of the matrix leg, since that's the specific loading path this
+    # checks; only needs to run once per CI run.
+    - name: 📥 Install Integration Fixture Dependencies
+      if: matrix.stencil_version == 'DEFAULT'
+      run: pnpm install --no-frozen-lockfile
+      shell: bash
+      working-directory: test/fixtures/stencil-v4-app
+
+    - name: 🧪 Integration Test (build a Stencil v4 app using this plugin)
+      if: matrix.stencil_version == 'DEFAULT'
+      run: pnpm run build
+      shell: bash
+      working-directory: test/fixtures/stencil-v4-app
+
+    - name: 🔍 Verify Integration Fixture Compiled Sass
+      if: matrix.stencil_version == 'DEFAULT'
+      run: grep -q 'color:rebeccapurple' www/build/*.entry.js
+      shell: bash
+      working-directory: test/fixtures/stencil-v4-app
+

.gitignore

@@ -4,6 +4,12 @@ dist/
 .DS_Store
 *.tgz
 
+# Stencil v4 integration fixture build artifacts
+test/fixtures/stencil-v4-app/www/
+test/fixtures/stencil-v4-app/.stencil/
+test/fixtures/stencil-v4-app/pnpm-lock.yaml
+test/fixtures/stencil-v4-app/src/components.d.ts
+
 # IDEs
 .vscode/*
 .idea/*

package.json

@@ -3,12 +3,14 @@
   "version": "3.3.1",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./wizard": {
       "types": "./dist/wizard.d.ts",

rollup.config.mjs

@@ -10,7 +10,10 @@ const external = [
 ];
 
 /**
- * Generate a single ESM output bundle
+ * Generate ESM and CJS output bundles.
+ *
+ * Stencil v4's `stencil.config.ts` is loaded via CommonJS, so a `require`-able
+ * build is still needed even though this repo otherwise targets ESM.
  */
 const mainBundle = {
   // the input is expected to exist at this location as a result of running the typescript compiler
@@ -25,10 +28,17 @@ const mainBundle = {
 
   external,
 
-  output: {
-    format: 'esm',
-    file: pkg.main
-  }
+  output: [
+    {
+      format: 'esm',
+      file: pkg.module
+    },
+    {
+      format: 'cjs',
+      file: pkg.main,
+      exports: 'named'
+    }
+  ]
 };
 
 /**

test/fixtures/stencil-v4-app/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "stencil-v4-integration-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Not a real package. Builds a minimal Stencil v4 app that loads @stencil/sass from a CommonJS-style stencil.config.ts, guarding against regressions in the plugin's dual ESM/CJS output.",
+  "scripts": {
+    "build": "stencil build"
+  },
+  "devDependencies": {
+    "@stencil/core": "^4.0.0"
+  },
+  "dependencies": {
+    "@stencil/sass": "file:../../.."
+  }
+}

test/fixtures/stencil-v4-app/src/components/my-component/my-component.scss

@@ -0,0 +1,7 @@
+// Compiled through a Sass variable so a passthrough (non-compiling) plugin
+// would fail this check just as loudly as a plugin that fails to load at all.
+$greeting-color: rebeccapurple;
+
+.greeting {
+  color: $greeting-color;
+}

test/fixtures/stencil-v4-app/src/components/my-component/my-component.tsx

@@ -0,0 +1,12 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.scss',
+  shadow: true,
+})
+export class MyComponent {
+  render() {
+    return <div class="greeting">Hello, Sass!</div>;
+  }
+}

test/fixtures/stencil-v4-app/stencil.config.ts

@@ -0,0 +1,8 @@
+import { Config } from '@stencil/core';
+import { sass } from '@stencil/sass';
+
+export const config: Config = {
+  namespace: 'stencilv4app',
+  plugins: [sass()],
+  outputTargets: [{ type: 'www', serviceWorker: null }],
+};

test/fixtures/stencil-v4-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["dom", "es2017"],
+    "jsx": "react",
+    "jsxFactory": "h",
+    "strict": true,
+    "experimentalDecorators": true
+  },
+  "include": ["src"]
+}