diff --git a/package.json b/package.json
index 041100a5..5ca5b05f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
     "lint-ci": "eslint src/",
     "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
+    "test:postcss": "impunity --entry-point  postcss/test.js ",
     "start": "vite --port 3000",
     "build": "vite build",
     "build:sdk": "./scripts/sdk/build.sh"
diff --git a/postcss/css-compile-variables.js b/postcss/css-compile-variables.js
index e212ee69..8737067d 100644
--- a/postcss/css-compile-variables.js
+++ b/postcss/css-compile-variables.js
@@ -1,4 +1,4 @@
-import { offColor } from 'off-color';
+const offColor = require("off-color").offColor;
 
 let aliasMap;
 let resolvedMap;
@@ -22,13 +22,13 @@ function resolveDerivedVariable(decl, variables) {
         switch (operation) {
             case "darker": {
                 const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
-                const newColorString = new offColor(colorString).darken(argument / 100).hex();
+                const newColorString = offColor(colorString).darken(argument / 100).hex();
                 resolvedMap.set(wholeVariable, newColorString);
                 break;
             }
             case "lighter": {
                 const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
-                const newColorString = new offColor(colorString).lighten(argument / 100).hex();
+                const newColorString = offColor(colorString).lighten(argument / 100).hex();
                 resolvedMap.set(wholeVariable, newColorString);
                 break;
             }
diff --git a/postcss/test.js b/postcss/test.js
new file mode 100644
index 00000000..104696aa
--- /dev/null
+++ b/postcss/test.js
@@ -0,0 +1,66 @@
+const offColor = require("off-color").offColor;
+const postcss = require("postcss");
+const plugin = require("./css-compile-variables");
+
+async function run(input, output, opts = {}, assert) {
+    let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+    assert.strictEqual(
+        result.css.replaceAll(/\s/g, ""),
+        output.replaceAll(/\s/g, "")
+    );
+    assert.strictEqual(result.warnings().length, 0);
+}
+
+module.exports.tests = function tests() {
+    return {
+        "derived variables are resolved": async (assert) => {
+            const inputCSS = `div {
+                background-color: var(--foo-color--lighter-50);
+            }`;
+            const transformedColor = offColor("#ff0").lighten(0.5);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color: #ff0;
+                --foo-color--lighter-50: ${transformedColor.hex()};
+            }
+            `;
+            await run(
+                inputCSS,
+                outputCSS,
+                { variables: { "foo-color": "#ff0" } },
+                assert
+            );
+        },
+
+        "derived variables work with alias": async (assert) => {
+            const inputCSS = `div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            const colorDarker = offColor("#fff").darken(0.2).hex();
+            const aliasLighter = offColor(colorDarker).lighten(0.15).hex();
+            const outputCSS = `div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }
+            :root {
+                --icon-color: #fff;
+                --icon-color--darker-20: ${colorDarker};
+                --my-alias--lighter-15: ${aliasLighter};
+            }
+            `;
+            await run(inputCSS, outputCSS, { variables: { "icon-color": "#fff" }, }, assert);
+        },
+
+        "derived variable throws if base not present in config": async (assert) => {
+            const css = `:root {
+                color: var(--icon-color--darker-20);
+            }`;
+            assert.rejects(async () => await postcss([plugin({ variables: {} })]).process(css, { from: undefined, }));
+        }
+    };
+};