fix(css): Use *.module.css convention instead of *.mcss

Documentation/config.js

@@ -22,7 +22,6 @@ module.exports = {
   parallelWebpack: {
     maxConcurrentWorkers: 2,
     rootPath: path.resolve(path.join(__dirname, '..')),
-    headers: ["const autoprefixer = require('autoprefixer');"],
     plugins: [],
     rules: [
       `
@@ -32,26 +31,33 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
+            options: {
+              presets: [["@babel/preset-env", { useBuiltIns: 'entry' }]]
+            },
           },
         ],
       },
       {
-        test: /\\.mcss$/,
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
+        ],
+      },
+      {
+        test: /\.module\.css$/,
         use: [
           { loader: 'style-loader' },
           {
             loader: 'css-loader',
             options: {
-              localIdentName: '[name]-[local]_[sha512:hash:base32:5]',
+              localIdentName: '[name]-[local]_[sha512:hash:base64:5]',
               modules: true,
             },
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
-            },
-          },
+          { loader: 'postcss-loader' },
         ],
       },
       {
@@ -69,7 +75,6 @@ module.exports = {
       },
       { test: /\\.(png|jpg)$/, use: 'url-loader?limit=81920' },
       { test: /\\.html$/, loader: 'html-loader' },
-      { test: /\\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
       { test: /\\.cjson$/, loader: 'hson-loader' },
       { test: /\\.hson$/, loader: 'hson-loader' },
       `,

Documentation/content/docs/intro_vtk_as_es6_dependency.md

@@ -65,7 +65,10 @@ $ npm install kw-web-suite --save-dev
 ``` js ./webpack.config.js
 var path = require('path');
 var webpack = require('webpack');
-var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
+var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
+
+// Optional if you want to load *.css and *.module.css files
+// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules; 
 
 var entry = path.join(__dirname, './src/index.js');
 const sourcePath = path.join(__dirname, './src');
@@ -79,7 +82,6 @@ module.exports = {
   },
   module: {
     rules: [
-        { test: entry, loader: "expose-loader?MyWebApp" },
         { test: /\.html$/, loader: 'html-loader' },
     ].concat(vtkRules),
   },

Examples/Applications/GeometryViewer/index.js

@@ -20,7 +20,7 @@ import {
   ScalarMode,
 } from 'vtk.js/Sources/Rendering/Core/Mapper/Constants';
 
-import style from './GeometryViewer.mcss';
+import style from './GeometryViewer.module.css';
 import icon from '../../../Documentation/content/icon/favicon-96x96.png';
 
 let autoInit = true;

Examples/Applications/OBJViewer/index.js

@@ -15,7 +15,7 @@ import vtkMTLReader from 'vtk.js/Sources/IO/Misc/MTLReader';
 import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
 import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
 
-import style from './OBJViewer.mcss';
+import style from './OBJViewer.module.css';
 
 const iOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
 let autoInit = true;

Examples/Applications/SceneExplorer/index.js

@@ -11,7 +11,7 @@ import vtkHttpSceneLoader from 'vtk.js/Sources/IO/Core/HttpSceneLoader';
 import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract';
 
 import controlWidget from './SceneExplorerWidget';
-import style from './SceneExplorer.mcss';
+import style from './SceneExplorer.module.css';
 
 const iOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
 let autoInit = true;

Examples/Applications/SkyboxViewer/index.js

@@ -12,7 +12,7 @@ import vtkSkyboxReader from 'vtk.js/Sources/IO/Misc/SkyboxReader';
 import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract';
 // import vtkMobileVR from 'vtk.js/Sources/Common/System/MobileVR';
 
-import style from './SkyboxViewer.mcss';
+import style from './SkyboxViewer.module.css';
 
 // ----------------------------------------------
 // Possible URL parameters to look for:

Examples/Applications/TubesViewer/index.js

@@ -18,7 +18,7 @@ import {
 } from 'vtk.js/Sources/Rendering/Core/Mapper/Constants';
 import { VaryRadius } from 'vtk.js/Sources/Filters/General/TubeFilter/Constants';
 
-import style from './TubesViewer.mcss';
+import style from './TubesViewer.module.css';
 import icon from '../../../Documentation/content/icon/favicon-96x96.png';
 
 let autoInit = true;

Examples/Applications/VolumeViewer/index.js

@@ -16,7 +16,7 @@ import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
 import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
 import vtkFPSMonitor from 'vtk.js/Sources/Interaction/UI/FPSMonitor';
 
-import style from './VolumeViewer.mcss';
+import style from './VolumeViewer.module.css';
 
 let autoInit = true;
 const userParams = vtkURLExtract.extractURLParameters();

Examples/Geometry/DepthTest/index.js

@@ -18,7 +18,7 @@ import 'vtk.js/Sources/Common/Core/DataArray';
 import 'vtk.js/Sources/Common/Core/StringArray';
 import 'vtk.js/Sources/Common/DataModel/PolyData';
 
-import style from './style.mcss';
+import style from './style.module.css';
 
 function affine(val, inMin, inMax, outMin, outMax) {
   return ((val - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;

Examples/Geometry/SpheresAndLabels/index.js

@@ -9,7 +9,7 @@ import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
 import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
 import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
 
-import style from './style.mcss';
+import style from './style.module.css';
 
 // ----------------------------------------------------------------------------
 // Standard rendering code setup

Sources/Interaction/UI/CornerAnnotation/index.js

@@ -1,5 +1,5 @@
 import macro from 'vtk.js/Sources/macro';
-import style from 'vtk.js/Sources/Interaction/UI/CornerAnnotation/CornerAnnotation.mcss';
+import style from 'vtk.js/Sources/Interaction/UI/CornerAnnotation/CornerAnnotation.module.css';
 
 function noOp() {}
 

Sources/Interaction/UI/FPSMonitor/index.js

@@ -1,5 +1,5 @@
 import macro from 'vtk.js/Sources/macro';
-import style from 'vtk.js/Sources/Interaction/UI/FPSMonitor/FPSMonitor.mcss';
+import style from 'vtk.js/Sources/Interaction/UI/FPSMonitor/FPSMonitor.module.css';
 
 const noOp = Function.prototype;
 

Sources/Interaction/UI/Slider/index.js

@@ -1,6 +1,6 @@
 import macro from 'vtk.js/Sources/macro';
 import Constants from 'vtk.js/Sources/Interaction/UI/Slider/Constants';
-import style from 'vtk.js/Sources/Interaction/UI/Slider/Slider.mcss';
+import style from 'vtk.js/Sources/Interaction/UI/Slider/Slider.module.css';
 
 // ----------------------------------------------------------------------------
 // Helper methods

Sources/Interaction/UI/VolumeController/index.js

@@ -6,7 +6,7 @@ import svgLogo from 'vtk.js/Sources/Interaction/UI/Icons/Logo.svg';
 import svgEdge from 'vtk.js/Sources/Interaction/UI/Icons/Contrast.svg';
 import svgSpacing from 'vtk.js/Sources/Interaction/UI/Icons/Spacing.svg';
 
-import style from 'vtk.js/Sources/Interaction/UI/VolumeController/VolumeController.mcss';
+import style from 'vtk.js/Sources/Interaction/UI/VolumeController/VolumeController.module.css';
 
 // ----------------------------------------------------------------------------
 // Global structures

Sources/Rendering/Misc/RenderWindowWithControlBar/index.js

@@ -1,6 +1,6 @@
 import macro from 'vtk.js/Sources/macro';
 import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';
-import style from 'vtk.js/Sources/Rendering/Misc/RenderWindowWithControlBar/RenderWindowWithControlBar.mcss';
+import style from 'vtk.js/Sources/Rendering/Misc/RenderWindowWithControlBar/RenderWindowWithControlBar.module.css';
 
 // Load basic classes for vtk() factory
 import 'vtk.js/Sources/Common/Core/Points';

Sources/Testing/Examples/StandaloneSceneLoader/example/index.js

@@ -15,7 +15,7 @@ import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
 import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
 
 import controlWidget from './SceneControllerWidget';
-import style from './SceneLoader.mcss';
+import style from './SceneLoader.module.css';
 
 const iOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
 let autoInit = true;

Sources/Testing/Examples/WindTunnel/index.js

@@ -8,7 +8,7 @@ import vtkOutlineFilter from 'vtk.js/Sources/Filters/General/OutlineFilter';
 import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData';
 
 import controlPanel from './controller.html';
-import style from './windtunnel.mcss';
+import style from './windtunnel.module.css';
 
 // ----------------------------------------------------------------------------
 // Standard rendering code setup

Utilities/config/dependency.js

@@ -1,38 +1,29 @@
+const autoprefixer = require('autoprefixer');
+
 module.exports = {
   webpack: {
-    v1: {
-      loaders: [
-        {
-          test: /\.glsl$/i,
-          loader: 'shader-loader',
-        },
-        {
-          test: /\.js$/,
-          include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
-          loader: 'babel-loader?presets[]=env',
-        },
-        {
-          test: /\.worker\.js$/,
-          include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
-          loader: 'babel-loader?inline=true&fallback=false',
-        },
-      ],
-    },
-    v2: {
+    core: {
       rules: [
         {
           test: /\.glsl$/i,
-          include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
+          include: /vtk\.js/,
           loader: 'shader-loader',
         },
         {
           test: /\.js$/,
-          include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
-          loader: 'babel-loader?presets[]=env',
+          include: /vtk\.js/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env'],
+              },
+            },
+          ],
         },
         {
           test: /\.worker\.js$/,
-          include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
+          include: /vtk\.js/,
           use: [
             {
               loader: 'worker-loader',
@@ -42,5 +33,41 @@ module.exports = {
         },
       ],
     },
+    css: [
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        include: /\.module\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              localIdentName: '[name]-[local]_[sha512:hash:base64:5]',
+              modules: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
+            },
+          },
+        ],
+      },
+    ],
   },
 };

Utilities/config/rules-examples.js

@@ -1,7 +1,6 @@
 module.exports = [
   { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' },
   { test: /\.html$/, loader: 'html-loader' },
-  { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
   { test: /\.cjson$/, loader: 'hson-loader' },
   { test: /\.hson$/, loader: 'hson-loader' },
 ];

Utilities/config/rules-vtk.js

@@ -1,31 +1,40 @@
-const autoprefixer = require('autoprefixer');
-
 module.exports = [
   {
     test: /\.glsl$/i,
     loader: 'shader-loader',
   },
   {
     test: /\.js$/,
-    loader: 'babel-loader',
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env'],
+        },
+      },
+    ],
   },
   {
-    test: /\.mcss$/,
+    test: /\.css$/,
+    exclude: /\.module\.css$/,
+    use: [
+      { loader: 'style-loader' },
+      { loader: 'css-loader' },
+      { loader: 'postcss-loader' },
+    ],
+  },
+  {
+    test: /\.module\.css$/,
     use: [
       { loader: 'style-loader' },
       {
         loader: 'css-loader',
         options: {
-          localIdentName: '[name]-[local]_[sha512:hash:base32:5]',
+          localIdentName: '[name]-[local]_[sha512:hash:base64:5]',
           modules: true,
         },
       },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
-        },
-      },
+      { loader: 'postcss-loader' },
     ],
   },
   {

postcss.config.js

@@ -0,0 +1,5 @@
+const autoprefix = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoprefix],
+};