rename createCss to createStitches

packages/core/src/convert/toCssRules.js

@@ -7,8 +7,8 @@ import { toSizingValue } from './toSizingValue.js'
 import { toTailDashed } from './toTailDashed.js'
 import { toTokenizedValue } from './toTokenizedValue.js'
 
-/** @typedef {import('../createCss.js').Config} Config */
-/** @typedef {import('../createCss.js').Style} Style */
+/** @typedef {import('../createStitches.js').Config} Config */
+/** @typedef {import('../createStitches.js').Style} Style */
 
 /** Comma matcher outside rounded brackets. */
 const comma = /\s*,\s*(?![^()]*\))/

packages/core/src/createCss.js → packages/core/src/createStitches.js

@@ -8,12 +8,11 @@ import { createGlobalFunction } from './features/global.js'
 import { createKeyframesFunction } from './features/keyframes.js'
 import { createThemeFunction } from './features/theme.js'
 
-import { createSheet } from './createSheet.js'
+import { createSheet } from './sheet.js'
 
 const createCssMap = createMemo()
 
-/** @type {import('../types/core').CreateCss} */
-export const createCss = (config) => {
+export const createStitches = (config) => {
 	let didRun = false
 
 	const instance = createCssMap(config, (initConfig) => {

packages/core/src/features/css.js

@@ -19,7 +19,7 @@ import { toTailDashed } from '../convert/toTailDashed.js'
 /** @typedef {import('./css').VariantProps} VariantProps */
 /** @typedef {import('./css').VariantTuple} VariantTuple */
 
-/** @typedef {import('../createSheet').SheetGroup} SheetGroup */
+/** @typedef {import('../sheet').SheetGroup} SheetGroup */
 
 const createComponentFunctionMap = createMemo()
 
@@ -144,7 +144,7 @@ const createRenderer = (
 	/** @type {Config} */ config,
 	/** @type {string | Function} */ type,
 	/** @type {Set<Composer>} */ composers,
-	/** @type {import('../createSheet').SheetGroup} */ sheet
+	/** @type {import('../sheet').SheetGroup} */ sheet
 ) => {
 	const [
 		initialClassName,

packages/core/src/features/theme.js

@@ -5,14 +5,13 @@ import { toHash } from '../convert/toHash.js'
 import { toTailDashed } from '../convert/toTailDashed.js'
 import { toTokenizedValue } from '../convert/toTokenizedValue.js'
 
-/** @typedef {import('./createCss.js').Config} Config */
-/** @typedef {import('./createCss.js').Style} Style */
-/** @typedef {import('./createSheet.js').GroupSheet} GroupSheet */
-
 const createThemeFunctionMap = createMemo()
 
 /** Returns a function that applies a theme and returns tokens of that theme. */
-export const createThemeFunction = (/** @type {Config} */ config, /** @type {GroupSheet} */ sheet) => (
+export const createThemeFunction = (
+	config,
+	sheet
+) => (
 	createThemeFunctionMap(config, () => (className, style) => {
 		// theme is the first argument if it is an object, otherwise the second argument as an object
 		style = typeof className === 'object' && className || Object(style)

packages/core/src/index.js

@@ -1,7 +1,6 @@
-import { createCss } from './createCss.js'
 import { getCachedConfig } from './utility/getCachedConfig.js'
 
-export { createCss } from './createCss.js'
+export { createStitches } from './createStitches.js'
 export { defaultThemeMap } from './default/defaultThemeMap.js'
 
 export const css = (...args) => getCachedConfig().css(...args)

packages/core/src/createSheet.js → packages/core/src/sheet.js

@@ -1,6 +1,6 @@
-/** @typedef {import('./createSheet').RuleGroup} RuleGroup */
-/** @typedef {import('./createSheet').RuleGroupNames} RuleGroupNames */
-/** @typedef {import('./createSheet').SheetGroup} SheetGroup */
+/** @typedef {import('./sheet').RuleGroup} RuleGroup */
+/** @typedef {import('./sheet').RuleGroupNames} RuleGroupNames */
+/** @typedef {import('./sheet').SheetGroup} SheetGroup */
 
 /** @type {RuleGroupNames} */
 const names = ['themed', 'global', 'styled', 'onevar', 'allvar', 'inline']

packages/core/src/utility/getCachedConfig.js

@@ -1,5 +1,5 @@
-import { createCss } from '../createCss.js'
+import { createStitches } from '../createStitches.js'
 
 let cachedConfig
 
-export const getCachedConfig = () => cachedConfig || (cachedConfig = createCss())
+export const getCachedConfig = () => cachedConfig || (cachedConfig = createStitches())

packages/core/tests/basic.js

@@ -1,8 +1,8 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Basic', () => {
 	test('Existance of methods', () => {
-		const stitches = createCss()
+		const stitches = createStitches()
 
 		expect(stitches).toBeInstanceOf(Object)
 		expect(stitches.css).toBeInstanceOf(Function)
@@ -12,13 +12,13 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of getCssString()', () => {
-		const { getCssString } = createCss()
+		const { getCssString } = createStitches()
 
 		expect(getCssString()).toBe('')
 	})
 
 	test('Functionality of css()', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of2 = css()
 		const className1of2 = `${component1of2}`
@@ -38,7 +38,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of reset()', () => {
-		const { reset, getCssString } = createCss()
+		const { reset, getCssString } = createStitches()
 
 		expect(reset).toBeInstanceOf(Function)
 
@@ -50,7 +50,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of globalCss()', () => {
-		const { globalCss, getCssString } = createCss()
+		const { globalCss, getCssString } = createStitches()
 
 		const rendering1of2 = globalCss()
 		const className1of2 = `${rendering1of2}`
@@ -70,7 +70,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of keyframes()', () => {
-		const { keyframes, getCssString } = createCss()
+		const { keyframes, getCssString } = createStitches()
 
 		const rendering1of1 = keyframes({
 			'0%': {
@@ -89,7 +89,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of theme()', () => {
-		const { theme, getCssString } = createCss()
+		const { theme, getCssString } = createStitches()
 
 		const rendering1of1 = theme({
 			colors: {
@@ -107,7 +107,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of css() — css prop', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of1 = css({ color: 'DodgerBlue' })
 		const className1of1 = `${component1of1({ css: { color: 'Crimson' } })}`
@@ -126,7 +126,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of css() — variants', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of1 = css({
 			fontSize: '100%',
@@ -150,7 +150,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of css() — utils', () => {
-		const { css, getCssString } = createCss({
+		const { css, getCssString } = createStitches({
 			utils: {
 				userSelect: (value) => ({
 					WebkitUserSelector: value,
@@ -170,7 +170,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of stringification — numeric pixel values', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of1 = css({
 			width: 100,
@@ -183,7 +183,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of stringification — token values', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of1 = css({
 			width: '$brand',
@@ -197,7 +197,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of stringification — local tokens', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		const component1of1 = css({
 			$$brand: '500px',
@@ -212,7 +212,7 @@ describe('Basic', () => {
 	})
 
 	test('Functionality of stringification — local tokens prefixed', () => {
-		const { css, getCssString } = createCss({
+		const { css, getCssString } = createStitches({
 			prefix: 'fusion',
 		})
 
@@ -229,7 +229,7 @@ describe('Basic', () => {
 	})
 
 	test('Stringification: Utils + Local Tokens', () => {
-		const { css, getCssString } = createCss({
+		const { css, getCssString } = createStitches({
 			utils: {
 				backdropFilter: (value) => ({
 					WebkitBackdropFilter: value,
@@ -251,7 +251,7 @@ describe('Basic', () => {
 	})
 
 	test('Theme', () => {
-		const { getCssString } = createCss({
+		const { getCssString } = createStitches({
 			theme: {
 				colors: {
 					red: 'Crimson',

packages/core/tests/component-composition.js

@@ -1,16 +1,16 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Composition', () => {
 	test('Renders an empty component', () => {
-		const { css, toString } = createCss()
+		const { css, toString } = createStitches()
 		const generic = css()
 
 		expect(generic().props).toEqual({ className: 'PJLV' })
 		expect(toString()).toBe('')
 	})
 
 	test('Renders a component as the final composition by default', () => {
-		const { css, toString } = createCss()
+		const { css, toString } = createStitches()
 		const red = css({ color: 'red' })
 		const size14 = css({ fontSize: '14px' })
 		const bold = css({ fontWeight: 'bold' })
@@ -30,7 +30,7 @@ describe('Composition', () => {
 	})
 
 	test('Renders a component with all compositions', () => {
-		const { css, toString } = createCss()
+		const { css, toString } = createStitches()
 		const red = css({ color: 'red' })
 		const size14 = css({ fontSize: '14px' })
 		const bold = css({ fontWeight: 'bold' })

packages/core/tests/component-conditions.js

@@ -1,8 +1,8 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Component Medias', () => {
 	test('Authors can define medias applied to components', () => {
-		const { css, toString } = createCss({
+		const { css, toString } = createStitches({
 			media: {
 				mediumUp: '(width >= 768px)',
 			},

packages/core/tests/component-css-prop.js

@@ -1,8 +1,8 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Component with CSS prop', () => {
 	test('Authors can create a component and pass it a css prop of overrides', () => {
-		const { css, toString } = createCss({
+		const { css, toString } = createStitches({
 			media: {
 				bp0: '(width < 768px)',
 				bp1: '(768px <= width < 1400px)',

packages/core/tests/component-empty-variants.js

@@ -1,8 +1,8 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Empty Variants', () => {
 	test('Empty Variants', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		css({
 			variants: {
@@ -28,7 +28,7 @@ describe('Empty Variants', () => {
 	})
 
 	test('Empty Variants', () => {
-		const { css, getCssString } = createCss()
+		const { css, getCssString } = createStitches()
 
 		css({
 			variants: {

packages/core/tests/component-utils-and-types.js

@@ -1,8 +1,8 @@
-import { createCss } from '../src/index.js'
+import { createStitches } from '../src/index.js'
 
 describe('Component: Utilities & Tokens', () => {
 	test('Utilities & Tokens of the same type', () => {
-		const { css, toString } = createCss({
+		const { css, toString } = createStitches({
 			utils: {
 				px: (value) => ({
 					paddingLeft: value,
@@ -19,7 +19,7 @@ describe('Component: Utilities & Tokens', () => {
 	})
 
 	test('Utilities & Tokens of different types', () => {
-		const { css, toString } = createCss({
+		const { css, toString } = createStitches({
 			utils: {
 				ftw: (value) => ({
 					color: value,