A webpack loader?

[dminkovsky]

Does anyone else think turning this into a loader for Webpack would be cool?

[dminkovsky]

...motivation being that I'm using the Style component to style a third party React component that isn't built with props for inline styling. The demos for that component come with CSS that I basically want to copy and use in the Style component, but that requires manually converting those rules into the JS object format. No fun.

[dminkovsky]

One could, of course, use !style!css but the resulting <style> and its rules persist in your document forever.

With such a loader and the Style component, the <style> tag mounts and unmounts with its enclosing React component.

[dminkovsky]

Behold https://github.com/dminkovsky/radium-loader

[alexlande]

This is awesome, nice work! I'll add a note about it to the docs.

[dminkovsky]

Thanks! And thank you for Radium.

I would have done this sooner but I didn't know css-to-radium existed. The Radium loader fills a pretty niche spot, but after years of brain damage brought on my global styles I'm inclined to shy away from them as much as possible.

[f0rr0]

I'm fiddling with a very basic setup.

webpack.config.js looks like:

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'main.jsx'),
  output: {
    filename: 'bundle.js',
  },
  module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015']
      }
    },
    {
      test: /\.css$/,
      loader: 'radium!css'
    }
  ]
},
};

main.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './component.jsx';

function run() {
  ReactDOM.render(<Header/>, document.getElementById('root'));
}
const loadedStates = ['complete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

component.jsx:

import React from 'react';
import Radium from 'radium';
import styles from './style.css';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      caption: 'Hello World',
    };
  }

  render() {
    return (
      <div style={styles.base}>
        {this.state.caption}
      </div>
    );
  }

  componentDidMount() {
    console.log(styles); //These load correctly 
  }
}

module.exports = Radium(Header);

and finally styles.css:

.base {
  font-family: monospace;
  background-color: #BADA55;
}

The styles, however, are not applied to the coponent at all and I fail to understand why this is happening.

[dminkovsky]

@sidjain26 thanks for posting. What is console.log(styles) after the import styles from './style.css'; in component.jsx?

[f0rr0]

I found the bug. I was referring to the class name base in my css.

.base {
  font-family: monospace;
  background-color: #BADA55;
}

Changing that to the following solved the issue:

base {
  font-family: monospace;
  background-color: #BADA55;
}

[f0rr0]

What do you think about this workflow in general to develop small static websites? I can write local component specific styles in plain css/scss. Here's a seed project I made

[dminkovsky]

Glad you got it figured out!

Re: the workflow: whatever works!—is my opinion. I made the loader as an easy way to use styles for components that came with external .css stylesheets that I didn't want to have globally included at all times with <Style />.

[f0rr0]

I am trying to setup a dev environment with webpack. Here's the repo so far: https://github.com/sidjain26/react-es6-seed/tree/hmr Having issues in getting hmr to work. I am using radium-loader to load .css to inline styles. However, I get the error: radium-loader/index.js didn't return a function

[dminkovsky]

I don't know what you mean.

I:

• cloned your repo
• npm install
• node_modules/.bin/webpack.

It built dist/bundle.js which contains app/components/RecentTracks/style.css as a Radium object:

/* 211 */                                                                                                                                                                                                   
/***/ function(module, exports) {                                                                                                                                                                           

    module.exports = {"base":{"fontFamily":"monospace","backgroundColor":"#BADA55"}};                                                                                                                       

/***/ } 

So I am not seeing a problem.

---

As a side note, as I think you mentioned, instead of using base you are using .base:

<div style={styles['.base']}>

[dminkovsky]

Moving to https://github.com/dminkovsky/radium-loader/issues/4