Closed dminkovsky closed 9 years ago
...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.
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.
This is awesome, nice work! I'll add a note about it to the docs.
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.
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.
@sidjain26 thanks for posting. What is console.log(styles)
after the import styles from './style.css';
in component.jsx?
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;
}
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
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 />
.
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
I don't know what you mean.
I:
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']}>
Does anyone else think turning this into a loader for Webpack would be cool?