rename: global to globalCss

packages/core/src/createCss.js

@@ -44,7 +44,7 @@ export const createCss = (config) => {
 
 		const returnValue = {
 			css: createComponentFunction(config, sheet),
-			global: createGlobalFunction(config, sheet),
+			globalCss: createGlobalFunction(config, sheet),
 			keyframes: createKeyframesFunction(config, sheet),
 			theme: createThemeFunction(config, sheet),
 			reset() {

packages/core/src/features/global.js

@@ -4,47 +4,51 @@ import { define } from '../utility/define.js'
 import { toCssRules } from '../convert/toCssRules.js'
 import { toHash } from '../convert/toHash.js'
 
-/** @typedef {import('./global').Config} Config */
-/** @typedef {import('./global').Styling} Styling */
-
-/** @typedef {import('../createSheet').SheetGroup} SheetGroup */
-
 const createGlobalFunctionMap = createMemo()
 
 /** Returns a function that applies global styles. */
-export const createGlobalFunction = (/** @type {Config} */ config, /** @type {SheetGroup} */ sheet) =>
-	createGlobalFunctionMap(config, () => (/** @type {Styling} */ style) => {
-		style = (typeof style === 'object' && style) || {}
-
-		const uuid = toHash(style)
-
-		const render = () => {
-			if (!sheet.rules.global.cache.has(uuid)) {
-				sheet.rules.global.cache.add(uuid)
-
-				// support @import rules
-				if ('@import' in style) {
-					let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1
-
-					// wrap import in quotes as a convenience
-					for (let importValue of [].concat(style['@import'])) {
-						importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"`
-
-						sheet.sheet.insertRule(`@import ${importValue};`, importIndex++)
-					}
-
-					delete style['@import']
+export const createGlobalFunction = (
+	/** @type {object} */ config,
+	/** @type {Sheet} */ sheet
+) => createGlobalFunctionMap(config, () => (
+	/** @type {Style} */ style
+) => {
+	style = typeof style === 'object' && style || {}
+
+	const uuid = toHash(style)
+
+	const render = () => {
+		if (!sheet.rules.global.cache.has(uuid)) {
+			sheet.rules.global.cache.add(uuid)
+
+			// support @import rules
+			if ('@import' in style) {
+				let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1
+
+				// wrap import in quotes as a convenience
+				for (
+					let importValue of /** @type {string[]} */ ([].concat(style['@import']))
+				) {
+					importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"`
+
+					sheet.sheet.insertRule(`@import ${importValue};`, importIndex++)
 				}
 
-				toCssRules(style, [], [], config, (cssText) => {
-					sheet.rules.global.apply(cssText)
-				})
+				delete style['@import']
 			}
 
-			return ''
+			toCssRules(style, [], [], config, (cssText) => {
+				sheet.rules.global.apply(cssText)
+			})
 		}
 
-		return define(render, {
-			toString: render,
-		})
+		return ''
+	}
+
+	return define(render, {
+		toString: render,
 	})
+})
+
+/** @typedef {{ [name: string]: number | string | void | Style }} Style */
+/** @typedef {{ rules: { [name: string]: { apply(): void, cache: Set<string> } }, sheet: { insertRule(): number } }} Sheet */

packages/core/src/index.js

@@ -1,16 +1,9 @@
+import { createCss } from './createCss.js'
 import { getCachedConfig } from './utility/getCachedConfig.js'
 
-/** @type {import('../types/index').createCss} */
 export { createCss } from './createCss.js'
-
-/** @type {import('../types/index').defaultThemeMap} */
 export { defaultThemeMap } from './default/defaultThemeMap.js'
 
-/** @type {import('../types/index').css} */
 export const css = (...args) => getCachedConfig().css(...args)
-
-/** @type {import('../types/index').global} */
-export const global = (...args) => getCachedConfig().global(...args)
-
-/** @type {import('../types/index').keyframes} */
+export const globalCss = (...args) => getCachedConfig().globalCss(...args)
 export const keyframes = (...args) => getCachedConfig().keyframes(...args)

packages/core/tests/basic.js

@@ -6,7 +6,7 @@ describe('Basic', () => {
 
 		expect(stitches).toBeInstanceOf(Object)
 		expect(stitches.css).toBeInstanceOf(Function)
-		expect(stitches.global).toBeInstanceOf(Function)
+		expect(stitches.globalCss).toBeInstanceOf(Function)
 		expect(stitches.keyframes).toBeInstanceOf(Function)
 		expect(stitches.theme).toBeInstanceOf(Function)
 	})
@@ -49,18 +49,18 @@ describe('Basic', () => {
 		expect(getCssString()).toBe('')
 	})
 
-	test('Functionality of global()', () => {
-		const { global, getCssString } = createCss()
+	test('Functionality of globalCss()', () => {
+		const { globalCss, getCssString } = createCss()
 
-		const rendering1of2 = global()
+		const rendering1of2 = globalCss()
 		const className1of2 = `${rendering1of2}`
 		const cssString1of2 = getCssString()
 
 		expect(rendering1of2).toBeInstanceOf(Function)
 		expect(className1of2).toBe('')
 		expect(cssString1of2).toBe('')
 
-		const rendering2of2 = global({ body: { margin: 0 } })
+		const rendering2of2 = globalCss({ body: { margin: 0 } })
 		const className2of2 = `${rendering2of2}`
 		const cssString2of2 = getCssString()
 

packages/core/tests/global-atrules.js

@@ -2,36 +2,36 @@ import { createCss } from '../src/index.js'
 
 describe('Support @import', () => {
 	test('Authors can define an @import rule', () => {
-		const { global, getCssString } = createCss()
+		const { globalCss, getCssString } = createCss()
 
 		const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
 
-		global({
+		globalCss({
 			'@import': `"${importURL}"`,
 		})()
 
 		expect(getCssString()).toBe(`@import "${importURL}";`)
 	})
 
 	test('Authors can define multiple @import rules', () => {
-		const { global, getCssString } = createCss()
+		const { globalCss, getCssString } = createCss()
 
 		const importURL1 = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
 		const importURL2 = `https://unpkg.com/sanitize.css@12.0.1/typography.css`
 
-		global({
+		globalCss({
 			'@import': [`"${importURL1}"`, `"${importURL2}"`],
 		})()
 
 		expect(getCssString()).toBe(`@import "${importURL1}";@import "${importURL2}";`)
 	})
 
 	test('Authors can an @import rule without quotes', () => {
-		const { global, getCssString } = createCss()
+		const { globalCss, getCssString } = createCss()
 
 		const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
 
-		global({
+		globalCss({
 			'@import': importURL,
 		})()
 
@@ -41,9 +41,9 @@ describe('Support @import', () => {
 
 describe('Support @font-face', () => {
 	test('Authors can define a @font-face rule', () => {
-		const { global, getCssString } = createCss()
+		const { globalCss, getCssString } = createCss()
 
-		global({
+		globalCss({
 			'@font-face': {
 				fontFamily: 'system-ui',
 				fontStyle: 'normal',
@@ -76,9 +76,9 @@ describe('Support @font-face', () => {
 	})
 
 	test('Authors can define multiple @font-face rules', () => {
-		const { global, getCssString } = createCss()
+		const { globalCss, getCssString } = createCss()
 
-		global({
+		globalCss({
 			'@font-face': [
 				{
 					fontFamily: 'system-ui',

packages/core/tests/universal-autoprefixer.js

@@ -2,9 +2,9 @@ import { createCss } from '../src/index.js'
 
 describe('Autoprefixer', () => {
 	test('appearance', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				appearance: 'none',
 			},
@@ -14,9 +14,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('backfaceVisibility', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				backfaceVisibility: 'visible',
 			},
@@ -26,9 +26,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('backgroundClip', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				backgroundClip: 'border-box',
 			},
@@ -38,9 +38,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('clipPath', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				clipPath: 'circle(40%)',
 			},
@@ -50,9 +50,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('hyphens', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				hyphens: 'none',
 			},
@@ -62,9 +62,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('maskImage', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				maskImage: 'none',
 			},
@@ -74,9 +74,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('tabSize', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				tabSize: 'none',
 			},
@@ -86,9 +86,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('textSizeAdjust', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				textSizeAdjust: '100%',
 			},
@@ -98,9 +98,9 @@ describe('Autoprefixer', () => {
 	})
 
 	test('userSelect', () => {
-		const { global, toString } = createCss()
+		const { globalCss, toString } = createCss()
 
-		global({
+		globalCss({
 			'x-element': {
 				userSelect: 'none',
 			},

packages/core/tests/universal-functionality.js

@@ -4,17 +4,17 @@ describe('Configuration', () => {
 	let stitches
 
 	test('createCss()', () => {
-		const { css, global } = createCss()
+		const { css, globalCss } = createCss()
 
 		expect(css).toBeInstanceOf(Function)
-		expect(global).toBeInstanceOf(Function)
+		expect(globalCss).toBeInstanceOf(Function)
 	})
 
 	test('createCss({})', () => {
-		const { css, global } = createCss({})
+		const { css, globalCss } = createCss({})
 
 		expect(css).toBeInstanceOf(Function)
-		expect(global).toBeInstanceOf(Function)
+		expect(globalCss).toBeInstanceOf(Function)
 	})
 
 	test('createCss({ prefix: "fusion-" })', () => {