feat(650): Added tests for friendly class names.

packages/core/src/features/css.js

@@ -72,9 +72,9 @@ export const createCssFunction = (/** @type {Config} */ config, /** @type {Sheet
 /** Creates a composer from a configuration object. */
 const createComposer = (/** @type {InitComposer} */ { variants: initSingularVariants, compoundVariants: initCompoundVariants, defaultVariants: initDefaultVariants, componentName, ...style }, /** @type {Config} */ config) => {
 	/** @type {string} */
-	const hash = componentName ? `${componentName}-${toHash(style)}` : toHash(style)
+	const baseClass = componentName && componentName.length > 0 ? `${componentName}-${toHash(style)}` : toHash(style)
 	/** @type {string} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}` */
-	const className = `${toTailDashed(config.prefix)}c-${hash}`
+	const className = `${toTailDashed(config.prefix)}c-${baseClass}`
 
 	/** @type {VariantTuple[]} */
 	const singularVariants = []

packages/core/tests/component-friendly-class-names.js

@@ -0,0 +1,17 @@
+import { createStitches } from '../src/index.js'
+
+describe('Generate human-legible class names', () => {
+	test('Class name includes "wrapper"', () => {
+		const { css } = createStitches()
+
+		const wrapper = css({}, "wrapper")
+		expect(wrapper.className).toBe('c-wrapper-PJLV')
+	})
+
+	test('Class name includes "heading"', () => {
+		const { css } = createStitches()
+
+		const heading = css({}, "heading")
+		expect(heading.className).toBe('c-heading-PJLV')
+	})
+})

packages/react/tests/component-friendly-class-names.js

@@ -0,0 +1,19 @@
+import { createStitches } from '../src/index.js'
+
+describe('Generate human-legible class names', () => {
+	test('Renders a DIV with "Wrapper" in its class name', () => {
+		const { styled } = createStitches()
+
+		const Wrapper = styled('div', {}, "Wrapper")
+		const expression = Wrapper.render()
+		expect(expression.props.className).toBe("c-Wrapper-PJLV")
+	})
+
+	test('Renders an H1 with "Heading" in its class name', () => {
+		const { styled } = createStitches()
+
+		const Heading = styled('h1', {}, "Heading")
+		const expression = Heading.render()
+		expect(expression.props.className).toBe("c-Heading-PJLV")
+	})
+})