Webpack fails to import CSS text
Environment
- OS version: Ubuntu 22.04
- Browser version: Chrome 117
- Extension version: 3.19
- Last working version: 3.18.1
Steps to reproduce
- Run
npm install. - Run
npm run build:dev chrome.
Observed behavior
File dist/devenv/chrome/onpage-dialog-ui.postload.js contains the following code:
;// CONCATENATED MODULE: ./src/onpage-dialog/content-ui/dialog.css?text
const dialogtext_namespaceObject = "\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./dialog.css?text\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./dialog.css?text\";\n export default content && content.locals ? content.locals : undefined;\n";Expected behavior
File dist/devenv/chrome/onpage-dialog-ui.postload.js contains the following code:
;// CONCATENATED MODULE: ./src/onpage-dialog/content-ui/dialog.css?text
const dialogtext_namespaceObject = "/*\n * This file is part of Adblock Plus <https://adblockplus.org/>,\n * Copyright (C) 2006-present eyeo GmbH\n *\n * Adblock Plus is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License version 3 as\n * published by the Free Software Foundation.\n *\n * Adblock Plus is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.\n */\n\n:root\n{\n --color-premium: #EDA51E;\n --color-premium-hover: #EB9B05;\n}\n\n@font-face\n{\n font-family: \"Source Sans Pro\";\n font-style: normal;\n font-weight: 300;\n src: local(\"Source Sans Pro Light\"),\n local(\"SourceSansPro-Light\"),\n var(--abp-overlay-onpage-dialog-url-font-300)\n format(\"woff2\");\n}\n\n@font-face\n{\n font-family: \"Source Sans Pro\";\n font-style: normal;\n font-weight: 400;\n src: local(\"Source Sans Pro Regular\"),\n local(\"SourceSansPro-Regular\"),\n var(--abp-overlay-onpage-dialog-url-font-400)\n format(\"woff2\");\n}\n\n@font-face\n{\n font-family: \"Source Sans Pro\";\n font-style: normal;\n font-weight: 700;\n src: local(\"Source Sans Pro Bold\"),\n local(\"SourceSansPro-Bold\"),\n var(--abp-overlay-onpage-dialog-url-font-700)\n format(\"woff2\");\n}\n\nbody\n{\n margin: 16px;\n font-family: \"Source Sans Pro\", sans-serif;\n font-size: 14px;\n color: #333;\n background-color: #FFF;\n}\n\nbutton\n{\n cursor: pointer;\n}\n\n.flex\n{\n flex: 1;\n}\n\n/*******************************************************************************\n * Header\n ******************************************************************************/\n\nheader\n{\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n padding-bottom: 12px;\n border-bottom: 1px solid #C6C6C6;\n font-size: 16px;\n}\n\nhtml:not([dir=\"rtl\"]) header > *:not(:last-child),\nhtml[dir=\"rtl\"] header > *:not(:first-child)\n{\n margin-right: 4px;\n}\n\n#logo\n{\n width: auto;\n height: 20px;\n}\n\n#close\n{\n padding: 0px;\n border: 0px;\n background-color: transparent;\n}\n\n#close:hover\n{\n filter: brightness(2);\n}\n\n#close::before\n{\n display: block;\n width: 10px;\n height: 10px;\n border: 0.2rem solid transparent;\n background-image: var(--abp-overlay-onpage-dialog-url-icon-close);\n background-repeat: no-repeat;\n content: \"\";\n}\n\nh1\n{\n margin-bottom: 16px;\n font-size: 16px;\n}\n\n/*******************************************************************************\n * Body\n ******************************************************************************/\n\n#body\n{\n display: flex;\n flex-direction: column;\n line-height: 1.4em;\n}\n\nhtml:not([dir=\"rtl\"]) #body > *:not(:last-child),\nhtml[dir=\"rtl\"] #body > *:not(:first-child)\n{\n margin-bottom: 1em;\n}\n\n#body p\n{\n margin: 0;\n}\n\n/*******************************************************************************\n * Footer\n ******************************************************************************/\n\nfooter\n{\n margin-top: 16px;\n font-size: 16px;\n}\n\n#continue\n{\n width: 100%;\n padding: 14px;\n border: none;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 700;\n color: #FFF;\n text-transform: uppercase;\n background-color: var(--color-premium);\n}\n\n#continue:hover\n{\n background-color: var(--color-premium-hover);\n}\n";Further information
This regression has been introduced by #965 (closed), where we started using Webpack for generating CSS bundles. Apparently, the resource query rules for CSS file imports were insufficient for inlining CSS code, thereby breaking the styles of the on-page dialog (see internal comment).
Hints for testers
Other UI pages should continue having working styles.