diff --git a/packages/core/src/sheet.js b/packages/core/src/sheet.js index 1603b4fe..b29618a5 100644 --- a/packages/core/src/sheet.js +++ b/packages/core/src/sheet.js @@ -32,6 +32,33 @@ export const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => { /** @type {SheetGroup} Object hosting the hydrated stylesheet. */ let groupSheet + const toString = () => { + const { cssRules } = groupSheet.sheet + return [].map + .call(cssRules, (cssRule, cssRuleIndex) => { + const { cssText } = cssRule + + let lastRuleCssText = '' + + if (cssText.startsWith('--sxs')) return '' + + if (cssRules[cssRuleIndex - 1] && (lastRuleCssText = cssRules[cssRuleIndex - 1].cssText).startsWith('--sxs')) { + if (!cssRule.cssRules.length) return '' + + for (const name in groupSheet.rules) { + if (groupSheet.rules[name].group === cssRule) { + return `--sxs{--sxs:${[...groupSheet.rules[name].cache].join(' ')}}${cssText}` + } + } + + return cssRule.cssRules.length ? `${lastRuleCssText}${cssText}` : '' + } + + return cssText + }) + .join('') + } + const reset = () => { if (groupSheet) { const { rules, sheet } = groupSheet @@ -83,7 +110,7 @@ export const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => { if (!groupName) continue // create a group sheet if one does not already exist - if (!groupSheet) groupSheet = { sheet, reset, rules: {} } + if (!groupSheet) groupSheet = { sheet, reset, rules: {}, toString } // add the group to the group sheet groupSheet.rules[groupName] = { group, index, cache: new Set(cache) } @@ -115,32 +142,7 @@ export const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => { sheet: root ? (root.head || root).appendChild(document.createElement('style')).sheet : createCSSMediaRule('', 'text/css'), rules: {}, reset, - toString() { - const { cssRules } = groupSheet.sheet - return [].map - .call(cssRules, (cssRule, cssRuleIndex) => { - const { cssText } = cssRule - - let lastRuleCssText = '' - - if (cssText.startsWith('--sxs')) return '' - - if (cssRules[cssRuleIndex - 1] && (lastRuleCssText = cssRules[cssRuleIndex - 1].cssText).startsWith('--sxs')) { - if (!cssRule.cssRules.length) return '' - - for (const name in groupSheet.rules) { - if (groupSheet.rules[name].group === cssRule) { - return `--sxs{--sxs:${[...groupSheet.rules[name].cache].join(' ')}}${cssText}` - } - } - - return cssRule.cssRules.length ? `${lastRuleCssText}${cssText}` : '' - } - - return cssText - }) - .join('') - }, + toString, } } diff --git a/packages/core/tests/issue-908.js b/packages/core/tests/issue-908.js new file mode 100644 index 00000000..4fddf833 --- /dev/null +++ b/packages/core/tests/issue-908.js @@ -0,0 +1,33 @@ +import { createStitches } from '../src/index.js' + +const styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }`; +const mediaRule = `@media { body { margin: auto; }`; + +const createStylesheet = (...preloadedStyles) => { + let rules = []; + const insertRule = (rule, index = rules.length) => { + if (rule.startsWith('--sxs')) { + rules.splice(index, 0, {type: 1, cssText: rule}); + } + if (rule.startsWith('@media')) { + rules.splice(index, 0, {type: 4, cssText: rule, cssRules: []}); + } + }; + preloadedStyles.forEach(insertRule); + return { + insertRule, + cssRules: rules + }; +} + +describe('Issue #908', () => { + test('Getting hydratable stylesheet', () => { + const { getCssText } = createStitches({ + root: { + styleSheets: [createStylesheet(styleRule, mediaRule)] + } + }); + + expect(getCssText()).toBe(mediaRule) + }) +})