stitchesjs#650 Added support for more friendly class names (and displ…

…ay names).
LucasUnplugged · Jul 27, 2021 · cbb74f0 · cbb74f0
1 parent 29dc435
commit cbb74f0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/packages/core/src/features/css.d.ts b/packages/core/src/features/css.d.ts
@@ -22,6 +22,8 @@ export type InitComposer = {
 	defaultVariants?: {
 		[name: string]: string
 	}
+
+	componentName?: string
 } & Styling
 
 /** Composer as it has been processed. */

diff --git a/packages/core/src/features/css.js b/packages/core/src/features/css.js
@@ -27,6 +27,7 @@ const createComponentFunctionMap = createMemo()
 export const createComponentFunction = (/** @type {Config} */ config, /** @type {SheetGroup} */ sheet) =>
 	createComponentFunctionMap(config, () => (...args) => {
 		/** @type {string | Function} Component type, which may be a function or a string. */
+		const componentName = !!args[2] && typeof args[2] === 'string' ? args[2] : null
 		let componentType = null
 
 		/** @type {Set<Composer>} Composers. */
@@ -56,15 +57,16 @@ export const createComponentFunction = (/** @type {Config} */ config, /** @type
 						}
 					// otherwise, add a new composer to this component
 					else if (!('$$typeof' in arg)) {
-						const composer = createComposer(arg, config)
+						const composer = createComposer({componentName, ...arg}, config)
 
 						composers.add(composer)
 					}
 
 					break
 
 				case 'string':
-					componentType = arg
+					if (!componentType)
+						componentType = arg
 			}
 		}
 
@@ -76,9 +78,10 @@ export const createComponentFunction = (/** @type {Config} */ config, /** @type
 	})
 
 /** 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} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}` */
-	const className = `${toTailDashed(config.prefix)}c-${toHash(style)}`
+	const hash = !!componentName ? `${componentName}-${toHash(style)}` : toHash(style)
+	const className = `${toTailDashed(config.prefix)}c-${hash}`
 
 	/** @type {VariantTuple[]} */
 	const singularVariants = []

diff --git a/packages/react/src/features/styled.js b/packages/react/src/features/styled.js
@@ -17,6 +17,7 @@ export const createStyledFunction = ({ /** @type {Config} */ config, /** @type {
 		const css = createComponentFunction(config, sheet)
 
 		const styled = (...args) => {
+			const componentName = !!args[2] && typeof args[2] === 'string' ? args[2] : null
 			const DefaultType = getComponentType(args[0])
 
 			const cssComponent = css(...args)
@@ -36,7 +37,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.${componentName || DefaultType.displayName || DefaultType.name || DefaultType}`
 			styledComponent.selector = cssComponent.selector
 			styledComponent.type = DefaultType
 			styledComponent.toString = toString

diff --git a/packages/react/types/styled.d.ts b/packages/react/types/styled.d.ts
@@ -182,6 +182,7 @@ export type StyledInstance<Medias extends TMedias = TMedias, Theme extends TThem
 						)[]
 					}
 		),
+		componentName?: string,
 	): // prettier-ignore
 	E extends string
 		// jsx elements