Namespaced all discovery styles (#25)

* Namespaced all discovery styles

* Refactored style namespacing

* Partially fixed styles isolation

* Fixed discovery js styles pollution

* Small fixes and CHANGELOG

Author: exdis

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.5.2 (06-08-2019)
+
+* Fixed style pollution
+
 ## 1.5.1 (01-08-2019)
 
 * Fixed issue with broken styles on several sites

core/constants.js

@@ -0,0 +1,3 @@
+module.exports = {
+    WRAPPER_NODE: 'json-discovery-browser-extension'
+};

core/cssTransformLoader.js

@@ -0,0 +1,39 @@
+const csstree = require('css-tree');
+const { WRAPPER_NODE } = require('./constants');
+
+const walkTree = ast => {
+    csstree.walk(ast, {
+        visit: 'Rule',
+        enter: function(node) {
+            // Namespace all discovery styles
+            node.prelude.children.forEach(child => {
+                child.children.prependData({
+                    type: 'WhiteSpace',
+                    value: ' '
+                });
+                child.children.prependData({
+                    type: 'ClassSelector',
+                    name: WRAPPER_NODE
+                });
+            });
+        }
+    });
+
+    return csstree.generate(ast);
+};
+
+/**
+ * Css Transform loader
+ * @param {string} source
+ */
+module.exports = function(source) {
+    const callback = this.async();
+
+    const ast = csstree.parse(source);
+
+    try {
+        callback(null, walkTree(ast));
+    } catch (error) {
+        callback(error);
+    }
+};

core/webpack.base.js

@@ -45,6 +45,9 @@ const config = ({ manifest, outputPath }) => ({
                         options: {
                             import: true
                         }
+                    },
+                    {
+                        loader: require.resolve('./cssTransformLoader.js')
                     }
                 ]
             },
@@ -99,8 +102,7 @@ const config = ({ manifest, outputPath }) => ({
             }
         ]),
         new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            chunkFilename: 'css/[id].css'
+            filename: 'css/[name].css'
         })
     ],
     performance: { hints: false }

package-lock.json

@@ -1,11 +1,10 @@
 {
   "name": "jsondiscovery",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "DiscoveryJson",
   "author": "exsdis@gmail.com",
   "license": "MIT",
   "private": false,
-  "dependencies": {},
   "scripts": {
     "lint": "eslint --ext .js src core",
     "dev": "webpack --config ./core/webpack.dev.js --hide-modules",
@@ -26,6 +25,7 @@
     "copy-webpack-plugin": "^4.5.4",
     "cross-env": "^5.1.0",
     "css-loader": "^1.0.1",
+    "css-tree": "^1.0.0-alpha.29",
     "enhanced-resolve": "^3.4.1",
     "eslint": "^4.9.0",
     "file-loader": "^1.1.5",

package.json

@@ -2,6 +2,7 @@ import { Widget, router, complexViews } from '@discoveryjs/discovery/dist/lib.um
 import settingsPage from '../settings';
 import '@discoveryjs/discovery/dist/lib.css';
 import './index.css';
+import { WRAPPER_NODE } from '../../core/constants';
 
 /**
  * Discovery initialization
@@ -10,7 +11,7 @@ import './index.css';
  */
 function initDiscovery(options) {
     const { settings } = options;
-    const discovery = new Widget(options.wrapper);
+    const discovery = new Widget(options.discoveryNode);
 
     discovery.apply(router);
     discovery.apply(complexViews);
@@ -138,17 +139,18 @@ function getSettings(cb) {
         document.body.style.height = '100%';
         document.body.style.border = 'none';
         document.body.style.webkitTextSizeAdjust = '100%';
+        document.body.style['background-color'] = '#fff';
+        document.body.classList.add(WRAPPER_NODE);
 
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('discovery');
+        const discoveryNode = document.createElement('div');
+        discoveryNode.style.height = '100%';
+        document.body.appendChild(discoveryNode);
 
-        document.body.appendChild(wrapper);
-
-        wrapper.style['background-color'] = '#fff';
+        document.body.appendChild(discoveryNode);
 
         getSettings(settings => {
             initDiscovery({
-                wrapper,
+                discoveryNode,
                 raw,
                 data: json,
                 settings