{"record":{"id":"c901c7ee298099da","repo":"plotly/plotly.js","slug":"addstylerule-failed","errorCode":null,"errorMessage":"addStyleRule failed","messagePattern":"addStyleRule failed","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/lib/dom.js","lineNumber":82,"sourceCode":"        // Do not proceed if user disable inline styles explicitly...\n        return;\n    }\n    if(!style) {\n        style = document.createElement('style');\n        style.setAttribute('id', id);\n        // WebKit hack :(\n        style.appendChild(document.createTextNode(''));\n        document.head.appendChild(style);\n    }\n    var styleSheet = style.sheet;\n\n    if(!styleSheet) {\n        loggers.warn('Cannot addRelatedStyleRule, probably due to strict CSP...');\n    } else if(styleSheet.insertRule) {\n        styleSheet.insertRule(selector + '{' + styleString + '}', 0);\n    } else if(styleSheet.addRule) {\n        styleSheet.addRule(selector, styleString, 0);\n    } else loggers.warn('addStyleRule failed');\n}\n\n/**\n * to remove from the page a stylesheet identified by a given uid\n */\nfunction deleteRelatedStyleRule(uid) {\n    var id = 'plotly.js-style-' + uid;\n    var style = document.getElementById(id);\n    if(style) removeElement(style);\n}\n\n/**\n * Setup event listeners on button elements to emulate the ':hover' state without using inline styles,\n * which is not allowed with strict CSP.  This supports modebar buttons set with the 'active' class,\n * in which case, the active style remains even when it's no longer hovered.\n * @param {string} selector selector for button elements to be styled when hovered\n * @param {string} activeSelector selector used to determine if selected element is active\n * @param {string} childSelector the child element on which the styling needs to be updated","sourceCodeStart":64,"sourceCodeEnd":100,"githubUrl":"https://github.com/plotly/plotly.js/blob/1d090e0b5ffb8d0fdf6e0e4ff51d3f3cf67f1314/src/lib/dom.js#L64-L100","documentation":"After obtaining a stylesheet object, addRelatedStyleRule inserts rules with insertRule, falling back to the legacy addRule. If a sheet exists but supports neither method (or the call context is unexpected), the library warns 'addStyleRule failed' and the CSS is not applied.","triggerScenarios":"A browser/environment where style.sheet exists but lacks both insertRule and addRule — e.g. non-standard DOM implementations, jsdom/SSR shims, or a stylesheet in a state that exposes no rule-insertion API.","commonSituations":"Server-side rendering or running plotly.js in jsdom-based tests where CSSOM is partially implemented; exotic embedded browsers or webviews with incomplete CSSOM; monkey-patched document/head in an app's polyfills.","solutions":["Run plotly.js only in a real browser environment; in tests, polyfill CSSOM or mock insertRule in your DOM shim.","Check for polyfills that replace document.head or style elements; remove or fix them.","Confirm the target browser supports CSSStyleSheet.insertRule (all modern ones do) — drop legacy webview targets if they don't.","If the warning appears in SSR output, guard plotly.js behind client-only imports (dynamic import in useEffect / client-only component).","File an upstream issue with environment details if triggered in a supported browser."],"exampleFix":"// before (SSR / jsdom)\nimport Plotly from 'plotly.js-dist'; // runs during SSR, no CSSOM\n// after\nuseEffect(() => {\n  import('plotly.js-dist').then(Plotly => Plotly.newPlot(gd, data, layout));\n}, []);","handlingStrategy":"fallback","validationCode":"function cssomReady() {\n  const s = document.createElement('style');\n  document.head.appendChild(s);\n  const sheet = s.sheet;\n  const ok = !!sheet && (typeof sheet.insertRule === 'function' || typeof sheet.addRule === 'function');\n  s.remove();\n  return ok;\n}","typeGuard":null,"tryCatchPattern":"if (!cssomReady()) {\n  console.warn('CSSOM unavailable; skipping dynamic plotly styles');\n  return fallbackStaticStyles();\n}","preventionTips":["Run plotly.js only in real browsers; lazy-load it client-side in SSR apps.","Polyfill or stub CSSOM in jsdom-based test suites.","Remove polyfills that replace document.head or style elements.","Drop legacy webviews lacking insertRule/addRule."],"tags":["cssom","environment","stylesheet"],"backgroundTag":"cssom-unsupported-environment","analyzedSha":"1d090e0b5ffb8d0fdf6e0e4ff51d3f3cf67f1314","analyzedAt":"2026-09-02T22:03:39.906Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}