Upgrade addon to be compatible with Storybook v10

.github/workflows/release.yml

@@ -11,10 +11,8 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Use Node.js 20.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
 
       - uses: pnpm/action-setup@v4
 

.nvmrc

@@ -1 +1 @@
-20
+22.12

.prettierrc

@@ -1 +1,6 @@
-{}
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}

.vscode/settings.json

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

README.md

@@ -12,7 +12,7 @@ Get started in Storybook 7 faster with popular styling tools.
 - 🧩 Configuration templates for popular tools
 - ⚡️ Options for CSS modules, PostCSS, Sass, Less, and Vanilla-extract
 
-## 🏁 Getting 
+## 🏁 Getting Started
 
 ### 🤖 Automatic configuration
 
@@ -78,9 +78,11 @@ It can also take Webpack plugins to add to the Storybook config.
 ```
 
 ### 🧩 Popular Configurations
+
 Below are a few popular configurations for common styling tools to get you started. More complex configurations are possible by combining the different rules below.
 
 #### PostCSS
+
 ```js
 // Often used for tailwind
 {
@@ -99,7 +101,7 @@ Below are a few popular configurations for common styling tools to get you start
           {
             // Gets options from `postcss.config.js` in your project root
             loader: 'postcss-loader',
-            options: { implementation: require.resolve('postcss') }
+            options: { implementation: import.meta.resolve('postcss') }
           }
         ],
       }
@@ -111,6 +113,7 @@ Below are a few popular configurations for common styling tools to get you start
 You can also take a look at this [example project](https://stackblitz.com/edit/github-5njuww?file=.storybook%2Fmain.ts) that uses PostCSS for **Tailwind** with Storybook:
 
 #### CSS Modules
+
 ```js
 {
   name: '@storybook/addon-styling-webpack',
@@ -138,6 +141,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
 ```
 
 #### Sass
+
 ```js
 {
   name: '@storybook/addon-styling-webpack',
@@ -151,7 +155,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
           "css-loader",
           {
             loader: "sass-loader",
-            options: { implementation: require.resolve("sass") }
+            options: { implementation: import.meta.resolve("sass") }
           },
         ],
       },
@@ -161,6 +165,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
 ```
 
 #### Less
+
 ```js
 {
   name: '@storybook/addon-styling-webpack',
@@ -174,7 +179,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
           "css-loader",
           {
             loader: "less-loader",
-            options: { implementation: require.resolve("less") }
+            options: { implementation: import.meta.resolve("less") }
           },
         ],
       },
@@ -184,6 +189,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
 ```
 
 #### Vanilla-extract
+
 ```js
 {
   name: '@storybook/addon-styling-webpack',
@@ -197,9 +203,9 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
         test: /\.css$/,
         sideEffects: true,
         use: [
-          require.resolve("style-loader"),
+          import.meta.resolve("style-loader"),
           {
-              loader: require.resolve("css-loader"),
+              loader: import.meta.resolve("css-loader"),
               options: {},
           },
         ],
@@ -212,7 +218,7 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
         use: [
           MiniCssExtractPlugin.loader,
           {
-            loader: require.resolve('css-loader'),
+            loader: import.meta.resolve('css-loader'),
             options: {
               // Required as image imports should be handled via JS/TS import statements
               url: false,
@@ -232,8 +238,8 @@ You can also take a look at this [example project](https://stackblitz.com/edit/g
     This isn't working in my monorepo.
   </summary>
 
-  Monorepos are a more advanced setup that may require a bit more configuration. To find out more. Refer to the Storybook FAQs on [monorepos](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments).
-  
+Monorepos are a more advanced setup that may require a bit more configuration. To find out more. Refer to the Storybook FAQs on [monorepos](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments).
+
 </details>
 
 ## 🤝 Contributing

auto.config.js

@@ -1,11 +1,11 @@
-module.exports = {
-  baseBranch: "main",
+export default {
+  baseBranch: 'main',
   labels: [
     {
-      name: "documentation",
-      releaseType: "none",
+      name: 'documentation',
+      releaseType: 'none',
     },
   ],
-  prereleaseBranches: ["next", "prerelease"],
+  prereleaseBranches: ['next', 'prerelease'],
   versionBranches: true,
 };

package.json

@@ -18,23 +18,19 @@
     "name": "Shaun Evening",
     "email": "[email protected]"
   },
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "default": "./dist/index.js"
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs"
+      "default": "./dist/preset.js"
     },
     "./package.json": "./package.json",
     "./postinstall": "./postinstall.js"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
     "bin/**/*",
     "dist/**/*",
@@ -45,20 +41,22 @@
   "scripts": {
     "build": "tsup",
     "build:watch": "pnpm build --watch",
+    "format": "prettier --write .",
     "release": "auto shipit"
   },
   "devDependencies": {
     "@types/node": "^22.15.29",
     "auto": "^11.3.0",
+    "picocolors": "^1.1.0",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
-    "storybook": "^9.0.4",
+    "storybook": "^10.0.0",
     "tsup": "^8.5.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "webpack": "^5.99.9"
   },
   "peerDependencies": {
-    "storybook": "^9.0.0",
+    "storybook": "^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0",
     "webpack": "^5.0.0"
   },
   "packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6",