fix: wonky function names. fixes #92

shellscape · Apr 17, 2020 · 3552433 · 3552433
1 parent a5d5540
commit 3552433
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 2 deletions.
diff --git a/lib/nodes/Func.js b/lib/nodes/Func.js
@@ -8,11 +8,84 @@
   The above copyright notice and this permission notice shall be
   included in all copies or substantial portions of this Source Code Form.
 */
+const { getTokens } = require('../tokenize');
 const { registerWalker } = require('../walker');
 
 const Container = require('./Container');
 
+const allFunctions = [
+  'annotation',
+  'attr',
+  'blur',
+  'brightness',
+  'calc',
+  'character-variant',
+  'circle',
+  'contrast',
+  'cubic-bezier',
+  'dir',
+  'drop-shadow',
+  'element',
+  'ellipse',
+  'grayscale',
+  'hsl',
+  'hsla',
+  'hue-rotate',
+  'image',
+  'inset',
+  'invert',
+  'lang',
+  'linear-gradient',
+  'matrix',
+  'matrix3d',
+  'minmax',
+  'not',
+  'nth-child',
+  'nth-last-child',
+  'nth-last-of-type',
+  'nth-of-type',
+  'opacity',
+  'ornaments',
+  'perspective',
+  'polygon',
+  'radial-gradient',
+  'rect',
+  'repeat',
+  'repeating-linear-gradient',
+  'repeating-radial-gradient',
+  'rgb',
+  'rgba',
+  'rotate',
+  'rotatex',
+  'rotatey',
+  'rotatez',
+  'rotate3d',
+  'saturate',
+  'scale',
+  'scalex',
+  'scaley',
+  'scalez',
+  'scale3d',
+  'sepia',
+  'skew',
+  'skewx',
+  'skewy',
+  'steps',
+  'styleset',
+  'stylistic',
+  'swash',
+  'symbols',
+  'translate',
+  'translatex',
+  'translatey',
+  'translatez',
+  'translate3d',
+  'url',
+  'var'
+];
 const colorFunctions = ['hsl', 'hsla', 'rgb', 'rgba'];
+const vendorPrefixes = ['-webkit-', '-moz-', '-ms-', '-o-'];
+const reFunctions = new RegExp(`^(${vendorPrefixes.join('|')})?(${allFunctions.join('|')})`, 'i');
 const reVar = /^--[^\s]+$/;
 
 class Func extends Container {
@@ -43,6 +116,14 @@ class Func extends Container {
     let expectedParens = 1;
     let lastToken = brackets;
 
+    // fixes #92
+    if (!reFunctions.test(node.name) && !/^[a-zA-Z]+$/.test(node.name)) {
+      const nameTokens = getTokens(node.name);
+      tokens.unshift(...nameTokens, brackets);
+      parser.back(tokens);
+      return;
+    }
+
     parser.init(node, startLine, startChar);
     parser.current = node; // eslint-disable-line no-param-reassign
 
@@ -85,7 +166,8 @@ class Func extends Container {
       opts.parentNode = node;
       // use a new parser to parse the params of the function. recursion here makes for easier maint
       // we must require this here due to circular dependency resolution
-      const { parse } = require('../'); // eslint-disable-line global-require
+      // eslint-disable-next-line global-require
+      const { parse } = require('../');
       const root = parse(params, opts);
       const { nodes: children } = root;
 

diff --git a/test/fixtures/func.js b/test/fixtures/func.js
@@ -40,7 +40,8 @@ module.exports = {
     'rotate(.5deg)',
     'rotate(0.5rad)',
     'rotate(0.5grad)',
-    'rotate(0.5turn)'
+    'rotate(0.5turn)',
+    '1em/var(--line-height)'
   ],
 
   throws: ['url( /gfx/img/bg.jpg ']

diff --git a/test/snapshots/func.test.js.md b/test/snapshots/func.test.js.md
@@ -3362,3 +3362,122 @@ Generated by [AVA](https://ava.li).
         type: 'func',
       },
     ]
+
+## 1em/var(--line-height)
+
+> Snapshot 1
+
+    '1em'
+
+> Snapshot 2
+
+    '1em/var(--line-height)'
+
+> Snapshot 3
+
+    [
+      Numeric {
+        raws: {
+          after: '',
+          before: '',
+        },
+        source: {
+          end: {
+            column: 1,
+            line: 1,
+          },
+          input: Input {
+            css: '1em/var(--line-height)',
+            hasBOM: false,
+            id: '<input css 65>',
+          },
+          start: {
+            column: 1,
+            line: 1,
+          },
+        },
+        type: 'numeric',
+        unit: 'em',
+        value: '1',
+      },
+      Operator {
+        raws: {
+          after: '',
+          before: '',
+        },
+        source: {
+          end: {
+            column: 4,
+            line: 1,
+          },
+          input: Input {
+            css: '1em/var(--line-height)',
+            hasBOM: false,
+            id: '<input css 65>',
+          },
+          start: {
+            column: 4,
+            line: 1,
+          },
+        },
+        type: 'operator',
+        value: '/',
+      },
+      Func {
+        isColor: false,
+        isVar: true,
+        name: 'var',
+        nodes: [
+          Word {
+            isColor: false,
+            isHex: false,
+            isUrl: false,
+            isVariable: true,
+            parent: [Circular],
+            raws: {
+              after: '',
+              before: '',
+            },
+            source: {
+              end: {
+                column: 1,
+                line: 1,
+              },
+              input: Input {
+                css: '--line-height',
+                hasBOM: false,
+                id: '<input css 67>',
+              },
+              start: {
+                column: 1,
+                line: 1,
+              },
+            },
+            type: 'word',
+            value: '--line-height',
+          },
+        ],
+        params: '(--line-height)',
+        raws: {
+          after: '',
+          before: '',
+          semicolon: false,
+        },
+        source: {
+          end: {
+            column: 8,
+            line: 1,
+          },
+          input: Input {
+            css: '1em/var(--line-height)',
+            hasBOM: false,
+            id: '<input css 65>',
+          },
+          start: {
+            column: 5,
+            line: 1,
+          },
+        },
+        type: 'func',
+      },
+    ]
diff --git a/test/snapshots/func.test.js.snap b/test/snapshots/func.test.js.snap