46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
|
import { styleBucketOrdering } from '@griffel/core';
|
||
|
|
import * as React from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
|
||
|
|
*
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
function renderToStyleElements(renderer) {
|
||
|
|
const stylesheets = Object.values(renderer.stylesheets)
|
||
|
|
// first sort: bucket names
|
||
|
|
.sort((a, b) => {
|
||
|
|
return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
|
||
|
|
})
|
||
|
|
// second sort: media queries
|
||
|
|
.sort((a, b) => {
|
||
|
|
const mediaA = a.elementAttributes['media'];
|
||
|
|
const mediaB = b.elementAttributes['media'];
|
||
|
|
if (mediaA && mediaB) {
|
||
|
|
return renderer.compareMediaQueries(mediaA, mediaB);
|
||
|
|
}
|
||
|
|
if (mediaA || mediaB) {
|
||
|
|
return mediaA ? 1 : -1;
|
||
|
|
}
|
||
|
|
return 0;
|
||
|
|
});
|
||
|
|
return stylesheets.map(stylesheet => {
|
||
|
|
const cssRules = stylesheet.cssRules();
|
||
|
|
// don't want to create any empty style elements
|
||
|
|
if (!cssRules.length) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/React.createElement('style', Object.assign({
|
||
|
|
key: stylesheet.bucketName
|
||
|
|
}, stylesheet.elementAttributes, {
|
||
|
|
'data-make-styles-rehydration': 'true',
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: cssRules.join('')
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}).filter(Boolean);
|
||
|
|
}
|
||
|
|
|
||
|
|
export { renderToStyleElements };
|
||
|
|
//# sourceMappingURL=renderToStyleElements.esm.js.map
|