Fix for #650: Generate friendly class names

packages/core/src/features/css.js

@@ -28,6 +28,10 @@ const createCssFunctionMap = createMemo()
 /** Returns a function that applies component styles. */
 export const createCssFunction = (/** @type {Config} */ config, /** @type {SheetGroup} */ sheet) =>
 	createCssFunctionMap(config, () => (...args) => {
+		const last = args.length - 1
+		const hasCustomName = last > 0 && args[last] && typeof args[last] === 'string'
+		const componentName = hasCustomName ? args[last].replace(/\./g, '_').replace(/\W/g, '') : null
+
 		/** @type {Internals} */
 		let internals = {
 			type: null,
@@ -53,8 +57,8 @@ export const createCssFunction = (/** @type {Config} */ config, /** @type {Sheet
 			}
 
 			// otherwise, add a new composer to this component
-			else {
-				internals.composers.add(createComposer(arg, config))
+			else if (typeof arg !== 'string') {
+				internals.composers.add(createComposer({componentName, ...arg}, config))
 			}
 		}
 
@@ -66,9 +70,11 @@ 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, ...style }, /** @type {Config} */ config) => {
+const createComposer = (/** @type {InitComposer} */ { variants: initSingularVariants, compoundVariants: initCompoundVariants, defaultVariants: initDefaultVariants, componentName, ...style }, /** @type {Config} */ config) => {
+	/** @type {string} */
+	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-${toHash(style)}`
+	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/core/types/stitches.d.ts

@@ -204,7 +204,7 @@ type ThemeTokens<Values, Prefix> = {
 	[Scale in keyof Values]: {
 		[Token in keyof Values[Scale]]: ThemeUtil.Token<
 			Extract<Token, number | string>,
-			Values[Scale][Token],
+			Values[Scale][Token] & (string | number),
 			Extract<Scale, string | void>,
 			Extract<Prefix, string | void>
 		>

packages/react/src/features/styled.js

@@ -18,6 +18,11 @@ export const createStyledFunction = ({ /** @type {Config} */ config, /** @type {
 		const styled = (...args) => {
 			const cssComponent = css(...args)
 			const DefaultType = cssComponent[internal].type
+			const last = args.length - 1
+			const hasCustomName = last > 0 && args[last] && typeof args[last] === 'string'
+			const displayName = hasCustomName
+				? args[last].replace(/\./g, '_').replace(/\W/g, '')
+				: DefaultType.displayName || DefaultType.name || DefaultType
 
 			const styledComponent = React.forwardRef((props, ref) => {
 				const Type = props && props.as || DefaultType
@@ -38,7 +43,7 @@ export const createStyledFunction = ({ /** @type {Config} */ config, /** @type {
 			const toString = () => cssComponent.selector
 
 			styledComponent.className = cssComponent.className
-			styledComponent.displayName = `Styled.${DefaultType.displayName || DefaultType.name || DefaultType}`
+			styledComponent.displayName = `Styled.${displayName}`
 			styledComponent.selector = cssComponent.selector
 			styledComponent.toString = toString
 			styledComponent[internal] = cssComponent[internal]

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")
+	})
+})

packages/react/types/stitches.d.ts

@@ -276,7 +276,7 @@ type ThemeTokens<Values, Prefix> = {
 	[Scale in keyof Values]: {
 		[Token in keyof Values[Scale]]: ThemeUtil.Token<
 			Extract<Token, number | string>,
-			Values[Scale][Token],
+			Values[Scale][Token] & (string | number),
 			Extract<Scale, string | void>,
 			Extract<Prefix, string | void>
 		>

packages/react/types/styled-component.d.ts

@@ -24,7 +24,7 @@ export interface StyledComponent<
 				? React.ComponentPropsWithRef<Type>
 			: {},
 			TransformProps<Props, Media> & {
-				as?: never,
+				as?: Type extends string | React.ComponentType<any> ? IntrinsicElementsKeys | React.ComponentType<any> : never,
 				css?: CSS
 			}
 		>