Comments (9)
Thanks for raising these issues, Elliott! 👍 I will look at this one a little later.
from reactshadow.
I was wondering about all the server requests even if this caching issue didn't exist.
Maybe a solution to this issue though is to use one style tag and group insert the @import statements as needed?
from reactshadow.
Polymer addressed this issue with their Vulcanize tool, but I'm not entirely sure how that's going to behave with React components. However it would considerably reduce server requests in production.
Edit: If you add gulp-vulcanize
to your Gulp process, then it's not something ReactShadow needs to address directly. If Chrome has caching issues with @import
though then I agree ReactShadow needs to utilise an alternative in the meantime, as not everybody is going to be vulcanizing their components.
from reactshadow.
Note that you don't really want to use @import in production anyway because the async fetch of the sheet will cause FOUC.
from reactshadow.
It will be fantastic to add support for pure CSS source and drop support for cssDocuments
as a function. You can take at look at my fork impl at tjwudi/react-shadow-dom.
This helps a lot because we can then build a grunt or gulp plugin for react-shadow, which automatically read and insert css rules into javascript.
In this case, you don't even need to fetch any css anymore, in production.
from reactshadow.
@tjwudi How would adding the cssSource
property differ from writing the styles inline as part of the React component? Although I think I understand what you're trying to achieve. Do you imagine as part of the build process, transferring all of the CSS styles from the documents defined in cssDocuments
into the cssSource
property?
from reactshadow.
@Wildhoney Right. Component design is good for development, but we will always want to pack them into a big package in delivery. We sure can use css @import
at development stage. Then we inline all css source in the building stage.
from reactshadow.
Agreed. In that case I'm happy to merge in your cssSource
changes from your forked branch, if you want to go ahead and open a PR for it 👍
from reactshadow.
Of course I would :)
from reactshadow.
Related Issues (20)
- How can I use Shadow DOM content distribution with `react-shadow`? ( mix light with shadow, use `<slot>`) HOT 3
- Can useLayoutEffect() be used instead of useEffect() to make rendering synchronous? HOT 3
- How to use ReactShadow with ChakraUI Drawers? HOT 1
- Is there any chance to have a working example with CRA and TS? HOT 1
- Lib stopped working on iOS 15? HOT 1
- Shadow tree inheriting from parent HOT 2
- Does it support new mui lib?
- [feature request] allow consumers to pass options to emotion
- global requires a polyfill. Shall we replace global with globalThis? HOT 2
- styled-components is not defined as a peer dependency HOT 1
- Update dependency to React 18? HOT 5
- Trouble Loading Custom Font Into Shadow DOM in my Chrome Extension
- template content is empty with react HOT 1
- Example links in readme are both broken
- Children of the shadow root cannot get retrieved at parent level within a useEffect
- Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree HOT 1
- Remove react-use dependency due to package size
- shadowroot has been depricated need to update with shadowrootmode in template element HOT 2
- Next.js v13 failed to build "TypeError: e.createContext is not a function" HOT 1
- Css Variables from External URL link inside of a shadow dom not getting recognized
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactshadow.