Lazy load CSS
+ + \ No newline at end of file diff --git a/test/cases/js-import-css-lazy-url-fetch/expected/main.js b/test/cases/js-import-css-lazy-url-fetch/expected/main.js new file mode 100644 index 00000000..62bfcbc6 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/expected/main.js @@ -0,0 +1 @@ +(()=>{"use strict";var t={};t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),(()=>{var e;t.g.importScripts&&(e=t.g.location+"");var r=t.g.document;if(!e&&r&&(r.currentScript&&(e=r.currentScript.src),!e)){var c=r.getElementsByTagName("script");if(c.length)for(var n=c.length-1;n>-1&&!e;)e=c[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),t.p=e})();const e=t.p+"style-dynamic.1f7039c8.css";!async function(t){const r=await fetch(t),c=await r.text(),n=new CSSStyleSheet;n.replaceSync(c),document.adoptedStyleSheets=[n],console.log("lazyLoad3: ",{cssUrl:e})}(e)})(); \ No newline at end of file diff --git a/test/cases/js-import-css-lazy-url-fetch/expected/style-dynamic.1f7039c8.css b/test/cases/js-import-css-lazy-url-fetch/expected/style-dynamic.1f7039c8.css new file mode 100644 index 00000000..72aa6df3 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/expected/style-dynamic.1f7039c8.css @@ -0,0 +1 @@ +/* extracted by HTMLBundler CSSLoader */.lazy{color:green} \ No newline at end of file diff --git a/test/cases/js-import-css-lazy-url-fetch/expected/style.7f152e84.css b/test/cases/js-import-css-lazy-url-fetch/expected/style.7f152e84.css new file mode 100644 index 00000000..a881aa29 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/expected/style.7f152e84.css @@ -0,0 +1 @@ +h1{color:red} \ No newline at end of file diff --git a/test/cases/js-import-css-lazy-url-fetch/src/index.html b/test/cases/js-import-css-lazy-url-fetch/src/index.html new file mode 100644 index 00000000..5baf5750 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/src/index.html @@ -0,0 +1,13 @@ + + + +Lazy load CSS
+ + \ No newline at end of file diff --git a/test/cases/js-import-css-lazy-url-fetch/src/main.js b/test/cases/js-import-css-lazy-url-fetch/src/main.js new file mode 100644 index 00000000..a765f094 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/src/main.js @@ -0,0 +1,40 @@ +import cssUrl from './style-dynamic.scss?url'; + +// universal way +function lazyLoad(url) { + const style = document.createElement('link'); + style.rel = 'stylesheet'; + style.href = url; + document.head.appendChild(style); + console.log('lazyLoad: ', { cssUrl }); +} + +// Using fetch and document.adoptedStyleSheets +// Browser compatibility (since early 2023): +// https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets#browser_compatibility + +// modern way, using promise +function lazyLoad2(url) { + fetch(url).then((response) => { + response.text().then((css) => { + const sheet = new CSSStyleSheet(); + sheet.replaceSync(css); + document.adoptedStyleSheets = [sheet]; + console.log('lazyLoad2: ', { cssUrl }); + }); + }); +} + +// modern way, using async await +async function lazyLoad3(url) { + const response = await fetch(url); + const css = await response.text(); + const sheet = new CSSStyleSheet(); + sheet.replaceSync(css); + document.adoptedStyleSheets = [sheet]; + console.log('lazyLoad3: ', { cssUrl }); +} + +//lazyLoad(cssUrl); +//lazyLoad2(cssUrl); +lazyLoad3(cssUrl); diff --git a/test/cases/js-import-css-lazy-url-fetch/src/style-dynamic.scss b/test/cases/js-import-css-lazy-url-fetch/src/style-dynamic.scss new file mode 100644 index 00000000..ba7a214c --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/src/style-dynamic.scss @@ -0,0 +1,4 @@ +$color: green; +.lazy { + color: $color; +} diff --git a/test/cases/js-import-css-lazy-url-fetch/src/style.scss b/test/cases/js-import-css-lazy-url-fetch/src/style.scss new file mode 100644 index 00000000..1cdbcbd6 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/src/style.scss @@ -0,0 +1,4 @@ +$color: red; +h1 { + color: $color; +} diff --git a/test/cases/js-import-css-lazy-url-fetch/webpack.config.js b/test/cases/js-import-css-lazy-url-fetch/webpack.config.js new file mode 100644 index 00000000..56edf717 --- /dev/null +++ b/test/cases/js-import-css-lazy-url-fetch/webpack.config.js @@ -0,0 +1,47 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + }, + + resolve: { + alias: { + '@images': path.join(__dirname, '../../fixtures/images'), + }, + }, + + plugins: [ + new HtmlBundlerPlugin({ + entry: { + index: './src/index.html', + }, + css: { + filename: '[name].[contenthash:8].css', + }, + // test disable - OK + preprocessor: false, + // test output of lazy loaded CSS file + verbose: true, + }), + ], + + module: { + rules: [ + { + test: /\.s?css$/, + use: ['css-loader', 'sass-loader'], + }, + { + test: /\.(png|jpe?g|ico|svg)$/, + type: 'asset/resource', + generator: { + filename: '[name].[hash:8][ext]', + }, + }, + ], + }, +}; diff --git a/test/integration.test.js b/test/integration.test.js index 5b7c3bd6..e841ca54 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -335,8 +335,8 @@ describe('import styles in JavaScript', () => { }); describe('import lazy styles in JavaScript', () => { - // TODO: yet experimental, undocumented test('lazy url in js', () => compareFiles('js-import-css-lazy-url')); + test('lazy load CSS in js using fetch', () => compareFiles('js-import-css-lazy-url-fetch')); }); describe('CSS source map', () => {