Open amerllica opened 6 years ago
@michalkvasnicak , @top1st , please read my issue and guide me. thanks.
Hi,
a couple of tracks to research:
@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.
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?
@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
.
@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
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
Actullay this plugin is awesome, but if
className
s exist in partial PostCSS file, all of them know asundefined
react component example;
Main PostCSS file:
Partial PostCSS file:
Exported
DOM
: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 toabout us
page and return to home page without refresh,HomePage
is now red, a refresh makeHomePage
word gray again. it means server side rendering with partial CSS Source creation cause to wipeclassName
but when you navigate between links CSS is created, now delete partials and write allclassName
s insidestyles.pcss
file, and runnpm run build prod
then runnpm 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.