Description
The method 'insertCss' can prevent duplicate styles, but it only works on the client side.
Is it possible to provide someting like 'insertCssServer':
const insertCssServer = ( styles, collector = [], { replace = false, prepend = false, prefix = 's' } = {} ) => { for (let i = 0; i < styles.length; i++) { const [moduleId, css, media, sourceMap] = styles[i]; const id = ${prefix}${moduleId}-${i}`;
let cssText = css;
if (sourceMap && typeof btoa === 'function') {
// skip IE9 and below, see http://caniuse.com/atob-btoa
cssText += `\n/*# sourceMappingURL=data:application/json;base64,${b64EncodeUnicode(
JSON.stringify(sourceMap),
)}*/`;
cssText += `\n/*# sourceURL=${sourceMap.file}?${id}*/`;
}
const value = `<style type="text/css" id="${id}" ${media ? `media="${media}"` : ''}>${cssText}</style>`;
const inserted = collector.find(c => c.key === id);
if (inserted) {
if (replace) {
inserted.value = value;
}
continue;
}
const toInsert = {
key: id,
value,
};
if (prepend) {
collector.unshift(toInsert);
} else {
collector.push(toInsert);
}
}
}`
So that we can use it on the server side:
`const css = [];
const insertCss = (...styles) => styles.forEach(style => {
const content = style._getContent();
insertCssServer(content, css);
});
const html = <!doctype html> <html> <head> <script src="/static/client.bundle.js" defer></script> ${css.map(c => c.value).join('')} </head> <body> <div id="root">${body}</div> </body> </html>;`