feat: Port to Storybook 10

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "storybookjs/addon-cssresources" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch"
+}

.changeset/forty-horses-serve.md

@@ -0,0 +1,5 @@
+---
+'@storybook/addon-cssresources': major
+---
+
+Support Storybook 10 & ESM-only

.github/actions/setup-node-and-install/action.yml

@@ -0,0 +1,23 @@
+name: 'Setup Node.js and Dependencies'
+description: 'Sets up Node.js, caches and installs dependencies'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      with:
+        node-version-file: '.nvmrc'
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+
+    - name: Setup Node.js
+      uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      with:
+        node-version: 24
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts

.github/workflows/check.yml

@@ -0,0 +1,60 @@
+name: Check
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - next
+
+permissions:
+  id-token: write # used to upload artifacts to codecov
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js and Install Dependencies
+        uses: ./.github/actions/setup-node-and-install
+
+      - name: Check for linter errors
+        run: pnpm lint
+
+  build:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    strategy:
+      matrix:
+        node-version: [20.19, 22.12]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build addon
+        run: pnpm build
+
+      - name: Build Storybook
+        run: pnpm build-storybook

.github/workflows/publish-preview.yml

@@ -0,0 +1,25 @@
+name: Publish preview
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - next
+
+jobs:
+  release-preview:
+    name: Publish preview releases
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+
+      - name: Setup Node.js and Install Dependencies
+        uses: ./.github/actions/setup-node-and-install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish preview releases
+        run: pnpm pkg-pr-new publish

.github/workflows/release.yml

@@ -1,28 +1,46 @@
 name: Release
 
-on: [push]
+on:
+  push:
+    branches:
+      - main
+      - next
 
 jobs:
   release:
+    permissions:
+      contents: write # to create release (changesets/action)
+      pull-requests: write # to create pull request (changesets/action)
+      id-token: write #  required for provenance and oidc publish
+
+      # prevents this action from running on forks
+    if: github.repository == 'storybookjs/mcp'
+
+    name: Release
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
-    steps:
-      - uses: actions/checkout@v2
 
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+    steps:
+      # see https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/making-authenticated-api-requests-with-a-github-app-in-a-github-actions-workflow
+      - uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
+        id: app-token
+        with:
+          app-id: ${{ vars.STORYBOOK_BOT_APP_ID }}
+          private-key: ${{ secrets.STORYBOOK_BOT_APP_PRIVATE_KEY }}
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Checkout
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
-          node-version: 14.x
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Setup Node.js and Install Dependencies
+        uses: ./.github/actions/setup-node-and-install
 
-      - name: Create Release
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@e0145edc7d9d8679003495b11f87bd8ef63c0cba # v1.5.3
+        with:
+          publish: pnpm release
+          commitMode: github-api
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          yarn release
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}

.gitignore

@@ -3,4 +3,5 @@ node_modules/
 storybook-static/
 build-storybook.log
 .DS_Store
-.env
+.env
+.eslintcache

.nvmrc

@@ -0,0 +1 @@
+22.16.0

.prettierignore

@@ -1 +1,4 @@
 dist
+pnpm-lock.yaml
+node_modules
+storybook-static

.prettierrc

@@ -1 +1,8 @@
-{}
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false
+}

.storybook/local-preset.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url';
+
+/**
+ * to load the built addon in this test Storybook
+ */
+export function previewAnnotations(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('../dist/preview.js'))];
+}
+
+export function managerEntries(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('../dist/manager.js'))];
+}

.storybook/main.ts

@@ -0,0 +1,9 @@
+import { defineMain } from '@storybook/react-vite/node';
+
+const config = defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs', import.meta.resolve('./local-preset.ts')],
+  framework: '@storybook/react-vite',
+});
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,11 @@
+import { definePreview } from '@storybook/react-vite';
+import addonDocs from '@storybook/addon-docs';
+import localAddon from '../dist/index.js';
+
+export default definePreview({
+  addons: [addonDocs(), localAddon()],
+  parameters: {},
+  initialGlobals: {
+    background: { value: 'light' },
+  },
+});

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -1,52 +1,80 @@
 # Storybook Addon Cssresources
 
-Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
+Switch between CSS resources at runtime, and define per-story CSS resources.
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-![Storybook Addon Cssresources Demo](docs/demo.gif)
+![Storybook Addon Cssresources Demo](https://raw.githubusercontent.com/storybookjs/addon-cssresources/refs/heads/main/docs/demo.gif)
 
 ## Installation
 
+Install the addon:
+
 ```sh
 yarn add -D @storybook/addon-cssresources
 ```
 
+```sh
+npm i -D @storybook/addon-cssresources
+```
+
+```sh
+pnpm i -D @storybook/addon-cssresources
+```
+
 ## Configuration
 
-Then create a file called `main.js` in your storybook config.
+Then add the addon to your Storybook config:
 
-Add following content to it:
+```ts
+// .storybook/main.ts
+import { defineMain } from '@storybook/<your-framework>/node';
 
-```js
-module.exports = {
-  addons: ["@storybook/addon-cssresources"],
-};
+const config = defineMain({
+  addons: ['@storybook/addon-cssresources'],
+  framework: '@storybook/react-vite',
+});
+
+export default config;
 ```
 
 ## Usage
 
-You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI:
+Define the CSS resources you want to use in your [`parameters`](https://storybook.js.org/docs/writing-stories/parameters). They can be added globally or per story.
+
+You can choose which resources get loaded by default in the parameters, and then unload or load other resources in the addon panel UI.
+
+If you use [CSF Next](https://storybook.js.org/docs/api/csf/csf-next), load the addon in `preview.ts` as well:
 
-```js
-import { withCssResources } from "@storybook/addon-cssresources";
+```ts
+// .storybook/preview.ts
+import { definePreview } from '@storybook/<your-framework>';
+import addonDocs from '@storybook/addon-docs';
+import addonCssResources from '@storybook/addon-cssresources';
 
-export default {
-  title: "CssResources",
+export default definePreview({
+  addons: [addonDocs(), addonCssResources()], // only if using CSF Next
   parameters: {
     cssresources: [
       {
-        id: `bluetheme`,
-        code: `<style>body { background-color: lightblue; }</style>`,
+        // Label shown in the addon panel UI
+        id: `bootstrap v5.0.2`,
+        // Code to use to load the resource
+        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
+        // Defines which resources will be initially loaded in the story
+        picked: true,
+        // Defaults to false, this enables you to hide the code snippet and only displays the style selector
+        hideCode: false,
+      },
+      {
+        id: `bootstrap v4.1.3`,
+        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
         picked: false,
-        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
+        hideCode: false,
       },
     ],
   },
-  decorators: [withCssResources],
-};
-
-export const defaultView = () => <div />;
+});
 ```
 
 ## Credits