🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

postcss-css-variables

Package Overview
Dependencies
4
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-css-variables - npm Package Compare versions

Comparing version

0.13.0
to
0.14.0

5

CHANGELOG.md

@@ -0,1 +1,6 @@

# v0.14.0 - 2019-11-24
- Fix regex in `resolve-value.js` to allow nested CSS functions
- Thank you to [@juliovedovatto](https://github.com/juliovedovatto) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/97)
# v0.13.0 - 2019-6-17

@@ -2,0 +7,0 @@

64

lib/resolve-value.js

@@ -0,1 +1,3 @@

var balanced = require('balanced-match');
var generateScopeList = require('./generate-scope-list');

@@ -8,9 +10,5 @@ var isNodeUnderScope = require('./is-node-under-scope');

// Regexp to capture variable names
var RE_VAR_FUNC = (/var\(\s*(--[^,\s)]+)/);
// var() = var( <custom-property-name> [, <any-value> ]? )
// matches `name[, fallback]`, captures "name" and "fallback"
// See: http://dev.w3.org/csswg/css-variables/#funcdef-var
var RE_VAR_FUNC = (/var\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/);
function toString(value) {

@@ -31,10 +29,28 @@ return String(value);

var matchingVarDecl = undefined;
var resultantValue = toString(decl.value);
var warnings = [];
var variablesUsedInValueMap = {};
// Use `replace` as a loop to go over all occurrences with the `g` flag
resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
// Match all variables first so we can later on if there are circular dependencies
var variablesUsedInValueMap = {}
// Create a temporary variable, storing resultantValue variable value
var remainingVariableValue = resultantValue;
// Use balanced lib to find var() declarations and store variable names
while ((matchingVarDecl = balanced('var(', ')', remainingVariableValue))) {
// Split at the comma to find variable name and fallback value
// There may be other commas in the values so this isn't necessarily just 2 pieces
var variableFallbackSplitPieces = matchingVarDecl.body.split(',');
// Get variable name and fallback, filtering empty items
var variableName = variableFallbackSplitPieces[0].trim();
// add variable found in the object
variablesUsedInValueMap[variableName] = true;
});
// Replace variable name (first occurence only) from result, to avoid circular loop
remainingVariableValue = (matchingVarDecl.pre || '') + matchingVarDecl.body.replace(variableName, '') + (matchingVarDecl.post || '');
}
// clear temporary variable
remainingVariableValue = undefined;
var variablesUsedInValue = Object.keys(variablesUsedInValueMap);

@@ -46,8 +62,17 @@

var isResultantValueUndefined = false;
resultantValue = resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
// Loop through the list of declarations for that value and find the one that best matches
// By best match, we mean, the variable actually applies. Criteria:
// - is under the same scope
// - The latest defined `!important` if any
var matchingVarDeclMapItem;
// var() = var( <custom-property-name> [, <any-value> ]? )
// matches `name[, fallback]`, captures "name" and "fallback"
// See: http://dev.w3.org/csswg/css-variables/#funcdef-var
while ((matchingVarDecl = balanced('var(', ')', resultantValue))) {
var matchingVarDeclMapItem = undefined;
// Split at the comma to find variable name and fallback value
// There may be other commas in the values so this isn't necessarily just 2 pieces
var variableFallbackSplitPieces = matchingVarDecl.body.split(',');
// Get variable name and fallback, filtering empty items
var variableName = variableFallbackSplitPieces[0].trim();
var fallback = variableFallbackSplitPieces.length > 1 ? variableFallbackSplitPieces.slice(1).join(',').trim() : undefined;
(map[variableName] || []).forEach(function(varDeclMapItem) {

@@ -103,7 +128,6 @@ // Make sure the variable declaration came from the right spot

//console.log(debugIndent, 'replaceValue', replaceValue);
// Replace original declaration with found value
resultantValue = (matchingVarDecl.pre || '') + replaceValue + (matchingVarDecl.post || '')
}
return replaceValue;
});
return {

@@ -110,0 +134,0 @@ // The resolved value

3

package.json
{
"name": "postcss-css-variables",
"version": "0.13.0",
"version": "0.14.0",
"description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",

@@ -17,2 +17,3 @@ "keywords": [

"dependencies": {
"balanced-match": "^1.0.0",
"escape-string-regexp": "^1.0.3",

@@ -19,0 +20,0 @@ "extend": "^3.0.1",