From 6fe9cb477105894cffc28c25958e0256a71ace03 Mon Sep 17 00:00:00 2001
From: Brad Cornes
Date: Mon, 15 Mar 2021 12:03:36 +0000
Subject: [PATCH 1/2] add support for calc() in arbitrary values
---
src/pluginUtils.js | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/pluginUtils.js b/src/pluginUtils.js
index 7b400b6..3f15a0f 100644
--- 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\(.+?)(?
Date: Mon, 15 Mar 2021 13:48:45 +0000
Subject: [PATCH 2/2] add arbitrary values test
---
tests/08-arbitrary-values.test.css | 78 +++++++++++++++++++++++++++++
tests/08-arbitrary-values.test.html | 25 +++++++++
tests/08-arbitrary-values.test.js | 30 +++++++++++
3 files changed, 133 insertions(+)
create mode 100644 tests/08-arbitrary-values.test.css
create mode 100644 tests/08-arbitrary-values.test.html
create mode 100644 tests/08-arbitrary-values.test.js
diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
new file mode 100644
index 0000000..4db4aff
--- /dev/null
+++ 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
new file mode 100644
index 0000000..68f9db4
--- /dev/null
+++ b/tests/08-arbitrary-values.test.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/08-arbitrary-values.test.js b/tests/08-arbitrary-values.test.js
new file mode 100644
index 0000000..cbf173c
--- /dev/null
+++ 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)
+ })
+})