postcss-values-parser - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

lib/container.js

@@ -174,3 +174,2 @@ 'use strict';
   toString () {
-    // console.log('container >', 'toString:', this.nodes.length, this.type, this.value);
     let result = this.nodes.map(String).join('');
@@ -177,0 +176,0 @@

lib/node.js

@@ -52,4 +52,2 @@ 'use strict';
   toString () {
-    // console.log('node >', 'toString:', this.value);
-
     return [
@@ -56,0 +54,0 @@ this.raws.before,

lib/number.js

@@ -14,4 +14,2 @@ 'use strict';
   toString () {
-    // console.log('node >', 'toString:', this.value);
-
     return [
@@ -18,0 +16,0 @@ this.raws.before,

lib/parser.js

@@ -149,3 +149,4 @@ 'use strict';
           if (this.current.type === 'func' && this.current.value === 'calc') {
-            if (this.prevToken[0] !== 'space') {
+            // allow operators to be proceeded by spaces and opening parens
+            if (this.prevToken[0] !== 'space' && this.prevToken[0] !== '(') {
               this.error('Syntax Error', this.currToken);
@@ -159,4 +160,6 @@ }
             // valid: calc(1 - +2)
+            // valid: calc(-0.5 + 2)
             // invalid: calc(1 -2)
-            else if (this.nextToken[0] === 'word' && this.current.last.type !== 'operator') {
+            else if (this.nextToken[0] === 'word' && this.current.last.type !== 'operator' &&
+                     this.current.last.value !== '(') {
               this.error('Syntax Error', this.currToken);
@@ -298,3 +301,5 @@ }
     if (this.current.type === 'func' && this.current.unbalanced &&
-        this.current.value === 'url' && this.currToken[0] !== 'string') {
+        this.current.value === 'url' && this.currToken[0] !== 'string' &&
+        this.currToken[0] !== ')' && !this.options.loose) {
+
       let nextToken = this.nextToken,
@@ -384,11 +389,19 @@ value = this.currToken[1],
       rNumber = /^[\+\-]?((\d+(\.\d*)?)|(\.\d+))/,
+
+      // treat css-like groupings differently so they can be inspected,
+      // but don't address them as anything but a word, but allow hex values
+      // to pass through.
+      rNoFollow = /^(?!\#([a-z0-9]+))[\#\{\}]/gi,
+
       hasAt, indices;
 
-    while (nextToken && nextToken[0] === 'word') {
-      this.position ++;
+    if (!rNoFollow.test(word)) {
+      while (nextToken && nextToken[0] === 'word') {
+        this.position ++;
 
-      let current = this.currToken[1];
-      word += current;
+        let current = this.currToken[1];
+        word += current;
 
-      nextToken = this.nextToken;
+        nextToken = this.nextToken;
+      }
     }
@@ -456,4 +469,4 @@
         if (node.constructor.name === 'Word') {
-          node.isHex = /^#/.test(value);
-          node.isColor = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+          node.isHex = /^#(.+)/.test(value);
+          node.isColor = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value);
         }
@@ -460,0 +473,0 @@ else {

lib/tokenize.js

 'use strict';
 
+const openBracket = '{'.charCodeAt(0);
+const closeBracket = '}'.charCodeAt(0);
 const openParen = '('.charCodeAt(0);
@@ -14,2 +16,3 @@ const closeParen = ')'.charCodeAt(0);
 const plus = '+'.charCodeAt(0);
+const pound = '#'.charCodeAt(0);
 const newline = '\n'.charCodeAt(0);
@@ -22,4 +25,5 @@ const space = ' '.charCodeAt(0);
 const atEnd = /[ \n\t\r\{\(\)'"\\;,/]/g;
-const wordEnd = /[ \n\t\r\(\)\*:;@!&'"\+\|~>,\[\]\\]|\/(?=\*)/g;
-const wordEndNum = /[ \n\t\r\(\)\*:;@!&'"\-\+\|~>,\[\]\\]|\//g;
+const wordEnd = /[ \n\t\r\(\)\{\}\*:;@!&'"\+\|~>,\[\]\\]|\/(?=\*)/g;
+const wordEndNum = /[ \n\t\r\(\)\{\}\*:;@!&'"\-\+\|~>,\[\]\\]|\//g;
+const alphaNum = /^[a-z0-9]/i;
 
@@ -112,2 +116,18 @@ const util = require('util');
 
+      case openBracket:
+        tokens.push(['{', '{',
+          line, pos  - offset,
+          line, next - offset,
+          pos
+        ]);
+        break;
+
+      case closeBracket:
+        tokens.push(['}', '}',
+          line, pos  - offset,
+          line, next - offset,
+          pos
+        ]);
+        break;
+
       case openParen:
@@ -257,2 +277,13 @@ tokens.push(['(', '(',
         }
+        else if (code === pound && !alphaNum.test(css.slice(pos + 1, pos + 2))) {
+          next = pos + 1;
+
+          tokens.push(['#', css.slice(pos, next),
+            line, pos  - offset,
+            line, next - offset,
+            pos
+          ]);
+
+          pos = next - 1;
+        }
         // catch a regular slash, that isn't a comment
@@ -259,0 +290,0 @@ else if (code === slash) {

package.json

 {
   "name": "postcss-values-parser",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A CSS property value parser for use with PostCSS",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -70,15 +70,26 @@ # postcss-values-parser  [![Build Status](https://travis-ci.org/lesshint/postcss-values-parser.svg?branch=master)](https://travis-ci.org/lesshint/postcss-values-parser)
 
-## CSS-Like Languages
+## Loose Mode
 
-If your intent is to use this parser with a CSS-like language (eg. SASS, LESS)
-then you can instruct the parser **_not to adhere to strict CSS_** parsing rules as
-per [the spec](https://drafts.csswg.org/css-values-3/). For example, the parser
-will throw an error by default if `calc` parameters [don't adhere to the spec](https://drafts.csswg.org/css-values-3/#calc-syntax).
+Loose mode was introduced to support adherence to the W3C CSS Specification as
+well as the ability to parse noncompliant CSS for variants like LESS, SCSS, and
+CSSNext. If you're working with a noncompliant or CSS-like variant, then loose
+mode is for you.
 
-We call this `loose` mode. To enable `loose` mode, pass an options object to the
-`parser` method:
+For example, the parser
+will throw an error by default if `calc` parameters [don't adhere to the spec](https://www.w3.org/TR/css-values/#calc-syntax).
+However, with loose mode enabled, the parse will ignore spec rules and succeed.
 
+In-draft features, or CSS features in modules not yet finalized, often cause parser
+errors. eg. `url(var(--somevar))`. Loose mode supports parsing of these features.
+
+Loose Mode is enabled by passing an option of `loose: true` to the `parser` method.
+
 ```js
+const less = 'calc(2+2)'; // not valid per spec, but valid in LESS
+const cssnext = 'url(var(--somevar))'; // not valid per spec, but in spec draft
+
 const parser = require('postcss-values-parser');
-const ast = parser('#fff', { loose: true }).parse();
+const ast = parser(less, { loose: true }).parse();
+
+// parse will succeed
 ```
@@ -85,0 +96,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53333

increased by2.97%

Lines of code

1315

increased by2.65%

Number of lines in readme file

103

increased by11.96%

No dependency changes