feat: improve api

packages/css/src/index.ts

@@ -14,4 +14,4 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
-export * from './property';
+export * from './properties';

packages/css/src/properties.ts

@@ -0,0 +1,46 @@
+import type { AtRule } from 'csstype';
+
+import { appendCss } from './adapter';
+import { PropertySyntax } from './types';
+import { getFileScope } from './fileScope';
+import { generateIdentifier } from './identifier';
+import cssesc from 'cssesc';
+import {assertVarName} from './vars'
+
+type PropertyOptions = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createProperty(options: PropertyOptions, debugId?: string): string {
+  const cssPropertyName = cssesc(
+    generateIdentifier({
+      debugId,
+      debugFileName: false,
+    }),
+    { isIdentifier: true },
+  );
+
+  appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${cssPropertyName})`;
+}
+
+export function createGlobalProperty(name: string, options: PropertyOptions): string {
+  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${name})`;
+}
+
+export function property(varName: string): string {
+  assertVarName(varName);
+
+  return varName.replace(/^var\((--.*)\)$/, '$1');
+}

packages/css/src/vars.ts

@@ -23,6 +23,12 @@ export function createVar(debugId?: string): CSSVarFunction {
   return `var(--${cssVarName})` as const;
 }
 
+export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+  if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+    throw new Error(`Invalid variable name: ${value}`);
+  }
+}
+
 export function fallbackVar(
   ...values: [string, ...Array<string>]
 ): CSSVarFunction {
@@ -32,9 +38,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
-        throw new Error(`Invalid variable name: ${value}`);
-      }
+      assertVarName(value)
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }