chore: custom loader for rollup-postcss-plugin to handle reshadow files

webapp/packages/builder/configs/reshadow-loader.js

@@ -0,0 +1,48 @@
+const postcss = require('postcss')
+
+function isModuleFile(file) {
+  return /\.module\.[a-z]{2,6}$/.test(file)
+}
+
+module.exports =  {
+  name: 'reshadow-loader',
+  alwaysProcess: true,
+  // `test` option is dynamically set in ./loaders
+  async process({ code, map }) {
+
+    const postcssOptions = {
+      to: this.id,
+      from: this.id,
+      map: false,
+    };
+
+    console.log(this.id)
+
+    const moduleScope = isModuleFile(this.id) ? 'local' : 'global';
+
+    const plugins = [
+      require('reshadow/postcss')({ scopeBehaviour: moduleScope })
+    ]
+
+    const result = await postcss(plugins).process(code, postcssOptions)
+
+    for (const message of result.messages) {
+      if (message.type === 'dependency') {
+        this.dependencies.add(message.file)
+      }
+    }
+
+    for (const warning of result.warnings()) {
+      if (!warning.message) {
+        warning.message = warning.text
+      }
+
+      this.warn(warning)
+    }
+
+    return {
+      code: result.css,
+      map: map,
+    }
+  }
+}

webapp/packages/builder/configs/rollup.config.js

@@ -6,6 +6,7 @@ const commonjs = require('rollup-plugin-commonjs');
 const peerDepsExternal = require('rollup-plugin-peer-deps-external');
 const includePaths = require('rollup-plugin-includepaths');
 const typescriptPlugin = require('rollup-plugin-typescript2');
+const reshadowLoader = require('./reshadow-loader');
 
 const includePathOptions = {
   include: {},
@@ -56,20 +57,22 @@ function configBuilder(options = defaultBuilderOptions) {
         //   generateScopedName: "[local]___[hash:base64:5]"
         // },
         inject: true,
-        use: {
-          sass: {
-            includePaths: ['node_modules', '../../node_modules'],
-          }
-        },
-        // this option is added in dkrupenya/rollup-plugin-postcss#develop
-        // todo to be converted to custom loader
-        // firstPlugin: require('reshadow/postcss'),
-        // firstPlugin: require('reshadow/postcss')({ scopeBehaviour: 'global' }),
+        use: [
+          [
+            'reshadow-loader',
+            {}
+          ],
+          [
+            'sass',
+            {
+              includePaths: ['node_modules', '../../node_modules'],
+            }
+          ],
+        ],
+        loaders: [ reshadowLoader ],
         plugins: [
           require('postcss-preset-env')({ stage: 0 }),
           require('postcss-discard-comments'),
-          // todo move 'reshadow/postcss' to custom loader to run it before postcss-loader
-          require('reshadow/postcss'),
         ]
       }),
       peerDepsExternal(),

webapp/packages/core/assets/styles/_tabs.scss

@@ -33,7 +33,7 @@
     flex: 1;
   }
 
-  .__Tab {
+  Tab {
     composes: theme-typography--body2 from global;
     position: relative;
     outline: none;