rickwong / react-inline-css Goto Github PK
View Code? Open in Web Editor NEW๐ณ Write CSS inside your React components!
License: BSD 3-Clause "New" or "Revised" License
๐ณ Write CSS inside your React components!
License: BSD 3-Clause "New" or "Revised" License
Not sure yet whether bug is a regression or has always been there.
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.
I have followed your example for importing less files. And, I get this error: Unhandled promise rejection TypeError: stylesheet.replace is not a function
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.
var assign = React.__spread;
'Uncaught TypeError: assign is not a function' error when used with React 15.
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.
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 ?
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?
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:
<iframe>
& deal with 10x more problems.#
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:
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'
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" />
The current version of React (15.5.4) outputs a warning about accessing React.PropTypes. The prop-types package should be used instead.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.