Nwb: Question regarding nwb & webpack configuration for commonjs build (/lib)

[bluce1017]

This issue is a: Question / support request

Problem: I'd like to use webpack & postcss for css development. I'm creating a react-component library and publishing these components to a repo for shared use. I'm using NWB to bootstrap the components and for creating the commonjs builds. I thought I'd be able to use webpack & postcss after reading the docs, but I'm not seeing the postcss have any effect on the commonjs build.

Here's my nwb config below...

var config = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: false
  },
  webpack: {
    rules: {
      css: {
        modules: true,
        localIdentName: '[local]__[path][name]__[hash:base64:5]'
      },
      postcss: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
  }
};

module.exports = config;

If I run the demo for the component, I do see postcss working as intended. But if I publish the commonjs build and reference it another project, the component is missing:

1. The [local]__[path][name]__[hash:base64:5] class names
2. Any auto-prefix output for styles

Is this something that is not supported? Any help would be appreciated.

[bluce1017]

More info:

Demo/dist/*.css looks like this:
.button-container__src-styles__hQ8y-{display:-webkit-box;display:-ms-flexbox;display:flex}.button-12345__src-styles__2O_vv{padding:8px 16px}

But both /es/.css & /lib/.css have:
`.button-container {
display: flex;
}

.button-12345 {
padding: 8px 16px 8px 16px;
}
`
Is webpack/postcss not supported for lib/es builds? Is there a way to enable it?

[insin]

Webpack isn't involved in creating lib/ and es/, we're just running the Babel CLI.

Styles work as expected in the demo because that's using Webpack (that's also why you'll get a CSS bundle in the umd/ directory, which was accidental!).

The only component I've published CSS alongside uses vanilla CSS in a top-level css/ directory and the component module imports it using ../css/, so it works from es/, lib/ and src/ (and depends on the user having a bundler which supports that).

---

We can probably make nwb do whatever needs to be done to support publishing compiled stylesheets to npm, but I don't know what the common practices are for that, so any pointers would be welcome.

We already have postcss available as a transitive dependency, so nwb could use it to compile stylesheets (and the nwb Sass, Stylus and Less plugins could expose a new method to use them to compile).

If we have some solid use cases, we can figure out what needs to be done, so we need answers to things like:

• Where do the source stylesheets live and where do they get compiled to?
• Is compiled CSS imported from JavaScript modules or is including it an exercise for the user?
• Should we bundle all the CSS together or create individual CSS files?
  
  
  
  • What about common styles for multiple components?
  
  
  • Is there a Babel plugin which can handle renaming imports from e.g. import './MyComponent.scss' to import './MyComponent.css', assuming that's the output from compiling individial stylesheets?
  
  
• Does Webpack support stylesheets as entry points? It would be nice to use its existing preprocessor -> postcss -> css stack instead of having to wire things together ourselves.

[insin]

Here's a Babel transform which would replace extensions for stylesheet preprocessors with .css:

http://astexplorer.net/#/gist/d45675e8ea4a1dd4908a2a9207619470/4101ea12322f2d8dca668c1f85dddc57eabfbb87

[insin]

To summarise some of the above, is this a desirable outcome for React component/library builds?

(Where components import same-named stylesheets)

src/             (es|lib)/
  A.js             A.js
  A.scss   ==>     A.css
  B.js             B.js
  B.scss           B.css
                 umd/
                   my-library.js
                   my-library.css
                   my-library.min.js
                   my-library.min.css

What about if it's using CSS modules? https://github.com/michalkvasnicak/babel-plugin-css-modules-transform?

[bluce1017]

Sorry for leaving this open, I eventually decided upon using https://www.styled-components.com/ in my project which negated the need for postcss. Styled components works with both the demo and the published libraries.