Inject styles into head tag like style-loader about babel-plugin-css-modules-transform HOT 5 CLOSED

I am sorry but this plugin cannot generate the <style> tags for you because it doesn't know anything about that. It is not working like Webpack which is bundler. What you can do is to generate a css file for your project using this plugin during the build process.

From what I know, style-loader is appending the <style> tags during the runtime. So webpack will compile your css to a javascript file and then when you run this file in browser, it will append style tags to html.

This plugin is intended for server side rendering. Only way how to make something like you want possible is to create a plugin that appends a runtime to javascript that will work similar to style-loader. So it will compile your css and appends it to javascript. Maybe there is something like that.

Try to look on:

• https://github.com/threepointone/glamor
• https://github.com/smyte/jsxstyle
• https://styled-components.com/

But I think glamor is what you want. It is used by styled-components if I am not mistaken.

from babel-plugin-css-modules-transform.

@michalkvasnicak Thank you so much for the explanation and advice! Like I said, I'm still pretty new to developing packages to be used by other projects. I guess because I am transpiling everything with babel in my postinstall step I thought perhaps there was a way with this project but that makes sense that it cannot do the same things as webpack. I will look into the links you provided although I might just have to accept that I need to create a separate stylesheet. Thanks!

from babel-plugin-css-modules-transform.

@andynoelker No problem :). You can still provide your css files in package. But you need to configure webpack so it can parse your node_modules. So only hard thing with this solution is that you need to provide step by step guide for others how to set up their webpack + they need webpack to use your packages. You are basically enforcing others to use webpack.

We are doing something like that at work. We have ui-kit package which is pulled as is (without any babel transformation) and then we are processing it using webpack in a project. So only thing we had to do was to configure to include this ui-kit.

from babel-plugin-css-modules-transform.

@michalkvasnicak This is all for my work so we also have the luxury of enforcing our consumer apps to parse this project with webpack in node_modules and that's the solution I've gone with for now. The other projects you linked to look good but they all seem like variations of using CSS-like sytnax in javascript and I really like using native stylesheets with CSS modules. It's a shame there seems to be no great consensus on how to handle stylesheets with javascript, particularly in the React community. As this is was all in my postinstall build step, I'm wondering if I could use webpack instead of babel to just transpile the files and use style-loader without bundling? Well anyway, the parsing from node_modules will just have to work for now. Thank you for all of your help!

from babel-plugin-css-modules-transform.

@andynoelker you could use webpack to do what you want. You just need to import your module so webpack will know that it has to transpile source code of your module.

// node_modules/your-module/index.js

import './style.css';

// app.js

import 'your-module';

I am using webpack for server side and client side. Where on the server side I am just getting class names and on the client side I am extracting styles to css file in production. Style loader is used only during the development process.

For example here are webpack 2 configurations for server side and client side in my utility that I use to quickly bootstrap project. (sorry for self-promo). But it is excluding node_modules by default from transpiling (but it can be configured to include them).

from babel-plugin-css-modules-transform.