search

jonkemp / inline-css

Inline css into an html file.
MIT License
429 stars 85 forks source link

Using inline-css in React #87

Open erfoon opened 5 years ago

erfoon commented 5 years ago

Hi, I want to use exact same functionality that is presented in this repo in front-end side (React project). Can this library do that for me? Because as I tested it doesn't work for in project (webpack doesn't get built). Any suggestions?

Thanks

jonkemp commented 5 years ago

I would suggest changing the title to 'Using inline-css in React' first to get more visibility to this issue.

I haven't tested it with webpack, only gulp. And I wouldn't expect it to work with React as it only works with HTML in the page at runtime, not the HTML injected into the page at runtime.

It could potentially work with Gatsby or Next.js, or something that uses pre-rendering.

bryik commented 3 years ago

Is this issue about literally using inline-css in React (to manipulate some HTML) or is it about applying inline-css to a React project (I guess to convert classes defined in .css files into inline styles within components)?

I am interested in the first case, but I'm not sure if I should +1 this issue or create a new one.

FWIW: Attempting to import inline-css in a React project produced some kind of bundler error: TypeError: Cannot read property 'native' of undefined. Observable's module require debugger is unable to import it as well:

😭 Okay, so: nothing worked. We tried UMD, we tried bundling, we tried searching for random files that might be loadable. Unfortunately, no 🎲. This doesn’t mean nothing can work - this is an automated tool and doesn’t have human intuition. You might want to browse the files this module exposes on unpkg to see if any of them look viable. Or you might want to ask the module’s author whether there’s a file that people can use with browsers. Where there’s a will there’s a way: good luck. (This also means that all of the grayed-out solutions below won’t work.)

jonkemp commented 3 years ago

I changed the title to match the original question. How this module is integrated with React is up to us I guess.

evbo commented 2 years ago

If I'm not mistaken, this project aims to remove inline style tags from HTML and put them in CSS file. This would be enormously helpful if it worked with React and Webpack because it would automate CSP policy by enforcing no inline style tags exist!

So this is a really great thing. @jonkemp do you know if such automation exists or could exist? Inline style tags are super convenient, but CSP exists for a reason and inline style tags should never exist in production code! If this or some such pre-processor could stuff all inline tags into CSS files that would be amazing.

**UPDATE***

This is what I was looking for: https://github.com/tailwindlabs/tailwindcss