fix: properly handle arbitrary var names with dashed digits (#176)

tw-in-js · Apr 20, 2021 · 20239b0 · 20239b0
1 parent c10379b
commit 20239b0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
       "name": "twind",
       "path": "dist/twind.js",
       "brotli": true,
-      "limit": "12kb"
+      "limit": "12.1kb"
     },
     {
       "name": "twind/colors",

diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -852,11 +852,13 @@
   "grid-cols-[repeat(auto-fit,minmax(150px,1fr))]": ".grid-cols-\\[repeat\\(auto-fit\\,minmax\\(150px\\,1fr\\)\\)\\]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}",
   "w-[clamp(23ch,50%,46ch)]": ".w-\\[clamp\\(23ch\\,50\\%\\,46ch\\)\\]{width:clamp(23ch,50%,46ch)}",
   "w-[calc(var(--width-10px,calc(-20px-(-30px--40px)))-50px)]": ".w-\\[calc\\(var\\(--width-10px\\,calc\\(-20px-\\(-30px--40px\\)\\)\\)-50px\\)\\]{width:calc(var(--width-10px,calc(-20px - (-30px - -40px))) - 50px)}",
+  "w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]": ".w-\\[calc\\(var\\(--10-10px\\,calc\\(-20px-\\(-30px--40px\\)\\)\\)-50px\\)\\]{width:calc(var(--10-10px,calc(-20px - (-30px - -40px))) - 50px)}",
   "w-[calc(1rem+((1vw-7.68px)*0.6944))]": ".w-\\[calc\\(1rem\\+\\(\\(1vw-7\\.68px\\)\\*0\\.6944\\)\\)\\]{width:calc(1rem + ((1vw - 7.68px) * 0.6944))}",
   "w-[calc(100%-80px)]": ".w-\\[calc\\(100\\%-80px\\)\\]{width:calc(100% - 80px)}",
   "w-[calc(var(--width-10px,calc(-2px-(-30px--40px)))-50px)]": ".w-\\[calc\\(var\\(--width-10px\\,calc\\(-2px-\\(-30px--40px\\)\\)\\)-50px\\)\\]{width:calc(var(--width-10px,calc(-2px - (-30px - -40px))) - 50px)}",
   "w-[calc(var(--top,calc(10px+10vh))-1rem)]": ".w-\\[calc\\(var\\(--top\\,calc\\(10px\\+10vh\\)\\)-1rem\\)\\]{width:calc(var(--top,calc(10px + 10vh)) - 1rem)}",
   "w-[calc(var(--variable-width)+20px)]": ".w-\\[calc\\(var\\(--variable-width\\)\\+20px\\)\\]{width:calc(var(--variable-width) + 20px)}",
+  "w-[calc(var(--10-10px)+20px)]": ".w-\\[calc\\(var\\(--10-10px\\)\\+20px\\)\\]{width:calc(var(--10-10px) + 20px)}",
   "w-[calc(5*2em)]": ".w-\\[calc\\(5\\*2em\\)\\]{width:calc(5 * 2em)}",
   "w-[calc(100%-30px)]": ".w-\\[calc\\(100\\%-30px\\)\\]{width:calc(100% - 30px)}",
   "w-[calc(10px+100px)]": ".w-\\[calc\\(10px\\+100px\\)\\]{width:calc(10px + 100px)}",

diff --git a/src/twind/theme.ts b/src/twind/theme.ts
@@ -916,7 +916,9 @@ const resolveContext: ThemeSectionResolverContext = {
 const handleArbitraryValues = (section: keyof Theme, key: string): string | false =>
   (key = (key[0] == '[' && key.slice(-1) == ']' && key.slice(1, -1)) as string) &&
   includes(section, 'olor') == /^(#|(hsl|rgb)a?\(|[a-z]+$)/.test(key) &&
-  (includes(key, 'calc(') ? key.replace(/(-?\d*\.?\d(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ') : key)
+  (includes(key, 'calc(')
+    ? key.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+    : key)
 
 export const makeThemeResolver = (config?: ThemeConfiguration): ThemeResolver => {
   const cache = new Map<keyof Theme, Record<string, unknown>>()