Skip to content

Commit e2ca314

Browse files
AndyOGoshellscape
authored andcommitted
feat: add isVar meta data (#83)
* feat: added isVar meta tag * test: added var usage example * feat: added proper var check * test: updated tests * fix: isVar test * test: fix tests * fix: isVar check was too restrictive * test: added default fallback for variable * docs: added isVar to func docs
1 parent cc0f0ec commit e2ca314

File tree

5 files changed

+452
-2
lines changed

5 files changed

+452
-2
lines changed

docs/Func.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ Type: `Boolean`<br>
99

1010
If `true`, denotes that the function represents a color-producing function. Valid color-producing functions are: `hsl()`, `hsla()`, `rgb()`, and `rgba()`.
1111

12+
### `isVar`
13+
Type: `Boolean`<br>
14+
15+
If `true`, denotes that the function represents a CSS variable usage function. Valid var function is: `var( <custom-property-name> , <declaration-value>? )`.
16+
1217
### `name`
1318
Type: `String`<br>
1419

lib/nodes/Func.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ const { registerWalker } = require('../walker');
1313
const Container = require('./Container');
1414

1515
const colorFunctions = ['hsl', 'hsla', 'rgb', 'rgba'];
16+
const reVar = /^--[^\s]+$/;
1617

1718
class Func extends Container {
1819
constructor(options = {}) {
1920
super(options);
2021
this.type = 'func';
2122
this.isColor = false;
23+
this.isVar = false;
2224
this.name = options.name || '';
2325
if (!this.nodes) {
2426
this.nodes = [];
@@ -101,7 +103,10 @@ class Func extends Container {
101103
parser.back(rightTokens);
102104

103105
const { lastNode } = parser;
104-
lastNode.isColor = colorFunctions.includes(lastNode.name.toLowerCase());
106+
const lowerName = lastNode.name.toLowerCase();
107+
const { nodes } = node;
108+
lastNode.isColor = colorFunctions.includes(lowerName);
109+
lastNode.isVar = lowerName === 'var' && nodes.length && reVar.test(nodes[0].value);
105110
}
106111
}
107112

test/fixtures/func.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,12 @@ module.exports = {
2929
'calc(1px + -2vw - 4px)',
3030
'calc(((768px - 100vw) / 2) - 15px)',
3131
'bar(baz(black, 10%), 10%)',
32-
'-webkit-linear-gradient(0)'
32+
'-webkit-linear-gradient(0)',
33+
'var(--foo)',
34+
'var( --foo)',
35+
'var(--foo )',
36+
'var( --foo )',
37+
'var(--foo, default-value)'
3338
],
3439

3540
throws: ['url( /gfx/img/bg.jpg ']

0 commit comments

Comments
 (0)