lightningcss-plugin-css-variables 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ocavue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# lightningcss-plugin-css-variables
+
+[![NPM version](https://img.shields.io/npm/v/lightningcss-plugin-css-variables?color=a1b858&label=)](https://www.npmjs.com/package/lightningcss-plugin-css-variables)
+
+A [LightningCSS](https://lightningcss.dev/) plugin that inlines CSS custom properties at build time. Matching variable declarations are removed from the output and all `var()` references are replaced with their values.
+
+## Installation
+
+```bash
+npm install lightningcss-plugin-css-variables lightningcss
+```
+
+## Usage
+
+```js
+import { transform } from 'lightningcss'
+import cssVariables from 'lightningcss-plugin-css-variables'
+
+const { code } = transform({
+  filename: 'style.css',
+  code: Buffer.from(`
+    :root {
+      --_color: red;
+      --_spacing: 4px;
+    }
+
+    .button {
+      color: var(--_color);
+      padding: calc(var(--_spacing) * 2);
+    }
+  `),
+  visitor: cssVariables(),
+})
+
+console.log(code.toString())
+// .button {
+//   color: red;
+//   padding: 8px;
+// }
+```
+
+By default, all custom properties whose name starts with `--_` are inlined. Other variables are left untouched.
+
+## Options
+
+### `include`
+
+A `RegExp` or an array of `RegExp` patterns to match the custom property names that should be inlined.
+
+```js
+cssVariables({
+  // Inline variables starting with --my-prefix-
+  include: /^--my-prefix-/,
+})
+
+cssVariables({
+  // Inline variables matching any of the patterns
+  include: [/^--_/, /^--internal-/],
+})
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { Visitor } from "lightningcss";
+
+//#region src/index.d.ts
+interface Options {
+  /**
+   * A regular expression or an array of regular expressions to match the custom variable names that should
+   * be inlined. By default, all custom variables that start with `--_` will be inlined.
+   */
+  include?: RegExp | RegExp[];
+}
+declare function cssVariables(options?: Options): Visitor<never>;
+//#endregion
+export { Options, cssVariables, cssVariables as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;;UAIiB,OAAA;;AAAjB;;;EAKE,OAAA,GAAU,MAAA,GAAS,MAAA;AAAA;AAAA,iBAaL,YAAA,CAAa,OAAA,GAAU,OAAA,GAAU,OAAA"}

package/dist/index.js

@@ -0,0 +1,261 @@
+//#region src/calc.ts
+function isWhiteSpaceToken(token) {
+	return token.type === "token" && token.value.type === "white-space";
+}
+function isDelimToken(token) {
+	return token.type === "token" && token.value.type === "delim" && (token.value.value === "+" || token.value.value === "-" || token.value.value === "*" || token.value.value === "/");
+}
+function isLengthToken(token) {
+	return token.type === "length";
+}
+function isTimeToken(token) {
+	return token.type === "time";
+}
+function isAngleToken(token) {
+	return token.type === "angle";
+}
+function isNumberToken(token) {
+	return token.type === "token" && token.value.type === "number";
+}
+function isPercentageToken(token) {
+	return token.type === "token" && token.value.type === "percentage";
+}
+function isParenOpenToken(token) {
+	return token.type === "token" && token.value.type === "parenthesis-block";
+}
+function isParenCloseToken(token) {
+	return token.type === "token" && token.value.type === "close-parenthesis";
+}
+function parseCalcTokens(input) {
+	const output = [];
+	for (const token of input) {
+		if (isWhiteSpaceToken(token)) continue;
+		if (isDelimToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isLengthToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isTimeToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isAngleToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isNumberToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isPercentageToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isParenOpenToken(token)) {
+			output.push(token);
+			continue;
+		}
+		if (isParenCloseToken(token)) {
+			output.push(token);
+			continue;
+		}
+		return;
+	}
+	return output;
+}
+function toEvalResult(token) {
+	if (isLengthToken(token)) return {
+		value: token.value.value,
+		unit: token.value.unit
+	};
+	if (isTimeToken(token)) return {
+		value: token.value.value,
+		unit: token.value.type === "milliseconds" ? "ms" : "s"
+	};
+	if (isAngleToken(token)) return {
+		value: token.value.value,
+		unit: token.value.type
+	};
+	if (isNumberToken(token)) return {
+		value: token.value.value,
+		unit: null
+	};
+	if (isPercentageToken(token)) return {
+		value: token.value.value,
+		unit: "%"
+	};
+}
+const ANGLE_UNITS = new Set([
+	"deg",
+	"rad",
+	"grad",
+	"turn"
+]);
+function calcValueToToken(v) {
+	if (v.unit === null) return {
+		type: "token",
+		value: {
+			type: "number",
+			value: v.value
+		}
+	};
+	if (v.unit === "%") return {
+		type: "token",
+		value: {
+			type: "percentage",
+			value: v.value
+		}
+	};
+	if (ANGLE_UNITS.has(v.unit)) return {
+		type: "angle",
+		value: {
+			type: v.unit,
+			value: v.value
+		}
+	};
+	if (v.unit === "ms") return {
+		type: "time",
+		value: {
+			type: "milliseconds",
+			value: v.value
+		}
+	};
+	if (v.unit === "s") return {
+		type: "time",
+		value: {
+			type: "seconds",
+			value: v.value
+		}
+	};
+	return {
+		type: "length",
+		value: {
+			unit: v.unit,
+			value: v.value
+		}
+	};
+}
+function evaluateCalc(tokens) {
+	const calcTokens = parseCalcTokens(tokens);
+	if (calcTokens == null) return;
+	let pos = 0;
+	const peek = () => calcTokens[pos];
+	const next = () => calcTokens[pos++];
+	function expr() {
+		let left = term();
+		if (!left) return void 0;
+		let t = peek();
+		while (t && isDelimToken(t) && (t.value.value === "+" || t.value.value === "-")) {
+			const op = t.value.value;
+			next();
+			const right = term();
+			if (!right || left.unit !== right.unit) return void 0;
+			left = {
+				value: op === "+" ? left.value + right.value : left.value - right.value,
+				unit: left.unit
+			};
+			t = peek();
+		}
+		return left;
+	}
+	function term() {
+		let left = factor();
+		if (!left) return void 0;
+		let t = peek();
+		while (t && isDelimToken(t) && (t.value.value === "*" || t.value.value === "/")) {
+			const op = t.value.value;
+			next();
+			const right = factor();
+			if (!right) return void 0;
+			if (op === "*") if (left.unit === null) left = {
+				value: left.value * right.value,
+				unit: right.unit
+			};
+			else if (right.unit === null) left = {
+				value: left.value * right.value,
+				unit: left.unit
+			};
+			else return void 0;
+			else {
+				if (right.unit !== null || right.value === 0) return void 0;
+				left = {
+					value: left.value / right.value,
+					unit: left.unit
+				};
+			}
+			t = peek();
+		}
+		return left;
+	}
+	function factor() {
+		const t = peek();
+		if (!t) return void 0;
+		if (isParenOpenToken(t)) {
+			next();
+			const result = expr();
+			if (!result) return void 0;
+			const closing = peek();
+			if (!closing || !isParenCloseToken(closing)) return void 0;
+			next();
+			return result;
+		}
+		const val = toEvalResult(t);
+		if (val) {
+			next();
+			return val;
+		}
+	}
+	const result = expr();
+	if (!result || pos !== calcTokens.length) return void 0;
+	return calcValueToToken(result);
+}
+
+//#endregion
+//#region src/index.ts
+const defaultInclude = /^--_/;
+function ensureArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function warn(message) {
+	console.warn(`[lightningcss-plugin-css-variables] ${message}`);
+}
+function cssVariables(options) {
+	const includePatterns = ensureArray(options?.include || defaultInclude);
+	const check = (name) => {
+		return includePatterns.some((pattern) => pattern.test(name));
+	};
+	const variables = /* @__PURE__ */ new Map();
+	return {
+		Declaration: { custom(property) {
+			const name = property.name;
+			const value = property.value;
+			if (!check(name)) return;
+			if (variables.has(name)) {
+				warn(`Variable "${name}" is already defined. Ignoring duplicate declaration.`);
+				return;
+			}
+			variables.set(name, value);
+			return [];
+		} },
+		Variable(variable) {
+			const name = variable.name.ident;
+			if (!check(name)) return;
+			const value = variables.get(name);
+			if (value == null) {
+				warn(`Variable "${name}" is not defined. Cannot inline value.`);
+				return;
+			}
+			return value;
+		},
+		FunctionExit: { calc(fn) {
+			return evaluateCalc(fn.arguments);
+		} }
+	};
+}
+
+//#endregion
+export { cssVariables, cssVariables as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/calc.ts","../src/index.ts"],"sourcesContent":["import type { Angle, LengthValue, Time, TokenOrValue } from 'lightningcss'\n\n// --- Token types and guards ---\n\ntype WhiteSpaceToken = {\n  type: 'token'\n  value: {\n    type: 'white-space'\n    value: string\n  }\n}\n\nfunction isWhiteSpaceToken(token: TokenOrValue): token is WhiteSpaceToken {\n  return token.type === 'token' && token.value.type === 'white-space'\n}\n\ntype DelimToken = {\n  type: 'token'\n  value: {\n    type: 'delim'\n    value: '+' | '-' | '*' | '/'\n  }\n}\n\nfunction isDelimToken(token: TokenOrValue): token is DelimToken {\n  return (\n    token.type === 'token' &&\n    token.value.type === 'delim' &&\n    (token.value.value === '+' ||\n      token.value.value === '-' ||\n      token.value.value === '*' ||\n      token.value.value === '/')\n  )\n}\n\ntype LengthToken = {\n  type: 'length'\n  value: LengthValue\n}\n\nfunction isLengthToken(token: TokenOrValue): token is LengthToken {\n  return token.type === 'length'\n}\n\ninterface TimeToken {\n  type: 'time'\n  value: Time\n}\n\nfunction isTimeToken(token: TokenOrValue): token is TimeToken {\n  return token.type === 'time'\n}\n\ninterface AngleToken {\n  type: 'angle'\n  value: Angle\n}\n\nfunction isAngleToken(token: TokenOrValue): token is AngleToken {\n  return token.type === 'angle'\n}\n\ntype NumberToken = {\n  type: 'token'\n  value: {\n    type: 'number'\n    value: number\n  }\n}\n\nfunction isNumberToken(token: TokenOrValue): token is NumberToken {\n  return token.type === 'token' && token.value.type === 'number'\n}\n\ntype PercentageToken = {\n  type: 'token'\n  value: {\n    type: 'percentage'\n    value: number\n  }\n}\n\nfunction isPercentageToken(token: TokenOrValue): token is PercentageToken {\n  return token.type === 'token' && token.value.type === 'percentage'\n}\n\ntype ParenOpenToken = {\n  type: 'token'\n  value: {\n    type: 'parenthesis-block'\n  }\n}\n\nfunction isParenOpenToken(token: TokenOrValue): token is ParenOpenToken {\n  return token.type === 'token' && token.value.type === 'parenthesis-block'\n}\n\ntype ParenCloseToken = {\n  type: 'token'\n  value: {\n    type: 'close-parenthesis'\n  }\n}\n\nfunction isParenCloseToken(token: TokenOrValue): token is ParenCloseToken {\n  return token.type === 'token' && token.value.type === 'close-parenthesis'\n}\n\n// --- CalcToken union and parsing ---\n\ntype CalcToken =\n  | DelimToken\n  | LengthToken\n  | TimeToken\n  | AngleToken\n  | NumberToken\n  | PercentageToken\n  | ParenOpenToken\n  | ParenCloseToken\n\nfunction parseCalcTokens(input: TokenOrValue[]): CalcToken[] | undefined {\n  const output: CalcToken[] = []\n\n  for (const token of input) {\n    if (isWhiteSpaceToken(token)) {\n      continue\n    }\n    if (isDelimToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isLengthToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isTimeToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isAngleToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isNumberToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isPercentageToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isParenOpenToken(token)) {\n      output.push(token)\n      continue\n    }\n    if (isParenCloseToken(token)) {\n      output.push(token)\n      continue\n    }\n    // unknown token — bail\n    return\n  }\n  return output\n}\n\n// --- Evaluation ---\n\ninterface EvalResult {\n  value: number\n  unit: string | null\n}\n\nfunction toEvalResult(token: CalcToken): EvalResult | undefined {\n  if (isLengthToken(token)) {\n    return { value: token.value.value, unit: token.value.unit }\n  }\n  if (isTimeToken(token)) {\n    return {\n      value: token.value.value,\n      unit: token.value.type === 'milliseconds' ? 'ms' : 's',\n    }\n  }\n  if (isAngleToken(token)) {\n    return { value: token.value.value, unit: token.value.type }\n  }\n  if (isNumberToken(token)) {\n    return { value: token.value.value, unit: null }\n  }\n  if (isPercentageToken(token)) {\n    return { value: token.value.value, unit: '%' }\n  }\n  return undefined\n}\n\nconst ANGLE_UNITS = new Set(['deg', 'rad', 'grad', 'turn'])\n\nfunction calcValueToToken(v: EvalResult): TokenOrValue {\n  if (v.unit === null)\n    return { type: 'token', value: { type: 'number', value: v.value } }\n  if (v.unit === '%')\n    return { type: 'token', value: { type: 'percentage', value: v.value } }\n  if (ANGLE_UNITS.has(v.unit))\n    return {\n      type: 'angle',\n      value: { type: v.unit as 'deg', value: v.value },\n    }\n  if (v.unit === 'ms')\n    return { type: 'time', value: { type: 'milliseconds', value: v.value } }\n  if (v.unit === 's')\n    return { type: 'time', value: { type: 'seconds', value: v.value } }\n  return {\n    type: 'length',\n    value: { unit: v.unit as 'px', value: v.value },\n  }\n}\n\nexport function evaluateCalc(tokens: TokenOrValue[]): TokenOrValue | undefined {\n  const calcTokens = parseCalcTokens(tokens)\n  if (calcTokens == null) {\n    return\n  }\n\n  let pos = 0\n  const peek = () => calcTokens[pos] as CalcToken | undefined\n  const next = () => calcTokens[pos++]\n\n  // expr = term (('+' | '-') term)*\n  function expr(): EvalResult | undefined {\n    let left = term()\n    if (!left) return undefined\n    let t = peek()\n    while (\n      t &&\n      isDelimToken(t) &&\n      (t.value.value === '+' || t.value.value === '-')\n    ) {\n      const op = t.value.value\n      next()\n      const right = term()\n      if (!right || left.unit !== right.unit) return undefined\n      left = {\n        value: op === '+' ? left.value + right.value : left.value - right.value,\n        unit: left.unit,\n      }\n      t = peek()\n    }\n    return left\n  }\n\n  // term = factor (('*' | '/') factor)*\n  function term(): EvalResult | undefined {\n    let left = factor()\n    if (!left) return undefined\n    let t = peek()\n    while (\n      t &&\n      isDelimToken(t) &&\n      (t.value.value === '*' || t.value.value === '/')\n    ) {\n      const op = t.value.value\n      next()\n      const right = factor()\n      if (!right) return undefined\n      if (op === '*') {\n        if (left.unit === null)\n          left = { value: left.value * right.value, unit: right.unit }\n        else if (right.unit === null)\n          left = { value: left.value * right.value, unit: left.unit }\n        else return undefined\n      } else {\n        if (right.unit !== null || right.value === 0) return undefined\n        left = { value: left.value / right.value, unit: left.unit }\n      }\n      t = peek()\n    }\n    return left\n  }\n\n  // factor = '(' expr ')' | value\n  function factor(): EvalResult | undefined {\n    const t = peek()\n    if (!t) return undefined\n    if (isParenOpenToken(t)) {\n      next()\n      const result = expr()\n      if (!result) return undefined\n      const closing = peek()\n      if (!closing || !isParenCloseToken(closing)) return undefined\n      next()\n      return result\n    }\n    const val = toEvalResult(t)\n    if (val) {\n      next()\n      return val\n    }\n    return undefined\n  }\n\n  const result = expr()\n  if (!result || pos !== calcTokens.length) return undefined\n  return calcValueToToken(result)\n}\n","import type { TokenOrValue, Visitor } from 'lightningcss'\n\nimport { evaluateCalc } from './calc.ts'\n\nexport interface Options {\n  /**\n   * A regular expression or an array of regular expressions to match the custom variable names that should\n   * be inlined. By default, all custom variables that start with `--_` will be inlined.\n   */\n  include?: RegExp | RegExp[]\n}\n\nconst defaultInclude = /^--_/\n\nfunction ensureArray<T>(value: T | T[]): T[] {\n  return Array.isArray(value) ? value : [value]\n}\n\nfunction warn(message: string) {\n  console.warn(`[lightningcss-plugin-css-variables] ${message}`)\n}\n\nexport function cssVariables(options?: Options): Visitor<never> {\n  const includePatterns: RegExp[] = ensureArray(\n    options?.include || defaultInclude,\n  )\n\n  const check = (name: string): boolean => {\n    return includePatterns.some((pattern) => pattern.test(name))\n  }\n\n  const variables = new Map<string, TokenOrValue[]>()\n\n  return {\n    Declaration: {\n      custom(property) {\n        const name: string = property.name\n        const value: TokenOrValue[] = property.value\n\n        if (!check(name)) {\n          return\n        }\n\n        if (variables.has(name)) {\n          warn(\n            `Variable \"${name}\" is already defined. Ignoring duplicate declaration.`,\n          )\n          return\n        }\n\n        variables.set(name, value)\n        return []\n      },\n    },\n    Variable(variable) {\n      const name: string = variable.name.ident\n      if (!check(name)) {\n        return\n      }\n\n      const value = variables.get(name)\n      if (value == null) {\n        warn(`Variable \"${name}\" is not defined. Cannot inline value.`)\n        return\n      }\n\n      return value\n    },\n    FunctionExit: {\n      calc(fn: { name: string; arguments: TokenOrValue[] }) {\n        return evaluateCalc(fn.arguments)\n      },\n    },\n  }\n}\n\nexport default cssVariables\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "lightningcss-plugin-css-variables",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "A plugin for LightningCSS to inline CSS variables.",
+  "author": "ocavue <ocavue@gmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/ocavue",
+  "homepage": "https://github.com/ocavue/lightningcss-plugin-css-variables#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ocavue/lightningcss-plugin-css-variables.git"
+  },
+  "bugs": "https://github.com/ocavue/lightningcss-plugin-css-variables/issues",
+  "keywords": [
+    "lightningcss-plugin"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "lightningcss": "^1.31.1"
+  },
+  "peerDependenciesMeta": {
+    "lightningcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@ocavue/eslint-config": "^4.2.0",
+    "@ocavue/tsconfig": "^0.6.3",
+    "@types/node": "^22.19.11",
+    "eslint": "^10.0.2",
+    "lightningcss": "^1.31.1",
+    "prettier": "^3.8.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint .",
+    "fix": "eslint --fix . && prettier --write .",
+    "test": "vitest",
+    "typecheck": "tsc -b"
+  }
+}

package/src/calc.ts

@@ -0,0 +1,303 @@
+import type { Angle, LengthValue, Time, TokenOrValue } from 'lightningcss'
+
+// --- Token types and guards ---
+
+type WhiteSpaceToken = {
+  type: 'token'
+  value: {
+    type: 'white-space'
+    value: string
+  }
+}
+
+function isWhiteSpaceToken(token: TokenOrValue): token is WhiteSpaceToken {
+  return token.type === 'token' && token.value.type === 'white-space'
+}
+
+type DelimToken = {
+  type: 'token'
+  value: {
+    type: 'delim'
+    value: '+' | '-' | '*' | '/'
+  }
+}
+
+function isDelimToken(token: TokenOrValue): token is DelimToken {
+  return (
+    token.type === 'token' &&
+    token.value.type === 'delim' &&
+    (token.value.value === '+' ||
+      token.value.value === '-' ||
+      token.value.value === '*' ||
+      token.value.value === '/')
+  )
+}
+
+type LengthToken = {
+  type: 'length'
+  value: LengthValue
+}
+
+function isLengthToken(token: TokenOrValue): token is LengthToken {
+  return token.type === 'length'
+}
+
+interface TimeToken {
+  type: 'time'
+  value: Time
+}
+
+function isTimeToken(token: TokenOrValue): token is TimeToken {
+  return token.type === 'time'
+}
+
+interface AngleToken {
+  type: 'angle'
+  value: Angle
+}
+
+function isAngleToken(token: TokenOrValue): token is AngleToken {
+  return token.type === 'angle'
+}
+
+type NumberToken = {
+  type: 'token'
+  value: {
+    type: 'number'
+    value: number
+  }
+}
+
+function isNumberToken(token: TokenOrValue): token is NumberToken {
+  return token.type === 'token' && token.value.type === 'number'
+}
+
+type PercentageToken = {
+  type: 'token'
+  value: {
+    type: 'percentage'
+    value: number
+  }
+}
+
+function isPercentageToken(token: TokenOrValue): token is PercentageToken {
+  return token.type === 'token' && token.value.type === 'percentage'
+}
+
+type ParenOpenToken = {
+  type: 'token'
+  value: {
+    type: 'parenthesis-block'
+  }
+}
+
+function isParenOpenToken(token: TokenOrValue): token is ParenOpenToken {
+  return token.type === 'token' && token.value.type === 'parenthesis-block'
+}
+
+type ParenCloseToken = {
+  type: 'token'
+  value: {
+    type: 'close-parenthesis'
+  }
+}
+
+function isParenCloseToken(token: TokenOrValue): token is ParenCloseToken {
+  return token.type === 'token' && token.value.type === 'close-parenthesis'
+}
+
+// --- CalcToken union and parsing ---
+
+type CalcToken =
+  | DelimToken
+  | LengthToken
+  | TimeToken
+  | AngleToken
+  | NumberToken
+  | PercentageToken
+  | ParenOpenToken
+  | ParenCloseToken
+
+function parseCalcTokens(input: TokenOrValue[]): CalcToken[] | undefined {
+  const output: CalcToken[] = []
+
+  for (const token of input) {
+    if (isWhiteSpaceToken(token)) {
+      continue
+    }
+    if (isDelimToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isLengthToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isTimeToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isAngleToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isNumberToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isPercentageToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isParenOpenToken(token)) {
+      output.push(token)
+      continue
+    }
+    if (isParenCloseToken(token)) {
+      output.push(token)
+      continue
+    }
+    // unknown token — bail
+    return
+  }
+  return output
+}
+
+// --- Evaluation ---
+
+interface EvalResult {
+  value: number
+  unit: string | null
+}
+
+function toEvalResult(token: CalcToken): EvalResult | undefined {
+  if (isLengthToken(token)) {
+    return { value: token.value.value, unit: token.value.unit }
+  }
+  if (isTimeToken(token)) {
+    return {
+      value: token.value.value,
+      unit: token.value.type === 'milliseconds' ? 'ms' : 's',
+    }
+  }
+  if (isAngleToken(token)) {
+    return { value: token.value.value, unit: token.value.type }
+  }
+  if (isNumberToken(token)) {
+    return { value: token.value.value, unit: null }
+  }
+  if (isPercentageToken(token)) {
+    return { value: token.value.value, unit: '%' }
+  }
+  return undefined
+}
+
+const ANGLE_UNITS = new Set(['deg', 'rad', 'grad', 'turn'])
+
+function calcValueToToken(v: EvalResult): TokenOrValue {
+  if (v.unit === null)
+    return { type: 'token', value: { type: 'number', value: v.value } }
+  if (v.unit === '%')
+    return { type: 'token', value: { type: 'percentage', value: v.value } }
+  if (ANGLE_UNITS.has(v.unit))
+    return {
+      type: 'angle',
+      value: { type: v.unit as 'deg', value: v.value },
+    }
+  if (v.unit === 'ms')
+    return { type: 'time', value: { type: 'milliseconds', value: v.value } }
+  if (v.unit === 's')
+    return { type: 'time', value: { type: 'seconds', value: v.value } }
+  return {
+    type: 'length',
+    value: { unit: v.unit as 'px', value: v.value },
+  }
+}
+
+export function evaluateCalc(tokens: TokenOrValue[]): TokenOrValue | undefined {
+  const calcTokens = parseCalcTokens(tokens)
+  if (calcTokens == null) {
+    return
+  }
+
+  let pos = 0
+  const peek = () => calcTokens[pos] as CalcToken | undefined
+  const next = () => calcTokens[pos++]
+
+  // expr = term (('+' | '-') term)*
+  function expr(): EvalResult | undefined {
+    let left = term()
+    if (!left) return undefined
+    let t = peek()
+    while (
+      t &&
+      isDelimToken(t) &&
+      (t.value.value === '+' || t.value.value === '-')
+    ) {
+      const op = t.value.value
+      next()
+      const right = term()
+      if (!right || left.unit !== right.unit) return undefined
+      left = {
+        value: op === '+' ? left.value + right.value : left.value - right.value,
+        unit: left.unit,
+      }
+      t = peek()
+    }
+    return left
+  }
+
+  // term = factor (('*' | '/') factor)*
+  function term(): EvalResult | undefined {
+    let left = factor()
+    if (!left) return undefined
+    let t = peek()
+    while (
+      t &&
+      isDelimToken(t) &&
+      (t.value.value === '*' || t.value.value === '/')
+    ) {
+      const op = t.value.value
+      next()
+      const right = factor()
+      if (!right) return undefined
+      if (op === '*') {
+        if (left.unit === null)
+          left = { value: left.value * right.value, unit: right.unit }
+        else if (right.unit === null)
+          left = { value: left.value * right.value, unit: left.unit }
+        else return undefined
+      } else {
+        if (right.unit !== null || right.value === 0) return undefined
+        left = { value: left.value / right.value, unit: left.unit }
+      }
+      t = peek()
+    }
+    return left
+  }
+
+  // factor = '(' expr ')' | value
+  function factor(): EvalResult | undefined {
+    const t = peek()
+    if (!t) return undefined
+    if (isParenOpenToken(t)) {
+      next()
+      const result = expr()
+      if (!result) return undefined
+      const closing = peek()
+      if (!closing || !isParenCloseToken(closing)) return undefined
+      next()
+      return result
+    }
+    const val = toEvalResult(t)
+    if (val) {
+      next()
+      return val
+    }
+    return undefined
+  }
+
+  const result = expr()
+  if (!result || pos !== calcTokens.length) return undefined
+  return calcValueToToken(result)
+}

package/src/index.test.ts

@@ -0,0 +1,139 @@
+import { transform } from 'lightningcss'
+import { expect, it } from 'vitest'
+
+import cssVariables from './index.ts'
+
+const css = String.raw
+
+it('should inline CSS variables start with --_', () => {
+  const input = css`
+    :root {
+      --_color: red;
+    }
+
+    body {
+      color: var(--_color);
+    }
+  `
+
+  const output = transform({
+    filename: 'test.css',
+    code: Buffer.from(input),
+    visitor: cssVariables(),
+  }).code.toString()
+
+  expect(output).toMatchInlineSnapshot(`
+    "body {
+      color: red;
+    }
+    "
+  `)
+})
+
+it('should not inline normal CSS variables', () => {
+  const input = css`
+    :root {
+      --color: red;
+    }
+
+    body {
+      color: var(--color);
+    }
+  `
+
+  const output = transform({
+    filename: 'test.css',
+    code: Buffer.from(input),
+    visitor: cssVariables(),
+  }).code.toString()
+
+  expect(output).toMatchInlineSnapshot(`
+    ":root {
+      --color: red;
+    }
+
+    body {
+      color: var(--color);
+    }
+    "
+  `)
+})
+
+it('can calculate CSS variables', () => {
+  const input = css`
+    :root {
+      --__padding-1: 1px;
+      --__padding-2: 2px;
+    }
+
+    .box1 {
+      padding: calc(var(--__padding-1) + var(--__padding-2));
+    }
+    .box2 {
+      padding: calc(var(--__padding-1) * 2 + var(--__padding-2) + 10px);
+    }
+    .box3 {
+      padding: calc(10px + 20px);
+    }
+    .box4 {
+      padding: calc((var(--__padding-1) + var(--__padding-2)) * 3);
+    }
+    .box5 {
+      padding: calc(var(--__padding-1) / 2);
+    }
+  `
+
+  const output = transform({
+    filename: 'test.css',
+    code: Buffer.from(input),
+    visitor: cssVariables(),
+  }).code.toString()
+
+  expect(output).toMatchInlineSnapshot(`
+    ".box1 {
+      padding: 3px;
+    }
+
+    .box2 {
+      padding: 14px;
+    }
+
+    .box3 {
+      padding: 30px;
+    }
+
+    .box4 {
+      padding: 9px;
+    }
+
+    .box5 {
+      padding: .5px;
+    }
+    "
+  `)
+})
+
+it('keeps calc with mixed units as-is', () => {
+  const input = css`
+    :root {
+      --_size: 20px;
+    }
+
+    .box {
+      width: calc(100% - var(--_size));
+    }
+  `
+
+  const output = transform({
+    filename: 'test.css',
+    code: Buffer.from(input),
+    visitor: cssVariables(),
+  }).code.toString()
+
+  expect(output).toMatchInlineSnapshot(`
+    ".box {
+      width: calc(100% - 20px);
+    }
+    "
+  `)
+})

package/src/index.ts

@@ -0,0 +1,77 @@
+import type { TokenOrValue, Visitor } from 'lightningcss'
+
+import { evaluateCalc } from './calc.ts'
+
+export interface Options {
+  /**
+   * A regular expression or an array of regular expressions to match the custom variable names that should
+   * be inlined. By default, all custom variables that start with `--_` will be inlined.
+   */
+  include?: RegExp | RegExp[]
+}
+
+const defaultInclude = /^--_/
+
+function ensureArray<T>(value: T | T[]): T[] {
+  return Array.isArray(value) ? value : [value]
+}
+
+function warn(message: string) {
+  console.warn(`[lightningcss-plugin-css-variables] ${message}`)
+}
+
+export function cssVariables(options?: Options): Visitor<never> {
+  const includePatterns: RegExp[] = ensureArray(
+    options?.include || defaultInclude,
+  )
+
+  const check = (name: string): boolean => {
+    return includePatterns.some((pattern) => pattern.test(name))
+  }
+
+  const variables = new Map<string, TokenOrValue[]>()
+
+  return {
+    Declaration: {
+      custom(property) {
+        const name: string = property.name
+        const value: TokenOrValue[] = property.value
+
+        if (!check(name)) {
+          return
+        }
+
+        if (variables.has(name)) {
+          warn(
+            `Variable "${name}" is already defined. Ignoring duplicate declaration.`,
+          )
+          return
+        }
+
+        variables.set(name, value)
+        return []
+      },
+    },
+    Variable(variable) {
+      const name: string = variable.name.ident
+      if (!check(name)) {
+        return
+      }
+
+      const value = variables.get(name)
+      if (value == null) {
+        warn(`Variable "${name}" is not defined. Cannot inline value.`)
+        return
+      }
+
+      return value
+    },
+    FunctionExit: {
+      calc(fn: { name: string; arguments: TokenOrValue[] }) {
+        return evaluateCalc(fn.arguments)
+      },
+    },
+  }
+}
+
+export default cssVariables