[Bug]: Failed to execute 'insertRule' on 'CSSStyleSheet' : Storybook 8.0.6

[kirill-borisyonok]

Describe the bug

runtime.js:7 DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '[_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-hour-field:focus, [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-hour-field.pseudo-focus, .pseudo-focus-all [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-hour-field, [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-minute-field:focus, [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-minute-field.pseudo-focus, .pseudo-focus-all [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-minute-field, [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-second-field:focus, [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-second-field.pseudo-focus, .pseudo-focus-all [_nghost-ng-c3085309357] .lk-input__field[_ngcontent-ng-c3085309357]::-webkit-datetime-edit-second-field { background-color: var(--c-brand); color: rgb(255, 255, 255); outline: none; }'.
at C (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_preview_js-node_modules_storybook_addon-bac-2d2ee3.iframe.bundle.js:153940:32)
at D (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_preview_js-node_modules_storybook_addon-bac-2d2ee3.iframe.bundle.js:153922:15)
at http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_preview_js-node_modules_storybook_addon-bac-2d2ee3.iframe.bundle.js:154032:77
at Array.map ()
at f (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_preview_js-node_modules_storybook_addon-bac-2d2ee3.iframe.bundle.js:154032:68)
at Object. (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_preview_js-node_modules_storybook_addon-bac-2d2ee3.iframe.bundle.js:154035:80)
at http://localhost:6006/sb-preview/runtime.js:7:8828
at Array.forEach ()
at Channel.handleEvent (http://localhost:6006/sb-preview/runtime.js:7:8812)
at handler (http://localhost:6006/sb-preview/runtime.js:7:7900) null

To Reproduce

package.json
"dependencies": {
"@abacritt/angularx-social-login": "^2.2.0",
"@angular/animations": "17.2.1",
"@angular/cdk": "17.2.0",
"@angular/common": "17.2.1",
"@angular/compiler": "17.2.1",
"@angular/core": "17.2.1",
"@angular/forms": "17.2.1",
"@angular/material": "17.2.0",
"@angular/platform-browser": "17.2.1",
"@angular/platform-browser-dynamic": "17.2.1",
"@angular/router": "17.2.1",
"@ngrx/effects": "17.1.0",
"@ngrx/router-store": "17.1.0",
"@ngrx/store": "17.1.0",
"@ngrx/store-devtools": "17.1.0",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"@storybook/test": "^8.0.6",
"lodash": "4.17.21",
"moment-timezone": "^0.5.45",
"ngx-socket-io": "4.6.1",
"rxjs": "7.8.1",
"swiper": "^11.0.4",
"tinycolor2": "1.6.0",
"tslib": "2.6.2",
"zone.js": "0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.2.0",
"@angular-eslint/builder": "17.2.1",
"@angular-eslint/eslint-plugin": "17.2.1",
"@angular-eslint/eslint-plugin-template": "17.2.1",
"@angular-eslint/schematics": "17.2.1",
"@angular-eslint/template-parser": "17.2.1",
"@angular/cli": "17.2.0",
"@angular/compiler-cli": "17.2.1",
"@compodoc/compodoc": "1.1.23",
"@ngrx/eslint-plugin": "17.1.0",
"@storybook/addon-docs": "^8.0.6",
"@storybook/addon-essentials": "^8.0.6",
"@storybook/addon-interactions": "^8.0.6",
"@storybook/addon-links": "^8.0.6",
"@storybook/addon-toolbars": "^8.0.6",
"@storybook/angular": "^8.0.6",
"@storybook/blocks": "^8.0.6",
"@storybook/manager-api": "^8.0.6",
"@types/jasmine": "5.1.4",
"@types/tinycolor2": "1.4.6",
"@typescript-eslint/eslint-plugin": "7.0.1",
"@typescript-eslint/parser": "7.0.1",
"chromatic": "10.9.5",
"eslint": "8.56.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-storybook": "^0.8.0",
"husky": "9.0.11",
"jasmine-core": "5.1.2",
"karma": "6.4.2",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0",
"lint-staged": "15.2.2",
"prettier": "3.2.5",
"sass": "1.70.0",
"sass-loader": "14.1.0",
"storybook": "^8.0.6",
"storybook-addon-pseudo-states": "^3.0.1",
"typescript": "5.3.3"
}
Main.ts from storybook
const config: StorybookConfig = {
stories: ['../src//*.mdx', '../src//*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-backgrounds',
'@storybook/addon-actions',
'@storybook/addon-controls',
'@storybook/addon-docs',
'@storybook/addon-highlight',
'@storybook/addon-interactions',
'storybook-addon-pseudo-states'
],
framework: {
name: '@storybook/angular',
options: {}
},
docs: {
autodocs: 'tag'
},
staticDirs: [
{ from: '../src/assets/fonts', to: '/assets/fonts' },
{ from: '../src/assets/svg', to: '/assets/svg' }
],
webpackFinal: async (config: Configuration) => {
if (config.resolve) {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
}
return config;
},
};

export default config;

Create one component
set styles:
&::-webkit-datetime-edit-hour-field:focus,
&::-webkit-datetime-edit-minute-field:focus,
&::-webkit-datetime-edit-second-field:focus {
background-color: red;
color: black;
outline: none;
}

run storybook

System

MacOs: 14.4.1

Additional context

No response