kriasoft / isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Home Page:https://reactstarter.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

<style> tag id contains information from the webpack config

Krasnopir opened this issue · comments

I use isomorphic-style-loader after css-loader and post-css(with sugarss parser)
{ test: /\.(sss)$/, use: [ 'isomorphic-style-loader',css-loader?${cssModulesLoaderOpts}, postcss-loader?${postCssLoaderOpts}, ], },
And after page rendering in head I hav tag <style> for all active components. Thats is very cool.
But id of this tags contains information from the webpack config.

`

<style type="text/css" id="s./node_modules/css-loader/index.js?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]--[hash:base64:5]"}!./node_modules/postcss-loader/lib/index.js?{"parser":"sugarss"}!./reactComponents/app.sss-0"> .app__root--ET3fo { font-family: Arial, sans-serif; font-size: 16px; color: #333 } ... </style>

`
Is it possible to configure only the file path ?

Here example
https://github.com/Krasnopir/isomorphic-style-provider

May be you can add prefix as webpack loader option?
Why <style> id include previous loaders with options and other inner info?

It will fix the problem.
node_modules/isomorphic-style-loader/lib/insertCss.js:70

var lastSlashIndex = moduleId.lastIndexOf('/');
var componentStylesFile = moduleId.substring(lastSlashIndex + 1);
var id = componentStylesFile;