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

Squashed commits: [a3e0552] [0a1cdd9]
stitchesjs · Jan 3, 2022 · fba8bb5 · fba8bb5
1 parent 73646c6
commit fba8bb5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/core/src/features/css.js b/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 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,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]