feat: Adding insert option #495
Conversation
ScriptedAlchemy
requested review from
sokra and
alexander-akait
and removed request for
sokra
Codecov Report
@@ Coverage Diff @@
## master #495 +/- ##
==========================================
- Coverage 88.49% 88.34% -0.16%
==========================================
Files 5 5
Lines 426 429 +3
Branches 94 97 +3
==========================================
+ Hits 377 379 +2
- Misses 47 48 +1
Partials 2 2
Continue to review full report at Codecov.
|
|
This resolves async issues when loading CSS. Causing WebKit based browsers to block the render until styles are added to the head. insert option will default to the head, you can choose another location either with a string |
ScriptedAlchemy
force-pushed
the
webpack-render-bug
branch
from
d7e9a7d to
691eb88
Compare
|
@evilebottnawi - Looks like it failed on commit lint, i did reword it but doesn't appear to fix it in CI. All tests and lints are passing |
|
@evilebottnawi Bumping on this PR |
|
Something broken with CI 😕 |
|
@evilebottnawi found the problem! CI seems to be working now |
ScriptedAlchemy
force-pushed
the
webpack-render-bug
branch
from
4c5a137 to
8b73c72
Compare
|
@evilebottnawi good enough to merge or is there a CI failure I’m causing? |
ScriptedAlchemy
force-pushed
the
webpack-render-bug
branch
from
8b73c72 to
88b6428
Compare
|
I will look at this today/tomorrow and fix the problem with CI, good work, thanks |
|
|
||
| > ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax. | ||
|
|
||
| > ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module. |
There was a problem hiding this comment.
I find this a bit weird and think this could be confusing the users.
Doesn't something simple like insert: "head" | "body" fulfill the use case?
There was a problem hiding this comment.
Initially, I supported both use cases. I can reapply that work?
There was a problem hiding this comment.
hm, maybe insert: "head" | "querySelector" | Function, querySelector can be body/#head/.class/etc
There was a problem hiding this comment.
@sokra I started to work on this feature because I needed to be able to control the insertion bits, specifically inject inside an iframe.
@evilebottnawi's suggestion sounds good to me. Can we merge this PR?
ScriptedAlchemy
force-pushed
the
webpack-render-bug
branch
from
b17e008 to
b55c894
Compare
ScriptedAlchemy
force-pushed
the
webpack-render-bug
branch
from
b55c894 to
22a9ed2
Compare
This PR contains a:
Motivation / Use-Case
In Safari the whole rendering would be suspended while style, added to the head, is loading.
Adding style to the body resolves the problem.
This PR gives users the ability to inject async styles into a specified location
Breaking Changes
none
Additional Info
Fix: #492 #459