Updated discovery, fixed styles isolation

Author: exdis

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.6.2 (18-02-2020)
+
+* Updated `discovery` to `1.0.0-beta.30`
+* CSS style isolation via `discovery-cli`
+* Fixed issue with suggestion popup on `report` page
+
 ## 1.6.1 (18-02-2020)
 
 * Updated `discovery` to `1.0.0-beta.28` and `jora` to `1.0.0-alpha.13`

core/constants.js

@@ -1,3 +1,3 @@
 module.exports = {
-    WRAPPER_NODE: 'json-discovery-browser-extension'
+    CSS_ISOLATE_MARKER: 'style-boundary-8H37xEyN'
 };

core/cssTransformLoader.js

@@ -0,0 +1,18 @@
+const { bundleCss } = require('@discoveryjs/cli').build;
+const { CSS_ISOLATE_MARKER } = require('../core/constants');
+
+const isolateOptions = {
+    isolate: CSS_ISOLATE_MARKER
+};
+
+/**
+ * Css Transform loader
+ * @param {string} source
+ */
+module.exports = function() {
+    const callback = this.async();
+
+    bundleCss(this.resourcePath, isolateOptions)
+        .then(({ content }) => callback(null, content))
+        .catch(error => callback(error));
+};

core/isolateCss.js

@@ -1,9 +1,11 @@
+const webpack = require('webpack');
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const pkg = require('../package.json');
 const manifestBase = require('../src/manifest.js');
 const manifestFirefox = require('../src/manifest-firefox.js');
+const { CSS_ISOLATE_MARKER } = require('./constants');
 
 const resolve = dir => path.join(__dirname, '..', 'src', dir);
 const config = ({ entry = resolve('./content/inject'), manifest, outputPath, staticCopy = true }) => ({
@@ -36,7 +38,6 @@ const config = ({ entry = resolve('./content/inject'), manifest, outputPath, sta
         rules: [
             {
                 test: /\.css$/,
-                exclude: /discovery\.css$/,
                 use: [
                     {
                         loader: MiniCssExtractPlugin.loader
@@ -48,21 +49,7 @@ const config = ({ entry = resolve('./content/inject'), manifest, outputPath, sta
                         }
                     },
                     {
-                        loader: require.resolve('./cssTransformLoader.js')
-                    }
-                ]
-            },
-            {
-                test: /discovery\.css$/,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            import: true
-                        }
+                        loader: require.resolve('./isolateCss.js')
                     }
                 ]
             },
@@ -103,6 +90,9 @@ const config = ({ entry = resolve('./content/inject'), manifest, outputPath, sta
         ]
     },
     plugins: [
+        new webpack.DefinePlugin({
+            CSS_ISOLATE_MARKER: JSON.stringify(CSS_ISOLATE_MARKER)
+        }),
         new CopyWebpackPlugin([
             ...staticCopy ? [{
                 from: path.join(__dirname, '..', 'static')