Error while running chromatic: execute 'insertRule' on 'CSSStyleSheet':

[lloydrichards]

Bug report

I'm just building out the story for the new shadcn/ui Input OTP component and ran into an error when building out the chromatic:

{
  "stack": "<stack trace above>",
  "message": "Error: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '[data-input-otp]:autofill { background: transparent !important; text: transparent !important; border-color: transparent !important; opacity: 0 !important; }'."
}

lloydrichards/shadcn/ui/build3

In storybook the component runs without any issue and even in the story build out by chromatic there doesnt seem to be any issue.

The component used input-otp by @guilhermerodz so i'm not sure if this is something that has come up before with this component, but nothing was popping out when looking for a solution online.

Have already a bit of contact with @kylegach from working on the PR from shadcn/ui so could reach out there too, but thought this might be a better place to find answers 🙏 thanks!

[guilhermerodz]

hi @lloydrichards i would love to understand steps to reproduce? Haven't used Chromatic CLI yet btw

[lloydrichards]

Should be pretty easy if you have storybook already setup. What i've done is created a basic story for the input-otp (source here):

const meta = {
  title: "ui/InputOTP",
  component: InputOTP,
  tags: ["autodocs"],
  argTypes: {},
  args: {
    maxLength: 6,
    pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
    render: ({ slots }) => (
      <InputOTPGroup>
        {slots.map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}
      </InputOTPGroup>
    ),
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof InputOTP>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {}

With this working in storybook I'm just running the chromatic CLI (npx chromatic --project-token <your-project-token>) and getting the error during the build.

[guilhermerodz]

Cool, trying it right now and will get back to you

[lloydrichards]

Had a little bit of a poke around in your repo to see what part Chromatic is complaining about and found (this):

        const styleEl = document.createElement('style')
        styleEl.id = 'input-otp-style'
        document.head.appendChild(styleEl)
        styleEl.sheet?.insertRule(
          '[data-input-otp]::selection { background: transparent !important; }',
        )
        const autofillStyles =
          'background: transparent !important; text: transparent !important; border-color: transparent !important; opacity: 0 !important;'
        styleEl.sheet?.insertRule(
          `[data-input-otp]:autofill { ${autofillStyles} }`,
        )
        styleEl.sheet?.insertRule(
          `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`,
        )

Seems pretty innocuous, but I did check the documentation for :autofocus on mdn and there is a note about many browsers not allowing overrides:

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:

CSS

background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

This means that you cannot set the background-color, background-image, or color in your own rules.

Might still be an issue with chromatic being too sensitive to these kind of conflicts though cause none of my browsers seem to make much fuss out of this 🤷‍♂️

[guilhermerodz]

I believe adding some trycatch statements on input-otp is necessary as of today. I don't want to bother any build processes, like yours.

Yes Chromatic is very sensitive to errors in all browsers and I believe that's the way to go.

For the library to look like magic, I had to execute hacky tricks. I'm updating input-otp to 1.0.2 today and you should be able to update & compile.

I'll let you know as soon as I update it on npm.

[guilhermerodz]

hi @lloydrichards now you can run

npm install input-otp@latest

as of 1.1.0, your issue is solved!

[lloydrichards]

as of 1.1.0, your issue is solved!

Amazing! have just updated and rerun chromatic and everything works 🙇‍♂️ Thank you so much!

[thafryer]

Thanks @guilhermerodz for helping to get this resolved!