68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
var core = require('@griffel/core');
|
||
|
|
var React = require('react');
|
||
|
|
|
||
|
|
function _interopNamespaceCompat(e) {
|
||
|
|
if (e && typeof e === 'object' && 'default' in e) return e;
|
||
|
|
var n = Object.create(null);
|
||
|
|
if (e) {
|
||
|
|
Object.keys(e).forEach(function (k) {
|
||
|
|
if (k !== 'default') {
|
||
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
||
|
|
Object.defineProperty(n, k, d.get ? d : {
|
||
|
|
enumerable: true,
|
||
|
|
get: function () { return e[k]; }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
n.default = e;
|
||
|
|
return Object.freeze(n);
|
||
|
|
}
|
||
|
|
|
||
|
|
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(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 core.styleBucketOrdering.indexOf(a.bucketName) - core.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__namespace.createElement('style', Object.assign({
|
||
|
|
key: stylesheet.bucketName
|
||
|
|
}, stylesheet.elementAttributes, {
|
||
|
|
'data-make-styles-rehydration': 'true',
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: cssRules.join('')
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}).filter(Boolean);
|
||
|
|
}
|
||
|
|
|
||
|
|
exports.renderToStyleElements = renderToStyleElements;
|
||
|
|
//# sourceMappingURL=renderToStyleElements.cjs.js.map
|