diff --git a/.changeset/big-tips-march.md b/.changeset/big-tips-march.md new file mode 100644 index 0000000000..9eea5506eb --- /dev/null +++ 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 index bba436fff6..3613ee5954 100644 --- 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 index bd02fe37e4..3d8b78de51 100644 --- 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 })], + }); };