diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index b0132ae84..824099e8b 100644
--- a/packages/css/src/index.ts
+++ b/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';
diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts
new file mode 100644
index 000000000..482648905
--- /dev/null
+++ b/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');
+}
diff --git a/packages/css/src/property.ts b/packages/css/src/property.ts
deleted file mode 100644
index a8fe7aa52..000000000
--- a/packages/css/src/property.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { AtRule } from 'csstype';
-
-import { appendCss } from './adapter';
-import { PropertySyntax } from './types';
-import { getFileScope } from './fileScope';
-import { generateIdentifier } from './identifier';
-
-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 property(options: PropertyOptions, debugId?: string): string {
-  let name = generateIdentifier(debugId);
-
-  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return name;
-}
-
-export function globalProperty(options: PropertyOptions, name: string): string {
-  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return name;
-}
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index d645804c1..ad8f651ba 100644
--- a/packages/css/src/vars.ts
+++ b/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})`);
     }