Windows path bug in css-modules about breko-hub HOT 11 CLOSED

OK well that's at least one thing that's working! Yes it's probably the quick and dirty generateScopeName implementation -- although I'm still surprised that React's initial render on the client doesn't simply fix the incorrect classNames!

from breko-hub.

I hacked in string replacement that was expected. I'm sure this can be much cleaner, but for now it works for my purposes. :-D

const path = exportedPath
      .replace(/\\/g, '\/')
      .replace(`${ROOT.replace(/\\/g, '\/')}/`, '')
      .replace(/^\//, '')
      .replace(/\.s?css$/, '')
      .replace(/\/|\.|@/g, '-')

from breko-hub.

If it's working, that's the SSR working :)

Thanks for checking for me!

from breko-hub.

Hey! Sorry for the slow reply, it's a public holiday here.

So at first glance I'd imagine this issue comes from my implementation of generateScopeName in the css-modules hook.

https://github.com/tomatau/breko-hub/blob/master/src/helpers/css-modules-hook.js#L14-L20

This generates the className for the css-modules on a server render. When I wrote it, I didn't give a thought to anyone developing on windows :S

I haven't been able to look into this properly but wanted to reply asap with some guidance. I'll take a more thorough look soon, although the weather is great here so it'll take a lot of will power to jump on my laptop!

from breko-hub.

Oh! That's exciting, that's where I ended up and have been messing with that file for a few minutes now. A lot of this setup is much more complex than I'm use to, but your organization is very good.

Thanks for the reply, and enjoy your Memorial Day!

from breko-hub.

Although thinking about it, that wouldn't completely explain why the initial client render doesn't fix the className diff error and then display correctly. Can you see if the css-modules <style /> blocks are being asynchronously loaded into the document with the correct rules (classNames) before any hot reloads are taking place?

from breko-hub.

The styles are loaded with classNames equal to the localIdentName in the config, but the references on the elements are with full path from C:/.

from breko-hub.

Btw that method can also be supplied as a string such as

generateScopedName: '[path][name]-[local]',

from breko-hub.

hey @umbravi would you please try out this (below, using the same string as in the webpack config) as well? I'd be curious to know if it also fixes the windows paths bug in css-modules on SSR. If it does it would call for an update to the boilerplate.

cssModulesHook({
  extensions: [ '.scss', '.css' ],
  prepend: [ autoprefixer({ browsers: [ 'last 2 versions' ] }) ],
  generateScopedName: `[path][name]-[local]`,
  preprocessCss(css, filename) {
    return sass.renderSync({
      includePaths: [ `${ROOT}/node_modules`, STYLES ],
      data: css,
      file: filename,
      importer(url) {
        return { file: loaderUtils.urlToRequest(url) }
      },
    }).css
  },
})

from breko-hub.

I'll check this when I get home today!

from breko-hub.

This works great. I'm not familiar enough with SSR to be able to say if it's working in that case, but at the moment I'm only using the default app and everything within is working fine.

Thanks for this!

from breko-hub.