Fix regression, replace values in expressions without spaces, closes #23

index.js

@@ -2,7 +2,7 @@ const postcss = require('postcss');
 const path = require('path');
 const promisify = require('es6-promisify');
 const { CachedInputFileSystem, NodeJsInputFileSystem, ResolverFactory } = require('enhanced-resolve');
-const valueParser = require('postcss-value-parser');
+const valuesParser = require('postcss-values-parser');
 
 const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
 const matchValueDefinition = /(?:\s+|^)([\w-]+)(:?\s+)(.+?)(\s*)$/g;
@@ -17,7 +17,7 @@ const nodeFs = new CachedInputFileSystem(new NodeJsInputFileSystem(), 4000);
 const concordContext = {};
 
 const replaceValueSymbols = (valueString, replacements) => {
-  const value = valueParser(valueString);
+  const value = valuesParser(valueString, { loose: true }).parse();
 
   value.walk((node) => {
     if (node.type !== 'word') return;

package.json

@@ -22,7 +22,7 @@
     "enhanced-resolve": "^3.1.0",
     "es6-promisify": "^5.0.0",
     "postcss": "^6.0.1",
-    "postcss-value-parser": "^3.3.0"
+    "postcss-values-parser": "^1.3.1"
   },
   "devDependencies": {
     "ava": "^0.24.0",

test.js

@@ -48,6 +48,14 @@ test('gives an error when @value statement is invalid', async (t) => {
   await t.throws(processor.process(input, parserOpts));
 });
 
+test('shouldn\'t break on draft spec syntax', async (t) => {
+  await run(
+    t,
+    '.foo { width: calc(2+2); }',
+    '.foo { width: calc(2+2); }',
+  );
+});
+
 test('should replace constants within the file', async (t) => {
   await run(
     t,
@@ -56,6 +64,14 @@ test('should replace constants within the file', async (t) => {
   );
 });
 
+test('shouldn\'t replace number-like values', async (t) => {
+  await run(
+    t,
+    '@value 3char #000; .foo { color: 3char; }',
+    '@value 3char #000; .foo { color: 3char; }',
+  );
+});
+
 test('shouldn\'t replace selector', async (t) => {
   await run(
     t,
@@ -72,6 +88,22 @@ test('shouldn\'t replace inside url', async (t) => {
   );
 });
 
+test('should replace within calc', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n.a { margin: calc(base * 2); }',
+    '@value base: 10px;\n.a { margin: calc(10px * 2); }',
+  );
+});
+
+test('should replace within calc without spaces', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n.a { margin: calc(base*2); }',
+    '@value base: 10px;\n.a { margin: calc(10px*2); }',
+  );
+});
+
 test('should replace two constants with same name within the file and the latter should win', async (t) => {
   await run(
     t,
@@ -191,6 +223,22 @@ test('should allow transitive values within calc', async (t) => {
   );
 });
 
+test('should allow transitive values within calc without spaces', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n@value large: calc(base*2);\n.a { margin: large; }',
+    '@value base: 10px;\n@value large: calc(10px*2);\n.a { margin: calc(10px*2); }',
+  );
+});
+
+test('should replace inside custom properties', async (t) => {
+  await run(
+    t,
+    '@value path: test.png;\n:root {--path: path};\n.foo { background-image: url(var(--path)); }',
+    '@value path: test.png;\n:root {--path: test.png};\n.foo { background-image: url(var(--path)); }',
+  );
+});
+
 test('should allow custom-property-style names', async (t) => {
   await run(
     t,
@@ -202,9 +250,9 @@ test('should allow custom-property-style names', async (t) => {
 test('should allow all colour types', async (t) => {
   await run(
     t,
-    '@value named: red; @value 3char #0f0; @value 6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
-    '.foo { color: named; background-color: 3char; border-top-color: 6char; border-bottom-color: rgba; outline-color: hsla; }',
-    '@value named: red; @value 3char #0f0; @value 6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
+    '@value named: red; @value hex3char #0f0; @value hex6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
+    '.foo { color: named; background-color: hex3char; border-top-color: hex6char; border-bottom-color: rgba; outline-color: hsla; }',
+    '@value named: red; @value hex3char #0f0; @value hex6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
     '.foo { color: red; background-color: #0f0; border-top-color: #00ff00; border-bottom-color: rgba(34, 12, 64, 0.3); outline-color: hsla(220, 13.0%, 18.0%, 1); }',
   );
 });