Importing from partial PostCSS files is ignored in Server Side Rendering

[amerllica]

Actullay this plugin is awesome, but if classNames exist in partial PostCSS file, all of them know as undefined

react component example;

import styles from 'SrcRoot/style.pcss';

export const Head = () => {
    return (<div className={styles.wrapper}>example</div>);
}

Main PostCSS file:

 @import "./partials/_head.pcss

Partial PostCSS file:

.wrapper { color: red }

Exported DOM:

<div>example</div>

How I can settle this issue? shall this plugin have some configs or .babelrc file must have?!

For better explain I create a tiny Github project that uses this plug-in for server side css transform, its link is SSR with CSS Modules.

When page renders as server side you can see the HomePage word is gray but when you click on above navigation and go to about us page and return to home page without refresh, HomePage is now red, a refresh make HomePage word gray again. it means server side rendering with partial CSS Source creation cause to wipe className but when you navigate between links CSS is created, now delete partials and write all classNames inside styles.pcss file, and run npm run build prod then run npm run ssr you see everything is ok, It prove my words, that partialing CSS Sources with Server Side Rendering cause to this issu.

Please some one guide me.

[amerllica]

@michalkvasnicak , @top1st , please read my issue and guide me. thanks.

[pascalduez]

Hi,

a couple of tracks to research:

• postcss-plugin-import is async, while css-modules-require-hook is sync.
• css-modules-require-hook >= 4.0.6 changed its resolving mechanism, breaking quite some stuff along the way...

[pascalduez]

@amerllica I quickly looked at your sample repo, why don't you use Webpack for compiling the server-side as well? That would solve your issue and simplify a bit your build.

[amerllica]

Hi dear @pascalduez , thanks a lot for your quick answer, I've searched about it and have found using webpack has two ways:

1st: using babel-plugin-webpack-loaders and in .babelrc file set the path of webpack.server.js, the webpack.server.js is a separated webpack config file for server side config of webpack ( I've used it before knowing babel-plugin-css-modules-transform but maybe my bad webpack config or my wrong approach cause to failed server side css-modules rendering ), just like you see my repo, I used className={styles.container} instead of className='container' , in Server Side Rendering it must be [sha512:hash:base64:5] but Server can not understand import styles from 'PcssRoot/style.pcss' so I was forced to use babel-plugin-webpack-loaders that doesn't work and then I use babel-plugin-css-modules-transform which works well but doesn't know importing from partials.

2nd: using webpack in my server.js that you said it is so simple and I think it is complicated for me to understand, do you know a sample that has Server Side Rendering and it uses webpack inside itself?

[michalkvasnicak]

@amerllica if you are using webpack, then you don't need this plugin at all, you only need css-loader and extract-text-webpack-plugin.

[michalkvasnicak]

@amerllica here is an example how would your webpack config look like https://github.com/michalkvasnicak/spust/blob/master/packages/spust/src/helpers/createWebpackLoaders.js

[Krasnopir]

Hello I use postcss with sugarss parser (.sss files) in project and server build without webpack have in .babelrc :

  "plugins": [
    ...
    [
      "css-modules-transform", {
        "generateScopedName": "[name]__[local]--[hash:base64:5]",
        "preprocessCss": "./postcss.parse.js",
        "extensions": [".css", ".sss"]
      }
    ]

and postcss.parse.js :

const postcss = require('postcss');
const parser = require('sugarss');
    
module.exports = function preprocessCSS (data, filename) {
    let result;
    result = postcss().process(data, { parser: parser }).css;
    return result.toString('utf8');
};

I'm sure this should help