fix(650): Added ability to define friendly class names.

withneutron · Dec 21, 2021 · 0a1cdd9 · 0a1cdd9
1 parent 3b323e5
commit 0a1cdd9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/core/src/features/css.js b/packages/core/src/features/css.js
@@ -28,6 +28,9 @@ 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 componentName = args[last] && typeof args[last] === 'string' ? args[last] : null
+
 		/** @type {Internals} */
 		let internals = {
 			type: null,
@@ -54,7 +57,7 @@ export const createCssFunction = (/** @type {Config} */ config, /** @type {Sheet
 
 			// otherwise, add a new composer to this component
 			else {
-				internals.composers.add(createComposer(arg, config))
+				internals.composers.add(createComposer({componentName, ...arg}, config))
 			}
 		}
 
@@ -66,9 +69,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 hash = componentName ? `${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-${hash}`
 
 	/** @type {VariantTuple[]} */
 	const singularVariants = []

diff --git a/packages/react/src/features/styled.js b/packages/react/src/features/styled.js
@@ -18,6 +18,10 @@ 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 displayName = args[last] && typeof args[last] === 'string'
+				? args[last]
+				: DefaultType.displayName || DefaultType.name || DefaultType
 
 			const styledComponent = React.forwardRef((props, ref) => {
 				const Type = props && props.as || DefaultType
@@ -38,7 +42,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]