Inject styles into head tag like style-loader

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!

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

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

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

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

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


Question: dynamically require a node module (ensure)

I'm using the d3 library.  Its pretty big, so I only want to download the chunk on demand.  I can create the split point with require.ensure, but I'm lost as to how you actually get the library into the scope of the module.  This is as close as I can get, the chunk is downloaded, but d3 is always undefined. Any help would be greatly appreciated.

var React = require('react');
var d3;

require.ensure([], function(require){

    d3 = require('d3');

});

var Chart = React.createClass({
    render: function() {
        var props = this.props;
        var width = props.width;

        //d3 is undefined here
        var xScale = d3.scale.linear().domain([
            0, 111
        ]).range([
            0, width
        ]);

        return (
            <g>
            </g>
        );
    }
});

module.exports = Chart;

The problem is that require.ensure is async. It will be undefined until loaded. At the very least you will need a check against this case at your render method.
You may also want to use lifecycle methods, such as componentDidMount (require.ensure here) and componentWillUnmount (clean up) for more control. This allows you to load D3 only when your component is loaded, not sooner.

Thanks @bebraw, this works in componentDidMount.
        require.ensure([], function(require){
            var d3 = require('d3');

            var xScale = d3.scale.linear().domain([
                0, medianIncome
            ]).range([
                0, width
            ]);

            newState.incomeBarWidth = xScale(medianIncome);
            newState.rentBarWidth = xScale(medianR);

            newState.medianRLabel = {
                text: '$' + Math.round(medianR),
                x: props.rBarWidth,
                y: height / 2
            };

            self.setState(_.extend(self.state, newState));

        }, 'd3');

There is also https://github.com/webpack/react-proxy-loader whey loads react components on demand.

Thanks @tobias, its a library that’s used in a react module, so the require.ensure works well.

On Oct 13, 2015, at 12:22 AM, Tobias Koppers<EMAIL_ADDRESS>wrote:
There is also https://github.com/webpack/react-proxy-loader https://github.com/webpack/react-proxy-loader whey loads react components on demand.
—
Reply to this email directly or view it on GitHub https://github.com/webpack/webpack/issues/1500#issuecomment-147627729.

Closing given we managed to resolve this. :+1:


(feature) Tab Completion

bork <TAB>

Would be useful if it could then display all the subcommands.

This is turning out to be both easy and difficult!
It would be pretty straightforward to do this for just the subcommands, but to be smarter than that (which would be ideal) would take more work, that I am slowly figuring out how to do…
There's also the difficulty that the macOS default shell is zsh these days, so we would ideally ship completions for both bash and zsh. (I don't understand fish enough, so the fish users can submit their own PR. 😉)
But I am determined to do this for 0.14.x!