tailwindlabs · adamwathan · Mar 15, 2021 · Mar 15, 2021 · Mar 15, 2021
diff --git a/src/pluginUtils.js b/src/pluginUtils.js
@@ -110,8 +110,15 @@ function asValue(modifier, lookup = {}, { validate = () => true, transform = (v)
 function asUnit(modifier, units, lookup = {}) {
   return asValue(modifier, lookup, {
     validate: (value) => {
-      let pattern = new RegExp(`.+(${units.join('|')})$`, 'g')
-      return value.match(pattern) !== null
+      let unitsPattern = `(?:${units.join('|')})`
+      return (
+        new RegExp(`${unitsPattern}$`).test(value) ||
+        new RegExp(`^calc\\(.+?${unitsPattern}`).test(value)
+      )
+    },
+    transform: (value) => {
+      // add spaces around operators inside calc() that do not follow an operator or (
+      return value.replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
     },
   })
 }

diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
@@ -0,0 +1,78 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+.w-\[3\.23rem\] {
+  width: 3.23rem;
+}
+.w-\[calc\(100\%\+1rem\)\] {
+  width: calc(100% + 1rem);
+}
+.rotate-\[23deg\] {
+  --tw-rotate: 23deg;
+}
+.rotate-\[2\.3rad\] {
+  --tw-rotate: 2.3rad;
+}
+.rotate-\[401grad\] {
+  --tw-rotate: 401grad;
+}
+.rotate-\[1\.5turn\] {
+  --tw-rotate: 1.5turn;
+}
+.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
+  grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
+}
+.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(20cm * var(--tw-space-x-reverse));
+  margin-left: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
+}
+.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
+  margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
+}
+.border-\[2\.5px\] {
+  border-width: 2.5px;
+}
+.border-\[\#f00\] {
+  --tw-border-opacity: 1;
+  border-color: rgba(255, 0, 0, var(--tw-border-opacity));
+}
+.bg-\[\#0f0\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 255, 0, var(--tw-bg-opacity));
+}
+.bg-\[\#ff0000\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
+}
+.bg-\[\#0000ffcc\] {
+  background-color: #0000ffcc;
+}
+.bg-\[rgb\(123\,123\,123\)\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(123, 123, 123, var(--tw-bg-opacity));
+}
+.bg-\[rgba\(123\,123\,123\,0\.5\)\] {
+  background-color: rgba(123, 123, 123, 0.5);
+}
+.bg-\[hsl\(0\,100\%\,50\%\)\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
+}
+.bg-\[hsla\(0\,100\%\,50\%\,0\.3\)\] {
+  background-color: hsla(0, 100%, 50%, 0.3);
+}
+.bg-opacity-\[0\.11\] {
+  --tw-bg-opacity: 0.11;
+}
+.text-\[2\.23rem\] {
+  font-size: 2.23rem;
+}
diff --git a/tests/08-arbitrary-values.test.html b/tests/08-arbitrary-values.test.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body>
+    <div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
+    <div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
+    <div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
+    <div class="bg-opacity-[0.11]"></div>
+    <div class="border-[#f00]"></div>
+    <div class="border-[2.5px]"></div>
+    <div class="w-[3.23rem]"></div>
+    <div class="w-[calc(100%+1rem)]"></div>
+    <div class="space-x-[20cm]"></div>
+    <div class="space-x-[calc(20%-1cm)]"></div>
+    <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+    <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
+    <div class="text-[2.23rem]"></div>
+  </body>
+</html>
diff --git a/tests/08-arbitrary-values.test.js b/tests/08-arbitrary-values.test.js
@@ -0,0 +1,30 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('arbitrary values', () => {
+  let config = {
+    purge: [path.resolve(__dirname, './08-arbitrary-values.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './08-arbitrary-values.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})