*.entry.css classnames are no longer hashed

library/README.md

@@ -2,15 +2,14 @@
 
 Breaking changes:
 
-- v0.0.51 - `chunk-manifest.json` changed
+- v0.0.51 - `chunk-manifest.json` changed. `*.entry.css` classnames are no longer hashed.
 - v0.0.47 - Universal apps no longer have an extra `<div />` around the root-app-node and the script-tag.
-- v0.0.44 - `*.entry.css` are now also hashed, use `css-manifest.json` to obtain the names
+- v0.0.44 - `*.entry.css` filenames are now also hashed, use `css-manifest.json` to obtain the filenames
 - v0.0.41 - `*.*.js` are no longer all treated as templates, by default only `.html.js`, `.txt.js` and `.json.js` are considered
 - v0.0.40 - `src` is no longer treated as `node_modules`, use absolute paths (`/x`) to retrieve modules from subdirectories
 - v0.0.40 - Javascripts are now hashes, they require an additional import to load
 - v0.0.35 - Stylesheets are now hashes, they require an additional import to load
 
-
 # Kaliber.js build
 
 An opinionated zero configuration build stack with React, PostCSS, Babel and Webpack as major ingredients.
@@ -75,7 +74,7 @@ Ruby popularized 'convention over configuration', this library has a set of conv
 - `src` - Source files live in the `src` directory.
 - `target` - Compiled / processed files are stored in the `target` directory.
 - `src/**/*.entry.js` - Compiled as a separate `.js` webpack entry.
-- `src/**/*.entry.css` - Compiled as a separate `.css` webpack entry, for each CSS file a `.json` file is generated containing the class names.
+- `src/**/*.entry.css` - Compiled as a separate `.css` webpack entry (*without* hashed classnames).
 - `src/**/*.{type}.js` - Compiled as webpack entry using a renderer associated with the type.
   - `{type}` refers to the renderer that is used
     - `html` - Expects JSX to be returned from the template

library/lib/build.js

@@ -68,6 +68,11 @@ const babelLoader = {
   }
 }
 
+const cssLoaderGlobalScope = {
+  loader: 'css-loader',
+  options: { globalScopeBehaviour: true }
+}
+
 const cssLoader = {
   loader: 'css-loader'
 }
@@ -213,7 +218,7 @@ module.exports = function build({ watch }) {
 
         {
           test: /\.entry\.css$/,
-          loaders: ['to-json-file-loader', cssLoader]
+          loaders: [cssLoaderGlobalScope]
         },
 
         {

library/webpack-loaders/css-loader.js

@@ -4,7 +4,9 @@ const { relative, dirname } = require('path')
 
 const isProduction = process.env.NODE_ENV === 'production'
 
-function createPlugins(minifyOnly, { onExport, resolve, processUrl }) {
+function createPlugins(loaderOptions, { onExport, resolve, processUrl }) {
+  const { minifyOnly = false, globalScopeBehaviour = false } = loaderOptions
+
   return [
     // these plugis need to run on each file individual file
     // look at the source of postcss-modules to see that it effectively runs all modules twice
@@ -13,6 +15,7 @@ function createPlugins(minifyOnly, { onExport, resolve, processUrl }) {
       require('postcss-import')({ glob: true, resolve }),
       require('postcss-apply')(), // https://github.com/kaliberjs/build/issues/34
       require('postcss-modules')({
+        scopeBehaviour: globalScopeBehaviour ? 'global' : 'local',
         getJSON: (_, json) => { onExport(json) },
         generateScopedName: isProduction ? '[hash:base64:5]' : '[folder]-[name]-[local]__[hash:base64:5]'
       })
@@ -40,9 +43,8 @@ module.exports = function CssLoader(source, map) {
       : Promise.resolve(url)
   }
 
-  const { minifyOnly = false } = loaderUtils.getOptions(this) || {}
-
-  const plugins = createPlugins(minifyOnly, handlers)
+  const loaderOptions = loaderUtils.getOptions(this) || {}
+  const plugins = createPlugins(loaderOptions, handlers)
   const filename = relative(this.rootContext, this.resourcePath)
   const options = {
     from: this.resourcePath,
@@ -61,9 +63,12 @@ module.exports = function CssLoader(source, map) {
 
       this.emitFile(filename, css, map.toJSON())
 
-      exports.cssHash = require('crypto').createHash('md5').update(css).digest('hex')
-
-      callback(null, exports)
+      if (loaderOptions.globalScopeBehaviour) {
+        callback(null, '// postcss-modules is disabled, no exports available')
+      } else {
+        exports.cssHash = require('crypto').createHash('md5').update(css).digest('hex')
+        callback(null, exports)
+      }
     })
     .catch(e => { callback(e) })