Would it be worth adding an option for the output styles to prefix an ID (e.g. #Style-4n412lnmi) instead of a class (.Style-4n412lnmi)?

Scenario being, IDs will absolutely clobber any other specificity, which is normally bad, except in one instance: when you need to sandbox styles for a component.

Right now, to do this, you can either:

• Wrap your component an in <iframe> & deal with 10x more problems.
• Prefix your styles with an ID # and using something like normalize.css to reset all child elements.

This way, any existing styles on the page are pretty much guaranteed not to affect your component. This is ideal for when distributing a solution like:

https://stripe.com/docs/checkout

Interesting in your thoughts!

I got this error today building a CRA app on Netlify:

Module not found: Error: Can't resolve 'create-react-class' in '/opt/build/repo/node_modules/react-inline-css/src'

One major annoyance is the lack of automatic vendor prefixing of certain CSS attributes. It doesn't really make sense to add them at run-time. It would be beneficial to the performance to pre-compile the written CSS much like JSX. At that point it might be a small step to include a SASS/LESS hook so it's possible to make the inline CSS stylesheets shorter and more composed.

The current version of React (15.5.4) outputs a warning about accessing React.PropTypes. The prop-types package should be used instead.

Does this module support scss for an isomorphic application such as your react starterkit?

I get the message:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <div id="InlineCss-0" data-reactid=".52
(server) <div id="InlineCss-1" data-reactid=".52

I have added the modules and the site renders correctly but the id being changed does not keep the client and server in sync...?

Is there anyway to solve this?

I'm having trouble rendering HTML with this library and puppeteer.

Input:

& .app-page { blablabla }

Output:

#InlineCss-0 .app-page { blablabla } 

I need the output to be:

.anything-0 .app-page { ... }

Because puppeteer errors when it encounters the # character.

Hi, I noticed that when using this plugin, when I insert a media query into the css string:

@media all and (max-width: 600px) {
    & .myElement {...}
}

The output in the browser does not convert & to the namespace. Is there something I am missing here? Thanks! This is a great plugin, it's very useful.

var assign     = React.__spread;

'Uncaught TypeError: assign is not a function' error when used with React 15.

I have followed your example for importing less files. And, I get this error: Unhandled promise rejection TypeError: stylesheet.replace is not a function

Any chance of running the CSS through autoprefixer before it's output into the DOM? That would be awesome!

From what I can tell, it's only async.

Images stored locally don't show.
<img src="images/notfound.jpg" className="bg" />
But those hosted remotely work just fine.
<img src="http://vectorpatterns.co.uk/wp-content/uploads/2012/06/greencirclepattern_thumb.png" className="bg" />

React is starting to complain that this package still uses React.createClass, it should be replaced with an ES6 class or the create-react-class package.

#6 (comment)

Not sure yet whether bug is a regression or has always been there.

HI,

Thanks for this module first of all, new to react, it's helping me organise CSS quite well. Running into the following issue building a Universal (isomorphoc) js app though, I'm getting the following warning when I add InlineCss to a component:

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated on 
the server was not what the client was expecting. React injected new markup to 
compensate which works but you have lost many of the benefits of server rendering. 
Instead, figure out why the markup being generated is different on the client or server:
(client) ><div id="InlineCss-0" data-reactid=".p7
(server) ><div id="InlineCss-1" data-reactid=".p7

I've narrowed it down to adding InlineCSS to the following render method:

render() {
   const listNumber = this.props.listNumber;

   return (
      <InlineCss stylesheet={TextInput.css()}>
         <div>
            <span className="list-number">{listNumber}.</span>
            <div className="question">{this.props.label} {this.props.required ? '*' : ''}</div>
            <input type="text" />
         </div>
       </InlineCss>
   );
}

Have you any advice on debugging this? Is there a problem with using InlineCss on nested components or repeated components ?

facebook/react#3496 (comment)