search

michalkvasnicak / babel-plugin-css-modules-transform

Extract css class names from required css module files, so we can render it on server.
MIT License
326 stars 54 forks source link

Inject styles into head tag like style-loader #29

Closed andynoelker closed 7 years ago

andynoelker commented 7 years ago

I apologize if this is not the correct repository to post into. I have been using css modules with style-loader in a project for some time, and it builds a <style> block in my <head> tags (instead of bundling everything into an external file using extract-text-webpack-plugin). I am trying to turn my project into a private library that I can install in my other projects from a private git server. Doing so led me here. When I use this project I can see that it successfully generates the hashed class names for my elements. However, I lose the generated <style> block in my document so the class names are virtually meaningless.

I am new to package development so maybe I am going about this the wrong way, but is there a way for this project to emulate the behavior of style-loader and add the hashed css files inside of a <style> tag on the page? I am currently not using any config options with this project, just adding "plugins": ["css-modules-transform"] to my .babelrc. Any pointers at all would be helpful. Thank you!

michalkvasnicak commented 7 years ago

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:

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

andynoelker commented 7 years ago

@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!

michalkvasnicak commented 7 years ago

@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.

andynoelker commented 7 years ago

@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!

michalkvasnicak commented 7 years ago

@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).