Add alpha function

src/postcss-color-mix-alpha.ts

@@ -0,0 +1,56 @@
+import type { Root } from 'postcss';
+
+const colorValueRegexp = new RegExp('\\b' + 'alpha' + '\\(([^()]+)\\)', 'g');
+const varRegexp = new RegExp('\\b' + 'alpha' + '\\(([^()]*\\([^()]*\\)[^()]*)+\\)', 'g');
+
+function getMixedColor(input: string, colorSpace = 'srgb') {
+  if (typeof input !== 'string') {
+    return input;
+  }
+
+  const lastCommaIndex = input.lastIndexOf(',');
+
+  if (lastCommaIndex === -1) {
+    return input;
+  }
+
+  const color = input.slice(0, lastCommaIndex).trim();
+  const alpha = Number(input.slice(lastCommaIndex + 1));
+
+  if (Number.isNaN(alpha)) {
+    return input;
+  }
+
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+
+  if (clampedAlpha === 1) {
+    return color;
+  }
+
+  if (clampedAlpha === 0) {
+    return 'transparent';
+  }
+
+  const mixPercentage = (1 - clampedAlpha) * 100;
+
+  return `color-mix(in ${colorSpace}, ${color}, transparent ${mixPercentage}%)`;
+}
+
+module.exports = () => {
+  return {
+    postcssPlugin: 'postcss-color-mix-alpha',
+
+    Once(root: Root) {
+      root.replaceValues(colorValueRegexp, { fast: `alpha(` }, (_, values: string) => {
+        console.log('value', values);
+        return getMixedColor(values);
+      });
+      root.replaceValues(varRegexp, { fast: `alpha(` }, (_, values: string) => {
+        console.log('var', values);
+        return getMixedColor(values);
+      });
+    },
+  };
+};
+
+module.exports.postcss = true;

src/preset.ts

@@ -1,6 +1,7 @@
 const nested = require('postcss-nested');
 const mixins = require('postcss-mixins');
 const remEm = require('./postcss-rem-em');
+const colorMixAlpha = require('./postcss-color-mix-alpha');
 const lightDark = require('./postcss-light-dark');
 const converters = require('./converters');
 
@@ -75,6 +76,7 @@ module.exports = () => {
     plugins: [
       lightDark(),
       nested(),
+      colorMixAlpha(),
       remEm(),
       mixins({
         mixins: {

src/tests/__snapshots__/color-mix-alpha.test.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`color-mix-alpha correctly mixes colors 1`] = `
+"
+.demo {
+  background: color-mix(in srgb, #f00, transparent 50%);
+  border: calc(0.0625rem * var(--mantine-scale)) solid color-mix(in srgb, var(--mantine-color-gray-4), transparent 90%);
+}
+"
+`;

src/tests/color-mix-alpha.test.ts

@@ -0,0 +1,15 @@
+import { testTransform } from './utils';
+
+const input = `
+.demo {
+  background: alpha(#f00, 0.5);
+  border: rem(1px) solid alpha(var(--mantine-color-gray-4), 0.1);
+}
+`;
+
+describe('color-mix-alpha', () => {
+  it('correctly mixes colors', async () => {
+    const res = await testTransform(input);
+    expect(res.css).toMatchSnapshot();
+  });
+});