@collectai/webpack-react-css NPM

One of the problems when speaking about components modularity is CSS scoping. Shadow DOM will be the solution to this problem, but in the meantime developers have to sortout this issue. This module helps to prepare react and css files for browser bundles and scope CSS files. Once the build is executed, you can include your bundles in a html page and use them as global variables.

Browser dependencies: react.min.js and react-dom.min.js

Install

npm install --save @collectai/webpack-react-css

Create config file: component.webpack.js

const path = require('path')

const packageInfo = {
  outputPath: path.join(__dirname, '/static'),
  mainReactComponent: path.join(__dirname, '/components/MyServiceSettings.js'),
  cssSource: [
    path.join(__dirname, '/static/styles/styles.css'),
    path.join(__dirname, '/static/styles/settings.css'),
  ],
  cssServicePrefix: '.my-service-settings',
  bundleCSSFile: 'settings',
}

module.exports = packageInfo

Now you can compile it as node node_modules/@collectai/webpack-react-css component.webpack.js

You can watch the file passing the flag watch at the end: node node_modules/@collectai/webpack-react-css component.webpack.js watch

Run with NODE_ENV=production if you want to uglify and minify css and js bundle.

Limitations: Watch out for mainReactComponent name since it would be available in the window object it will clash if there is a javascript function with the same name.