Merge pull request #107 from ckeditor/i/106

Other: Added the `data-cke-inspector=true` attribute to all `<style>` tags injected by the application. Closes #106. Also: * Reduced the number of `<style>` tags injected by the application. * Used the `.ck-inspector` namespace for CSS custom properties used by the inspector to clean up the developer tools and improve DX.
ckeditor · Dec 4, 2020 · ee9cb3f · ee9cb3f
2 parents 0141bfd + 51eb770
commit ee9cb3f
Show file tree

Hide file tree

Showing 9 changed files with 774 additions and 399 deletions.
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "react-rnd": "^10.0.0",
     "redux": "^4.0.5",
     "sinon": "^7.2.3",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^2.3.5",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3"

diff --git a/src/components/horizontalnav.css b/src/components/horizontalnav.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-color-tab-background-hover: rgba(0,0,0,.07);
 	--ck-inspector-color-tab-active-border: #0DACEF
 }

diff --git a/src/components/navbox.css b/src/components/navbox.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-navbox-empty-background: #fafafa;
 }
 
@@ -30,6 +30,6 @@
 		display: flex;
 		flex-direction: row;
 		height: 100%;
-		overflow: hidden;		
+		overflow: hidden;
 	}
 }
diff --git a/src/components/pane.css b/src/components/pane.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-explorer-width: 300px;
 }
 

diff --git a/src/components/propertylist.css b/src/components/propertylist.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-color-property-list-property-name: #D0363F;
 	--ck-inspector-color-property-list-property-value-true: green;
 	--ck-inspector-color-property-list-property-value-false: red;

diff --git a/src/components/tree/tree.css b/src/components/tree/tree.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-color-tree-node-hover: #EAF2FB;
 	--ck-inspector-color-tree-node-name: #882680;
 	--ck-inspector-color-tree-node-attribute-name: #8a8a8a;

diff --git a/src/ui.css b/src/ui.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
+.ck-inspector {
 	--ck-inspector-color-white: #fff;
 	--ck-inspector-color-black: #000;
 	--ck-inspector-color-background: #F3F3F3;

diff --git a/webpack.config.js b/webpack.config.js
@@ -36,7 +36,15 @@ module.exports = ( env, argv ) => {
 				{
 					test: /\.css$/,
 					loaders: [
-						'style-loader',
+						{
+							loader: 'style-loader',
+							options: {
+								injectType: devMode ? 'styleTag' : 'singletonStyleTag',
+								attributes: {
+									'data-cke-inspector': true
+								}
+							}
+						},
 						{
 							loader: 'css-loader',
 							options: {