[Bug]: Failed to execute 'insertRule' on 'CSSStyleSheet' : Storybook 7.4.3 + TailwindCSS

mariovde-IIO commented 11 months ago

Describe the bug

Hi

Currently I am running into the following error when using Storybook 7.4.3 and Tailwind. Meaning my css only gets partially created, missing a lot of other classes.

To Reproduce

Package jSON

"dependencies": { "@formatjs/intl-localematcher": "^0.4.0", "@grpc/grpc-js": "^1.8.20", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@nx/devkit": "16.5.0", "@nx/next": "16.5.0", "@radix-ui/react-select": "^1.2.2", "@schematics/angular": "^9.1.0", "@svgr/webpack": "^8.1.0", "@swc/helpers": "~0.5.0", "amqp-connection-manager": "^4.1.13", "amqplib": "^0.10.3", "axios": "^1.0.0", "class-transformer": "^0.3.1", "class-validator": "^0.14.0", "contentful": "^10.4.1", "ioredis": "^5.3.2", "jwks-rsa": "^3.0.1", "kafkajs": "^2.2.4", "mqtt": "^5.0.0", "nats": "^2.15.1", "negotiator": "^0.6.3", "next": "13.4.1", "next-auth": "^4.22.3", "passport": "^0.6.0", "passport-jwt": "^4.0.1", "react": "18.2.0", "react-dom": "18.2.0", "redis": "^4.6.7", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.0", "server-only": "^0.0.1", "tailwind-variants": "^0.1.14", "tslib": "^2.3.0", "zod": "^3.22.2" }, "devDependencies": { "@commitlint/cli": "^17.6.6", "@commitlint/config-conventional": "^17.6.6", "@nx/cypress": "16.5.0", "@nx/eslint-plugin": "16.5.0", "@nx/jest": "16.5.0", "@nx/js": "16.5.3", "@nx/linter": "16.5.0", "@nx/nest": "^16.5.3", "@nx/node": "16.5.3", "@nx/plugin": "^16.5.0", "@nx/react": "16.5.0", "@nx/storybook": "^16.5.3", "@nx/web": "16.5.3", "@nx/webpack": "16.5.3", "@nx/workspace": "16.5.0", "@rollup/plugin-commonjs": "^25.0.3", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.1.0", "@rollup/plugin-typescript": "^11.1.2", "@storybook/addon-a11y": "7.4.3", "@storybook/addon-designs": "^7.0.4", "@storybook/addon-essentials": "7.4.3", "@storybook/addon-storyshots": "7.1.0", "@storybook/core-common": "7.4.3", "@storybook/core-server": "7.4.3", "@storybook/nextjs": "7.4.3", "@swc-node/register": "~1.4.2", "@swc/cli": "~0.1.62", "@swc/core": "~1.3.51", "@swc/jest": "0.2.20", "@tailwindcss/forms": "^0.5.6", "@testing-library/jest-dom": "^6.1.2", "@testing-library/react": "14.0.0", "@testing-library/user-event": "^14.4.3", "@types/jest": "^29.4.0", "@types/negotiator": "^0.6.1", "@types/node": "18.14.2", "@types/passport-azure-ad": "^4.3.1", "@types/react": "18.2.13", "@types/react-dom": "18.2.6", "@typescript-eslint/eslint-plugin": "^5.60.1", "@typescript-eslint/parser": "^5.60.1", "autoprefixer": "^10.4.14", "babel-jest": "^29.4.1", "commitizen": "^4.3.0", "commitlint-config-cz": "^0.13.3", "cypress": "^12.16.0", "cz-customizable": "^7.0.0", "eslint": "~8.15.0", "eslint-config-next": "13.4.1", "eslint-config-prettier": "8.1.0", "eslint-plugin-cypress": "^2.10.3", "eslint-plugin-import": "2.27.5", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-prefer-arrow": "^1.2.3", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-sort-exports": "^0.8.0", "glob": "^10.3.3", "husky": "^8.0.3", "jest": "^29.4.1", "jest-environment-jsdom": "^29.4.1", "jest-environment-node": "^29.4.1", "lint-staged": "^13.2.3", "nx": "16.5.0", "nx-cloud": "latest", "postcss": "^8.4.26", "prettier": "^2.6.2", "prettier-plugin-tailwindcss": "^0.4.1", "rollup": "^3.26.3", "storybook-addon-pseudo-states": "^2.1.1", "tailwindcss": "^3.3.3", "ts-jest": "^29.1.0", "ts-node": "10.9.1", "typescript": "~5.1.3" }, "engines": { "node": "^18.16.1", "npm": "^9.5.1" }, "config": { "commitizen": { "path": "./node_modules/cz-customizable" } }, "nx": { "includedScripts": [] } }

Main.ts from storybook import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = { stories: ['../src/primitives/*/.mdx', '../src/*/.stories.@(ts|tsx|mdx)'], addons: [ '@storybook/addon-essentials', '@storybook/addon-a11y', 'storybook-addon-pseudo-states', '@storybook/addon-designs', ], docs: { autodocs: true, }, framework: { name: '@storybook/nextjs', options: {}, }, staticDirs: ['../public', '../../../apps/site/public'], webpackFinal: async (config) => { config.module = config.module || {}; config.module.rules = config.module.rules || [];

// This modifies the existing image rule to exclude .svg files
// since you want to handle those files with @svgr/webpack
const imageRule: any = config.module.rules.find((rule: any) =>
  rule?.['test']?.test('.svg')
);
if (imageRule) {
  imageRule['exclude'] = /\.svg$/;
}

// Configure .svg files to be loaded with @svgr/webpack
config.module.rules.push({
  test: /\.svg$/,
  use: ['@svgr/webpack'],
});

return config;

}, };

export default config;

// To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config // and https://nx.dev/packages/storybook/documents/custom-builder-configs

Create one component

`import { type ComponentProps, type ReactNode } from 'react'; import { type VariantProps, tv } from 'tailwind-variants';

type ButtonProps = ComponentProps<'button'> & VariantProps & { children: ReactNode; };

const buttonStyles = tv({ base: 'bg-primary-100 hover:bg-primary-50 focus-visible:outline-primary rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2', variants: {}, defaultVariants: {}, });

const Button = ({ className, children, testId = 'button', type, ...rest }: ButtonProps) => { return ( <button className={buttonStyles({ className })} {...rest}> {children} ); };

export { Button, buttonStyles, type ButtonProps };

run storybook `

System

Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @storybook/addon-designs: ^7.0.4 => 7.0.5 
    @storybook/addon-essentials: 7.4.3 => 7.4.3 
    @storybook/addon-storyshots: 7.1.0 => 7.1.0 
    @storybook/core-common: 7.4.3 => 7.4.3 
    @storybook/core-server: 7.4.3 => 7.4.3 
    @storybook/nextjs: 7.4.3 => 7.4.3

Additional context

No response

samkit5495 commented 7 months ago

Any updates on this one ?

auirarrazaval commented 4 months ago

Following up on this, as I'm having the same issue

noranda commented 3 months ago

Running into the same issue here. On storybook 8.0.5. DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.has-\[\:checked\]\:active\:bg-ezgreen-800:active:has(:checked), .has-\[\:checked\]\.pseudo-active\:bg-ezgreen-800.pseudo-active:has(:checked), .pseudo-active-all .has-\[\:checked\]\\:bg-ezgreen-800:has(:checked) { --tw-bg-opacity: 1; background-color: rgb(0 37 29 / var(--tw-bg-opacity)); }'.

storybookjs / storybook