Patch release (#62)

* feat: configure css-loader options (#61)
Co-authored-by: Jeffrey <jeffrey@jeffreyzutt.nl>

* Set up postinstall as a bin command (#57)
  * Set up postinstall as a bin command
  * Check peerDeps when deciding to configure
  * Fix tailwind codemod

* Do not configure addon options for Angular (#63)
  * Update docs
  * Add options skip for Angular tailwind

---------
Co-authored-by: Jeffrey <jeffrey@jeffreyzutt.nl>

docs/api.md

@@ -17,6 +17,12 @@ export interface AddonStylingOptions {
 }
 ```
 
+### Using Angular?
+
+📣 If you're using Angular, **DO NOT** use the configuration options in this addon. This will break the Angular builder rules which are required for Angular to run.
+
+However, you can still use this addon for it's theme switching capabilities.
+
 ### `options.postCss`
 
 **Required?** false
@@ -122,6 +128,12 @@ Setting `options.cssModules` to true will give you a basic setup of css modules
 
 If you'd like to customize your CSS Module configuration, `options.cssModules` can also take an object that takes the same options as webpack's `css-loader` [modules property](https://www.npmjs.com/package/css-loader#modules).
 
+### `options.css`
+
+**Required?** false
+
+If you'd like to customize your CSS-loader configuration, `options.css` can take an object that takes the same options as [css-loader](https://www.npmjs.com/package/css-loader#options).
+
 ### Advanced
 
 If the above options aren't working for you, you likely have a more advanced set up.

docs/auto-configuration.md

@@ -12,8 +12,8 @@ This feature currently works for the following tools in Storybook 7.0:
 
 ## How to use
 
-1. Make sure you're using Storybook 7.0 and `@storybook/addon-styling` >=1.1.0
-2. Run `node node_modules/@storybook/addon-styling/bin/postinstall.js`
+1. Make sure you're using Storybook 7.0 and `@storybook/addon-styling` >=1.3.x
+2. Run `yarn addon-styling-setup`
 3. Confirm the results
 
 ## Known issues

package.json

@@ -18,6 +18,9 @@
     "email": "goodeveningshaun@gmail.com"
   },
   "license": "MIT",
+  "bin": {
+    "addon-styling-setup": "./postinstall.js"
+  },
   "exports": {
     ".": {
       "require": "./dist/index.js",
@@ -40,7 +43,7 @@
       "types": "./dist/preset.d.ts"
     },
     "./package.json": "./package.json",
-    "./postinstall": "./bin/postinstall.js"
+    "./postinstall": "./postinstall.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -74,7 +77,6 @@
     "@storybook/components": "^7.0.12",
     "@storybook/core-common": "^7.0.12",
     "@storybook/core-events": "^7.0.12",
-    "@storybook/csf-tools": "^7.0.12",
     "@storybook/manager-api": "^7.0.12",
     "@storybook/node-logger": "^7.0.12",
     "@storybook/preview-api": "^7.0.12",
@@ -83,7 +85,6 @@
     "css-loader": "^6.7.3",
     "less-loader": "^11.1.0",
     "postcss-loader": "^7.2.4",
-    "recast": "^0.23.2",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^13.2.2",
     "style-loader": "^3.3.2"
@@ -96,8 +97,10 @@
     "@babel/preset-typescript": "^7.13.0",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/builder-webpack5": "^7.0.12",
+    "@storybook/csf-tools": "^7.0.12",
     "@storybook/react": "^7.0.12",
     "@storybook/react-vite": "^7.0.12",
+    "@storybook/types": "^7.0.12",
     "@vitejs/plugin-react": "^3.1.0",
     "auto": "^10.3.0",
     "babel-loader": "^8.1.0",
@@ -108,6 +111,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "recast": "^0.23.2",
     "rimraf": "^3.0.2",
     "storybook": "^7.0.12",
     "tsup": "^6.7.0",

postinstall.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("./bin/postinstall.js");

src/postinstall/fixtures/main.angular.fixture.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from "@storybook/angular";
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

src/postinstall/tailwind/tailwind.strategy.test.ts

@@ -95,7 +95,7 @@ describe("CODEMOD: tailwind configuration", () => {
             {
               name: \\"@storybook/addon-styling\\",
               options: {
-                postcss: {
+                postCss: {
                   implementation: require.resolve(\\"postcss\\"),
                 },
               },
@@ -113,6 +113,43 @@ describe("CODEMOD: tailwind configuration", () => {
         "
       `);
     });
+
+    it("Angular: addon-styling should be registered without options", async () => {
+      const mainConfig = await readConfig(
+        resolve(__dirname, "../fixtures/main.angular.fixture.ts")
+      );
+      const packageJson: PackageJson = {
+        dependencies: { tailwindcss: "latest" },
+        devDependencies: { postcss: " latest" },
+      };
+
+      tailwindStrategy.main(mainConfig, packageJson, SUPPORTED_BUILDERS.VITE);
+
+      const result = formatFileContents(mainConfig);
+
+      expect(result).toMatchInlineSnapshot(`
+        "import type { StorybookConfig } from \\"@storybook/angular\\";
+        const config: StorybookConfig = {
+          stories: [\\"../stories/**/*.stories.@(js|jsx|ts|tsx)\\"],
+          addons: [
+            \\"@storybook/addon-essentials\\",
+            {
+              name: \\"@storybook/addon-styling\\",
+              options: {},
+            },
+          ],
+          framework: {
+            name: \\"@storybook/angular\\",
+            options: {},
+          },
+          docs: {
+            autodocs: true,
+          },
+        };
+        export default config;
+        "
+      `);
+    });
   });
 
   describe("PREVIEW: how should storybook preview be configured for tailwind", () => {
@@ -138,8 +175,8 @@ describe("CODEMOD: tailwind configuration", () => {
 
         import { withThemeByClassName } from \\"@storybook/addon-styling\\";
 
-        /* TODO: update import to your tailwind styles file */
-        import \\"../src/app.css\\";
+        /* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
+        import \\"../src/index.css\\";
 
         const preview: Preview = {
           parameters: {

src/postinstall/tailwind/tailwind.strategy.ts

@@ -2,7 +2,7 @@ import { PackageJson } from "@storybook/types";
 import { logger, colors } from "@storybook/node-logger";
 import * as t from "@babel/types";
 
-import { hasDependency } from "../utils/dependencies.utils";
+import { hasDependency, isAngular } from "../utils/dependencies.utils";
 import {
   SUPPORTED_BUILDERS,
   SUPPORTED_STYLING_TOOLS,
@@ -20,20 +20,22 @@ export const tailwindStrategy: ToolConfigurationStrategy = {
   main: (mainConfig, packageJson, builder) => {
     logger.plain(`  • Registering ${colors.pink("@storybook/addon-styling")}.`);
 
-    if (builder === SUPPORTED_BUILDERS.WEBPACK) {
+    const usingAngular = isAngular(mainConfig);
+
+    if (builder === SUPPORTED_BUILDERS.WEBPACK || usingAngular) {
       logger.plain(`    • Configuring ${colors.green("postcss")}.`);
     }
 
     const [addonConfigNode] =
-      builder === SUPPORTED_BUILDERS.VITE
+      builder === SUPPORTED_BUILDERS.VITE || usingAngular
         ? stringToNode`({
       name: "@storybook/addon-styling",
       options: {}
     })`
         : stringToNode`({
       name: "@storybook/addon-styling",
       options: {
-        postcss: {
+        postCss: {
           implementation: require.resolve("postcss")
         }
       }
@@ -58,8 +60,8 @@ export const tailwindStrategy: ToolConfigurationStrategy = {
 
     const importsNode = stringToNode`import { withThemeByClassName } from '@storybook/addon-styling';
 
-    /* TODO: update import to your tailwind styles file */
-    import '../src/app.css';`;
+    /* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
+    import '../src/index.css';`;
 
     addImports(previewConfig._ast, importsNode);
 

src/postinstall/utils/dependencies.utils.ts

@@ -8,8 +8,9 @@ export const hasDependency = (
 ): boolean => {
   const deps = packageJson?.dependencies || {};
   const devDeps = packageJson?.devDependencies || {};
+  const peerDeps = packageJson?.peerDependencies || {};
 
-  return !!deps[depName] || !!devDeps[depName];
+  return !!deps[depName] || !!devDeps[depName] || !!peerDeps[depName];
 };
 
 export const determineBuilder = (mainConfig: ConfigFile): SupportedBuilders => {
@@ -23,6 +24,15 @@ export const determineBuilder = (mainConfig: ConfigFile): SupportedBuilders => {
     : SUPPORTED_BUILDERS.WEBPACK;
 };
 
+export const isAngular = (mainConfig: ConfigFile): boolean => {
+  const frameworkValue = mainConfig.getFieldValue(["framework"]);
+
+  const framework =
+    typeof frameworkValue === "string" ? frameworkValue : frameworkValue?.name;
+
+  return framework.includes("angular");
+};
+
 export const needsCssModulesConfiguration = (builder: SupportedBuilders) =>
   builder === SUPPORTED_BUILDERS.WEBPACK;
 export const needsPostCssConfiguration = (builder: SupportedBuilders) =>

src/types.ts

@@ -8,6 +8,7 @@ interface LessConfig {
 
 export interface AddonStylingOptions {
   cssBuildRule?: RuleSetRule;
+  css?: Record<string, any>;
   cssModules?: boolean | Record<string, any>;
   less?: LessConfig;
   lessBuildRule?: RuleSetRule;

src/webpack/css/webpack.test.ts

@@ -102,6 +102,16 @@ describe("WEBPACK/CSS: configuration builders for css files", () => {
       expect(result).toMatchObject(BASE_LOADER);
     });
 
+    it('CSS OPTIONS: it should configure the css-loader with extra options', async ({ expect }) => {
+      const expected = {
+        ...BASE_LOADER,
+        options: { url: false },
+      };
+
+      const result = buildCssLoader({ css: {url: false} });
+      expect(result).toMatchObject(expected)
+    })
+
     it("POSTCSS ENABLED: it should configure the css-loader to handle imports AFTER postcss", async ({
       expect,
     }) => {
@@ -117,6 +127,19 @@ describe("WEBPACK/CSS: configuration builders for css files", () => {
       expect(result).toMatchObject(expected);
     });
 
+    it('CSS OPTIONS & POSTCSS enabled: it should configure the css-loader with extra options', async ({ expect }) => {
+      const expected = {
+        ...BASE_LOADER,
+        options: { importLoaders: 1, url: false },
+      };
+
+      const result = buildCssLoader({
+        css: {url: false},
+        postCss: { implementation: require.resolve("postcss") },
+      });
+      expect(result).toMatchObject(expected)
+    })
+
     it("CSS MODULES ENABLED: it should configure the css-loader to support css-modules", async ({
       expect,
     }) => {

src/webpack/css/webpack.ts

@@ -21,10 +21,11 @@ export const buildCssModuleRules = ({ cssModules }: AddonStylingOptions) => {
 };
 
 export const buildCssLoader = ({
+  css,
   cssModules,
   postCss,
 }: AddonStylingOptions) => {
-  const importSettings = postCss ? { importLoaders: 1 } : {};
+  const importSettings = postCss ? { importLoaders: 1, ...css } : { ...css };
   const moduleSettings = buildCssModuleRules({ cssModules });
 
   return {