fix: css node_module imports (#9)

* fix: css node_module imports
storybookjs · Oct 24, 2023 · ad57e70 · ad57e70
1 parent ef7308a
commit ad57e70
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/.changeset/big-tips-march.md b/.changeset/big-tips-march.md
@@ -0,0 +1,5 @@
+---
+"@storybook/marko-vite": patch
+---
+
+Fix issue where css @imports with `~` were not being resolved.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.head_ref }}
       - name: Use node
@@ -32,13 +32,11 @@ jobs:
       - name: Format Code
         run: npm run format
       - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v4
+        uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: "[ci] format"
           commit_user_name: "github-actions[bot]"
           commit_user_email: "github-actions[bot]@users.noreply.github.com"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   test:
     runs-on: ubuntu-latest
     name: "test: node@${{ matrix.node }}"
@@ -48,7 +46,7 @@ jobs:
         node: [20]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use node@${{ matrix.node }}
         uses: actions/setup-node@v3
         with:
@@ -61,14 +59,14 @@ jobs:
       - name: Run tests
         run: npm run ci:test
       - name: Report code coverage
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
   release:
     runs-on: ubuntu-latest
     needs: [format, test]
     if: "${{ github.repository_owner == 'storybookjs' && github.event_name == 'push' }}"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
         uses: actions/setup-node@v3
         with:

diff --git a/packages/frameworks/marko-vite/src/preset.ts b/packages/frameworks/marko-vite/src/preset.ts
@@ -1,4 +1,5 @@
 import type { PresetProperty } from "@storybook/types";
+import { mergeConfig } from "vite";
 import { hasVitePlugins } from "@storybook/builder-vite";
 import type { StorybookConfig } from "./types";
 
@@ -22,10 +23,20 @@ export const core: PresetProperty<"core", StorybookConfig> = async (
 };
 
 export const viteFinal: StorybookConfig["viteFinal"] = async (baseConfig) => {
-  const { plugins = [] } = baseConfig;
-  if (!(await hasVitePlugins(plugins, ["@marko/vite"]))) {
-    const { default: markoPlugin } = await import("@marko/vite");
-    plugins.push(markoPlugin({ linked: false }));
-  }
-  return baseConfig;
+  return mergeConfig(baseConfig, {
+    resolve: {
+      alias: [
+        {
+          // Fixes https://github.com/storybookjs/storybook/issues/23147
+          find: /^~/,
+          replacement: "",
+        },
+      ],
+    },
+    plugins:
+      // Ensure @marko/vite included unless already added.
+      (await hasVitePlugins(baseConfig.plugins || [], ["@marko/vite"]))
+        ? []
+        : [(await import("@marko/vite")).default({ linked: false })],
+  });
 };