Comments (3)
FWIW this works well for me:
'use strict';
var viewportUnitsBuggyfill = require('viewport-units-buggyfill'),
{ any } = require('underscore');
viewportUnitsBuggyfill.init();
var patchedViewportStyleNode = document.getElementById('patched-viewport');
function isAppStyleNode(node) {
return node.tagName === 'STYLE' && node !== patchedViewportStyleNode;
}
function refreshViewportBuggyfill() {
viewportUnitsBuggyfill.refresh();
patchedViewportStyleNode.parentNode.appendChild(patchedViewportStyleNode);
}
function handleHeadMutation(mutationRecords) {
if (any(mutationRecords, record => any(record.addedNodes, isAppStyleNode))) {
refreshViewportBuggyfill();
}
}
if (patchedViewportStyleNode) {
if (typeof MutationObserver !== 'undefined') {
new MutationObserver(handleHeadMutation).observe(document.head, {
childList: true
});
} else {
setInterval(refreshViewportBuggyfill, 1500);
}
}
This is probably rather unusual request so closing this.
from style-loader.
Thanks for posting this. I'm attempting to run Viewport Units Buggyfill as part of a similar Webpack build and am unable to successfully apply the viewport units to my targeted DOM elements.
Had a couple of follow up questions:
-
What is the 'patched viewport' referenced here? Do I need to re-run this script for each DOM element I am applying CSS viewport properties to (in certain views there are multiple nested elements)?
-
My app is structured as an SPA. Do I need to wait until the target DOM elements are rendered to execute the script above, or can I execute the script once when the application initializes.
from style-loader.
Sorry, I don't remember anything about this π
from style-loader.
Related Issues (20)
- Style-loader duplicates insert function HOT 3
- HMR does not work with webpack 5 HOT 3
- Changes to `insert` module file do not trigger cache invalidation HOT 4
- i can't download the module HOT 1
- HMR does not work HOT 1
- What style-loaders expects as input? HOT 5
- Is there a injectType=lazyStyleTag .use() & .unuse() equivalent when using css-loader + mini-css-extract-plugin HOT 11
- Add support for using lazyStyleTag use() from a JavaScript module (injecting into multiple shadow DOMs) HOT 21
- why style-loader is pitch loaderοΌ HOT 2
- Support asset-modules instead of file-loader HOT 3
- Webpack "lazyStyleTag" configuration won't copy fonts after upgrade to Angular 13 HOT 18
- Noop in environment without DOM api HOT 1
- Can not export selectors from `@import url(...)` HOT 2
- Get CSS properties / variables from JavaScript HOT 3
- Vulnerable dependencies (indirect security issues) HOT 1
- webpack 5 is returning a object instead URL HOT 2
- Promotion of unsafe code HOT 1
- Excessive whitespace and line breaks in code generated by style-loader HOT 1
- loaderContext.utils is "undefined", Causes a report that the "contextify" attribute cannot be read from "undefined". HOT 10
- CSS Module is not working. HOT 1
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 style-loader.