Add defaultVariants to the output

packages/pigment-css-core/src/base.ts

@@ -48,4 +48,4 @@ export type CSSObject<Props extends object> =
 export type ThemeArgs = {
   theme: Theme;
 };
-export type Primitive = string | null | undefined | boolean | number;
+export type Primitive = string | String | null | undefined | boolean | number;

packages/pigment-css-core/src/css.js

@@ -2,29 +2,7 @@ import { generateErrorMessage } from './utils';
 
 export default function css() {
   console.error(generateErrorMessage('css'));
+  return () => {
+    console.error(generateErrorMessage('css'));
+  };
 }
-
-/**
-const cls1 = css({
-  className() {
-    return 'class-name',
-  },
-})<Props>({
-  color: 'red',
-  backgroundColor: (props) => props.isRed ? 'red' : 'blue',
-  variants: {
-    size: {
-      small: {
-        padding: 2,
-      }
-    }
-  },
-  compoundVariants: [],
-  defaultVariants: {},
-});
-
-const {className, style} = cls1({
-  isRed: true,
-  size: 'small',
-});
- */

packages/pigment-css-core/src/index.ts

@@ -2,3 +2,4 @@ export * from '@pigment-css/theme';
 export * from './base';
 export { default as css } from './css';
 export { default as keyframes } from './keyframes';
+export * from './utils';

packages/pigment-css-core/src/processors/css.ts

@@ -21,6 +21,7 @@ import {
   serializeStyles,
   valueToLiteral,
   evaluateClassNameArg,
+  getCSSVar,
 } from '@pigment-css/utils';
 import {
   CallParam,
@@ -49,6 +50,8 @@ export type TemplateCallback = (params: Record<string, unknown> | undefined) =>
 export abstract class BaseCssProcessor {
   public variants: { $$cls: string; props: Record<string, string | number> }[] = [];
 
+  public defaultVariants: Record<string, unknown> = {};
+
   public variables: StyleObjectReturn['variables'] = {};
 
   readonly artifacts: Artifact[] = [];
@@ -159,6 +162,12 @@ export class CssTaggedTemplateProcessor extends BaseCssProcessor {
             const evaluatedValue = values.get(param.ex.name);
             if (typeof evaluatedValue === 'function') {
               templateExpressions.push(evaluatedValue(themeArgs));
+            } else if (
+              typeof evaluatedValue === 'object' &&
+              evaluatedValue &&
+              (evaluatedValue as unknown as Record<string, boolean>).isThemeVar
+            ) {
+              templateExpressions.push(getCSSVar(evaluatedValue.toString(), true));
             } else {
               templateExpressions.push(evaluatedValue as Primitive);
             }
@@ -333,6 +342,7 @@ export class CssObjectProcessor extends BaseCssProcessor {
     addStyles(result.base, 'base');
     addStyles(result.variants, 'variants');
     addStyles(result.compoundVariants, 'compoundvariants');
+    this.defaultVariants = result.defaultVariants;
   }
 }
 
@@ -455,6 +465,14 @@ export class CssProcessor extends BaseProcessor {
         ),
       );
     }
+    if (Object.keys(this.processor.defaultVariants).length > 0) {
+      args.properties.push(
+        t.objectProperty(
+          t.identifier('defaultVariants'),
+          valueToLiteral(this.processor.defaultVariants),
+        ),
+      );
+    }
     if (Object.keys(this.processor.variables).length > 0) {
       args.properties.push(
         t.objectProperty(t.identifier('vars'), valueToLiteral(this.processor.variables)),

packages/pigment-css-core/src/runtime/css.ts

@@ -3,12 +3,12 @@
  */
 type Props = Record<string, string | number>;
 
-type VariantInfo = {
+export type VariantInfo = {
   $$cls: string;
   props: Props;
 };
 
-type ClassInfo = {
+export type ClassInfo = {
   classes: string;
   variants?: VariantInfo[];
 };

packages/pigment-css-core/src/utils.ts

@@ -1,6 +1,6 @@
 const BUNDLER_MESSAGE =
-  'Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.';
+  'Make sure to install the Pigment CSS plugin package and configure it. @pigment-css/plugin/vite for Vite integration or @pigment-css/plugin/nextjs for Next.js integration.';
 
-export function generateErrorMessage(fnName: string) {
-  return `${process.env.PACKAGE_NAME}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`;
+export function generateErrorMessage(fnName: string, packageName = process.env.PACKAGE_NAME) {
+  return `${packageName}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`;
 }

packages/pigment-css-core/tests/css/css.spec.ts

@@ -43,8 +43,16 @@ const cls2 = css(({ theme }) => ({
       },
     },
   ],
+  defaultVariants: {
+    palette: 'primary',
+  },
 }));
 
+const res = cls2({
+  palette: 'primary',
+  size: 'large',
+});
+
 const cls2WithMetadata = css({
   className: 'Test1',
 })(({ theme }) => ({

packages/pigment-css-core/tests/css/fixtures/css.input.js

@@ -69,6 +69,9 @@ export const cls4 = css({ className: 'Test-class2' })(
         },
       },
     },
+    defaultVariants: {
+      size: 'medium',
+    },
   }),
   ({ theme }) => `
     ---flex: 43;
@@ -139,7 +142,6 @@ export const cls5 = css({ className: 'Test-class3' })(({ theme }) => ({
 
 export const cls6 = css(({ theme }) => ({
   color: '$palette.main',
-  // @ts-expect-error main1 does not exists in theme.palette
   backgroundColor: theme.palette.main1,
   border: `1px solid ${t('$palette.main')}`,
   variants: {

packages/pigment-css-core/tests/css/fixtures/css.output.js

@@ -37,6 +37,9 @@ export const cls4 = /*#__PURE__*/ _css4({
       },
     },
   ],
+  defaultVariants: {
+    size: 'medium',
+  },
 });
 export const cls5 = /*#__PURE__*/ _css5({
   classes: 'Test-class3',

packages/pigment-css-utils/src/utils/processStyle.ts

@@ -56,13 +56,14 @@ export type ProcessStyleObjectsReturn = {
   base: StyleObjectReturn[];
   variants: StyleObjectReturn[];
   compoundVariants: StyleObjectReturn[];
+  defaultVariants: Record<string, unknown>;
 };
 
 function splitAndJoin(str: string): string {
   return str.split('.').join('-');
 }
 
-function getCSSVar(key: string, wrapInVar = false): string {
+export function getCSSVar(key: string, wrapInVar = false): string {
   let result: string;
   if (key.startsWith('$$')) {
     result = `---${cssesc(splitAndJoin(key.substring(2)))}`;
@@ -139,6 +140,7 @@ function getCss(
     base: [],
     variants: [],
     compoundVariants: [],
+    defaultVariants: {},
   };
   if (typeof style === 'string') {
     result.base.push({
@@ -149,7 +151,7 @@ function getCss(
     });
     return result;
   }
-  const { variants, compoundVariants } = style;
+  const { variants, compoundVariants, defaultVariants } = style;
   delete style.variants;
   delete style.compoundVariants;
   delete style.defaultVariants;
@@ -220,6 +222,9 @@ function getCss(
       }
     });
   }
+  if (defaultVariants && Object.keys(defaultVariants).length > 0) {
+    result.defaultVariants = defaultVariants;
+  }
   return result;
 }
 
@@ -234,6 +239,7 @@ export function processStyleObjects(
     base: [],
     variants: [],
     compoundVariants: [],
+    defaultVariants: {},
   };
 
   styles.reduce((acc, style, index) => {
@@ -250,6 +256,10 @@ export function processStyleObjects(
     acc.base.push(...res.base);
     acc.variants.push(...res.variants);
     acc.compoundVariants.push(...res.compoundVariants);
+    acc.defaultVariants = {
+      ...acc.defaultVariants,
+      ...res.defaultVariants,
+    };
     return acc;
   }, result);
   return result;