Possibility to specify custom pattern for the classname

[mightyaleksey]

Nice that already works for me. Does this already has an option to define how class names are generated? Basically I’d need to get the same class names as with webpack using ?localIdentName='[local]--[hash:base64:5]' or a different variation of the setting.
by @maxhoffmann

I'm not sure whether this fits in here, but for those who use webpack with css-loader/locals: I forked css-loader and added a new parameter for localIdentName: sourceHash. This generate a hash from the localName and the source code, so the class names are stable.
https://github.com/Aluxian/css-loader
by @aluxian

[maxhoffmann]

Thanks for reopening this issue here. How does the css modulde require hook currently generate the class names? Maybe I can configure webpack to generate the class names differently so that universal usage is possible.

I wonder if you can provide any information about modules which you use?

We currently use React and webpack to compile JS, but Stylus for CSS. We have very strict naming conventions so that all styles are scoped by manually prefixing each class name with its unique component name. A gradual refactoring to use css-modules would therefore be possible without big rewrites. There is more to read about the setup of the current project I’m working on here if you are interested. Hope this answers your question.

[mightyaleksey]

Sorry for the delay. Require-hook is pretty simple. It is a small wrapper for the PostCSS package and its plugins.

PostCSS parses the source CSS file, then runs some transformations, implemented with the plugins. They are - postcss-modules-extract-imports, postcss-modules-local-by-default and postcss-modules-scope. After that it runs the private plugin to extract tokens from the CSS node tree, which you usually get from require function.
Back to your question I think postcss-modules-scope plugin generates resulting class names. It uses relative paths from the root directory (current specified with the root option or process.cwd() by default) to the source CSS file. So in order to implement this feature we have to start from updating that plugin.

By the way, I haven't checked it out, but looks like it is possible to specify the custom function for generating class names: https://github.com/css-modules/postcss-modules-scope/blob/master/src/index.js#L33
The default implementation is here: https://github.com/css-modules/postcss-modules-scope/blob/master/src/index.js#L159-L162

I still haven't checked how webpack generates class names, but in my opinion your request doesn't require much work.

[mightyaleksey]

As a quick solution you can try to specify custom plugins for the require-hook with use option.
You can try something like this:

var ExtractImports = require('postcss-modules-extract-imports');
var LocalByDefault = require('postcss-modules-local-by-default');
var Scope = require('postcss-modules-scope');
var cssHook = require('css-modules-require-hook');

function generateScopedName(exportedName, path) {/* your code here */}

var scopeInstance = new Scope({generateScopedName: generateScopedName});

cssHook({
  use: [
    ExtractImports,
    LocalByDefault,
    scopeInstance
  ]
});

[mightyaleksey]

I'm making a small demo project to show a possible way of css-modules usage in the universal apps. So, if you are interested, you can try css-modules on practice with https://github.com/sullenor/todos

[pocketjoso]

@sullenor I'm trying to figure out a good way to make use of this for a universal render with webpack. I tried your quick example above, but it doesn't work out of the box, and I'm not familiar with postcss plugins..

When Scope is required/imported it seems to self execute (without options), whereas the scopeInstance you create somehow doesn't seem to get used (just based on simple log debugging)? Do you know how to make it work in this context? Maybe @sokra knows better?

Cheers

[mightyaleksey]

@pocketjoso I'm not good with webpack itself :) In the latest version, I added another option generateScopedName, so you don't need to work with plugins manually.

I assume you should set up the same root directories for webpack and require hook. For the hook, you can use rootDir. So, your declaration will be smthing like that:

var cssHook = require('css-modules-require-hook');

cssHook({
  generateScopedName: function (exportedName, path) { ... },
  rootDir: process.cwd() // by default or you can change it manually
});

May be, if you are familiar to the css-loader, which is used by webpack (I assume it generates names), you should use it to set up function generateScopedName.

Unfortunately, I don't know anymore. Hope that helps.

[mightyaleksey]

Here is an example of generateScopedName function, which is used by default in the plugin: https://github.com/css-modules/postcss-modules-scope/blob/master/src/index.js#L159-L162

[mightyaleksey]

@joeybaker Hey, Joey! Can you tell me if you have tried to use require hook with webpack? Please, share your experience :)

[pocketjoso]

Thanks for quick reply, but I'm still having exactly the same issue:

import cssModuleRequireHook from 'css-modules-require-hook'

function generateScopedName (exportedName, path) {
  // this is never called... the default generateScopedName continues to be used..
  console.log('generateScopedName called..')
  let [, fileName] = path.match(/(\w*)\.css$/)
  return fileName + '__' + exportedName
}
cssModuleRequireHook({
  generateScopedName
})

[mightyaleksey]

@pocketjoso What version do you use? I assume it should be 1.0.4.

[pocketjoso]

@sullenor Yes.

[mightyaleksey]

@pocketjoso okay, I think you can it in another way:

// hook itself
var cssHook = require('css-modules-require-hook');
// basic plugins
var ExtractImports = require('postcss-modules-extract-imports');
var LocalByDefault = require('postcss-modules-local-by-default');
var Scope = require('postcss-modules-scope');

// specify your custom function
function generateScopedName(exportedName, path) {/* your code here */}

// create an instance of the "postcss-modules-scope" plugin,
// so you can manually pass the options to it
var scopeInstance = new Scope({generateScopedName: generateScopedName});

cssHook({
  // setting custom plugins list
  use: [
    ExtractImports,
    LocalByDefault,
    scopeInstance // using plugin instance
  ]
});

I added comments to the code, hope that helps.