feat: add list of css properties used per color (#24)

Co-authored-by: Bart Veneman <[email protected]>

Author: bartveneman

src/index.test.ts

@@ -1,6 +1,6 @@
 import { test, expect, describe } from 'vitest'
 import { analysis_to_tokens, css_to_tokens } from './index.js'
-import { EXTENSION_AUTHORED_AS, EXTENSION_USAGE_COUNT } from './types.js'
+import { EXTENSION_AUTHORED_AS, EXTENSION_CSS_PROPERTIES, EXTENSION_USAGE_COUNT } from './types.js'
 import { analyze } from '@projectwallace/css-analyzer'
 
 describe('analysis_to_tokens', () => {
@@ -27,6 +27,7 @@ describe('analysis_to_tokens', () => {
 				$extensions: {
 					[EXTENSION_AUTHORED_AS]: 'green',
 					[EXTENSION_USAGE_COUNT]: 1,
+					[EXTENSION_CSS_PROPERTIES]: ['color']
 				}
 			},
 		},
@@ -79,7 +80,8 @@ describe('css_to_tokens', () => {
 			let actual = css_to_tokens(`
 			.my-design-system {
 				color: green;
-				color: rgb(100 100 100 / 20%);
+				background-color: rgb(100 100 100 / 20%);
+				border-color: green;
 			}
 		`)
 			expect(actual.color).toEqual({
@@ -92,7 +94,8 @@ describe('css_to_tokens', () => {
 					},
 					$extensions: {
 						[EXTENSION_AUTHORED_AS]: 'green',
-						[EXTENSION_USAGE_COUNT]: 1,
+						[EXTENSION_USAGE_COUNT]: 2,
+						[EXTENSION_CSS_PROPERTIES]: ['color', 'border-color'],
 					}
 				},
 				'grey-8139d9b': {
@@ -105,6 +108,7 @@ describe('css_to_tokens', () => {
 					$extensions: {
 						[EXTENSION_AUTHORED_AS]: 'rgb(100 100 100 / 20%)',
 						[EXTENSION_USAGE_COUNT]: 1,
+						[EXTENSION_CSS_PROPERTIES]: ['background-color'],
 					},
 				}
 			})
@@ -136,6 +140,7 @@ describe('css_to_tokens', () => {
 					$extensions: {
 						[EXTENSION_AUTHORED_AS]: 'transparent',
 						[EXTENSION_USAGE_COUNT]: 1,
+						[EXTENSION_CSS_PROPERTIES]: ['color'],
 					}
 				},
 			})

src/index.ts

@@ -9,6 +9,8 @@ import { destructure_line_height } from './destructure-line-height.js'
 import { parse_length } from './parse-length.js'
 import {
 	EXTENSION_AUTHORED_AS,
+	EXTENSION_USAGE_COUNT,
+	EXTENSION_CSS_PROPERTIES,
 	type CubicBezierToken,
 	type DimensionToken,
 	type DurationToken,
@@ -18,7 +20,6 @@ import {
 	type ColorToken,
 	type CssAnalysis,
 	type ShadowToken,
-	EXTENSION_USAGE_COUNT,
 } from './types.js'
 import { color_to_token } from './colors.js'
 
@@ -41,6 +42,11 @@ type Collection = {
 } | {
 	uniqueWithLocations: UniqueWithLocations
 }
+type ItemsPerContext = Record<string, {
+	unique: Record<string, number>,
+	uniqueWithLocations?: UniqueWithLocations,
+}>
+
 type TokenID = string
 
 type Tokens = {
@@ -66,6 +72,10 @@ function get_unique(collection: Collection) {
 	return collection.unique
 }
 
+/**
+ * Function to get the count of a specific value from a collection item regardless of whether the
+ * analysis was run with locations enabled or not.
+ */
 function get_count(collection_item: number | CssLocation[]) {
 	if (Array.isArray(collection_item)) {
 		return collection_item.length
@@ -83,14 +93,25 @@ export function analysis_to_tokens(analysis: CssAnalysis): Tokens {
 			for (let [group, group_colors] of color_groups) {
 				for (let color of group_colors) {
 					let color_token = color_to_token(color)
+
 					if (color_token !== null) {
 						let name = `${color_dict.get(group)}-${hash(color)}`
+
+						let items_per_context = analysis.values.colors.itemsPerContext as ItemsPerContext
+						let properties = Object.entries(items_per_context).reduce((acc, [property, collection]) => {
+							if (color in collection.unique || (collection.uniqueWithLocations && color in collection.uniqueWithLocations)) {
+								acc.push(property)
+							}
+							return acc
+						}, [] as Array<string>)
+
 						colors[name] = {
 							$type: 'color',
 							$value: color_token,
 							$extensions: {
 								[EXTENSION_AUTHORED_AS]: color,
-								[EXTENSION_USAGE_COUNT]: get_count(unique[color]!)
+								[EXTENSION_USAGE_COUNT]: get_count(unique[color]!),
+								[EXTENSION_CSS_PROPERTIES]: properties,
 							}
 						}
 					}

src/types.ts

@@ -5,6 +5,7 @@ export type CssAnalysis = ReturnType<typeof analyze>
 
 export const EXTENSION_AUTHORED_AS = 'com.projectwallace.css-authored-as'
 export const EXTENSION_USAGE_COUNT = 'com.projectwallace.usage-count'
+export const EXTENSION_CSS_PROPERTIES = 'com.projectwallace.css-properties'
 
 export type Easing = [number, number, number, number]
 
@@ -43,7 +44,10 @@ export type ColorValue = {
 
 export type ColorToken = BaseToken & {
 	$type: 'color'
-	$value: ColorValue
+	$value: ColorValue,
+	$extensions: {
+		[EXTENSION_CSS_PROPERTIES]: Array<string>
+	}
 }
 
 export type DimensionValue = {