feat: add default value

Adds ability to define a default value using "__default", to use as a base value.

Co-authored-by: Timo Bechtel <[email protected]>

Author: effect01

README.md

@@ -65,7 +65,11 @@ import cssVars from 'css-vars-from-json';
 const theme = cssVars({
 	colors: {
 		primary: 'red',
-		secondary: 'blue',
+		secondary: {
+			__default: 'blue',
+			// base value, will be rendered as --colors-secondary: blue
+			light: 'lightblue',
+		},
 	},
 	shadows: {
 		main: 'box-shadow: 1px 1px black',
@@ -80,11 +84,13 @@ const theme = cssVars({
 document.body.setAttribute('style', theme);
 
 console.log(theme);
-// => "--colors-primary: red;--colors-secondary: blue;--shadows-main: box-shadow: 1px 1px black;--font-family-primary: Arial;"
+// => "--colors-primary: red;--colors-secondary: blue;--colors-secondary-light: lightblue;--shadows-main: box-shadow: 1px 1px black;--font-family-primary: Arial;"
 ```
 
 ### Svelte example
+
 ThemeProvider.svelte
+
 ```html
 <script>
 	import { theme } from './my-design-system';
@@ -99,6 +105,7 @@ ThemeProvider.svelte
 ```
 
 App.svelte
+
 ```html
 <script>
 	import ThemeProvider from './ThemeProvider.svelte';

src/index.ts

@@ -22,5 +22,8 @@ function generateVariables(path: string, object: JsonObject): string {
 
 function join(path: string, key: string): string {
 	if (!path) return key;
+	// ignore __default property and use root key instead
+	// e.g. blue: { default: "blue", light: "lightblue" } => --blue: blue; --blue-light: lightblue;
+	if (key === '__default') return path;
 	return `${path}-${key}`;
 }

test/generateVariables.test.ts

@@ -22,3 +22,20 @@ test('generate variables string from json object', () => {
 		'--colors-primary: red;--colors-secondary: blue;--shadows-main: box-shadow: 1px 1px black;--font-family-primary: Arial;'
 	);
 });
+
+test('ignores __default property and use its value as base value', () => {
+	const theme = {
+		colors: {
+			primary: {
+				__default: 'blue',
+				light: 'lightblue',
+			},
+		},
+	};
+
+	const style = cssVars(theme);
+
+	expect(style).toBe(
+		'--colors-primary: blue;--colors-primary-light: lightblue;'
+	);
+});