The signature for CSS modules

[sebilasse]

Currently there is one line which prevents me from using this module.

const localIdentName = args.watch ? '[name]__[local]__[hash:base64:5]' : '[hash:base64:8]';

I am rendering anything on node.js first otherwise it would destroy the web. And the CSS classes must be the same on the server and on the client, see https://medium.com/@mattvagni/server-side-rendering-with-css-modules-6b02f1238eb1

My relevant lines on the server (as described in gitter) are

const postcssImport = require('postcss-import');
const postcssCssNext = require('postcss-cssnext');
const hook = require('css-modules-require-hook');
hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
  prepend: [
        //postcssImport,
        postcssCssNext({
            features: {
                autoprefixer: {
                    browsers: [ 'last 2 versions', 'ie >= 10' ]
                }
            }
        })
    ]
});

The problem is if !args.watch ... I can't figure out on the server how it was built ... Or can I (I mean I could use regexes to figure out but that's ugly ...) ?

[sebilasse]

@dylans @kitsonk @agubler [note to me: It is probably not good to open issues if fishing in murky waters ...]

This was clarified in gitter. I understood that I can always use [hash:base64:8] ... So my different CSS classes must result from another issue

Let's render a very simple one of the semantic components, "card", the root has the 2 CSS classes "ui card" - which is in client _1Rrtkqbr _4JFBInKC (as in built CSS) but in node.js _1dagnjJi vvaaSBdE (not existing in built CSS)

so given that I am using the signature [hash:base64:8] - I guess this would always return the same when used with the same classnames (?)

I am using the same signature as dojo but with https://github.com/css-modules/css-modules-require-hook because node.js needs to know how to require CSS.

If I do this with CSSmodules stuff without dojo it is the same on the server and on the client. Now the only difference I can see is that dojo is using https://github.com/postcss/postcss-import and I can't use it with node because of https://github.com/postcss/postcss-import/issues/180 - so the different classes might be related to this as well ...

However : I saw https://github.com/dojo/cli-export-project and wonder if it could write the JSON along with each build command so that I could use this on the server or could I use the mappings from the .map file?

It is like only 2 little issues would hinder the server side rendering: The different classes here (which is more important) and https://github.com/dojo/widget-core/issues/523 (just wrong language) - desperate.

[kitsonk]

As this issue stands, I am not sure it is actionable. We are considering our build process and as mentioned in here, there should be source maps included as part of the CSS transform. For me, that has always resulted in CSS that is traceable back to the source in the dev tools in Chrome.

We are also considering rationalising what --debug does, which may result in having the more "expressive" hashes of the class names, but as it stands, I don't think we will take any specific action based on this issue at this moment, so closing.