Fix for #908: toString in hydrated group sheet (#930)

stitchesjs · Feb 14, 2022 · 560e6a7 · 560e6a7
1 parent efb47fe
commit 560e6a7
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 27 deletions.
diff --git a/packages/core/src/sheet.js b/packages/core/src/sheet.js
@@ -31,6 +31,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
@@ -82,7 +109,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) }
@@ -114,32 +141,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
@@ -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)
+	})
+})