Merge pull request #36 from webschik/webschik.35.escaped-string

webschik.35.escaped-string

Author: webschik

lib/less-tokenize.js

@@ -16,7 +16,6 @@ export default function lessTokenize (input) {
     while (state.pos < state.length) {
         state.symbolCode = state.css.charCodeAt(state.pos);
         state.symbol = state.css[state.pos];
-        state.nextSymbolCode = null;
         state.nextPos = null;
         state.escaped = null;
         state.lines = null;

lib/tokenizer/find-end-of-escaping.js

@@ -0,0 +1,33 @@
+import {backTick, backslash, doubleQuote, singleQuote} from './globals';
+
+/**
+ * @param state
+ * @returns {number}
+ */
+export default function findEndOfEscaping (state) {
+    let openQuotesCount = 0;
+    let quoteCode = -1;
+
+    for (let i = state.pos + 1; i < state.length; i++) {
+        const symbolCode = state.css.charCodeAt(i);
+        const prevSymbolCode = state.css.charCodeAt(i - 1);
+
+        if (
+            prevSymbolCode !== backslash &&
+            (symbolCode === singleQuote || symbolCode === doubleQuote || symbolCode === backTick)
+        ) {
+            if (quoteCode === -1) {
+                quoteCode = symbolCode;
+                openQuotesCount++;
+            } else if (symbolCode === quoteCode) {
+                openQuotesCount--;
+
+                if (!openQuotesCount) {
+                    return i;
+                }
+            }
+        }
+    }
+
+    return -1;
+}

lib/tokenizer/globals.js

@@ -1,6 +1,7 @@
 export const singleQuote = '\''.charCodeAt(0);
 export const doubleQuote = '"'.charCodeAt(0);
 export const backslash = '\\'.charCodeAt(0);
+export const backTick = '`'.charCodeAt(0);
 export const slash = '/'.charCodeAt(0);
 export const newline = '\n'.charCodeAt(0);
 export const space = ' '.charCodeAt(0);

lib/tokenizer/is-escaping.js

@@ -1,25 +1,9 @@
-import findEndOfExpression from './find-end-of-expression';
-import {tilde} from './globals';
+import {backTick, doubleQuote, singleQuote, tilde} from './globals';
 
-export default function isEscaping (state) {
-    let result = false;
-
-    if (state.symbolCode === tilde) {
-        const quotePattern = /\s*['"`]/g;
-
-        quotePattern.lastIndex = state.pos + 1;
+const nextSymbolVariants = [backTick, doubleQuote, singleQuote];
 
-        const match = quotePattern.exec(state.css);
-
-        if (match && match.index === state.pos + 1) {
-            const end = findEndOfExpression(state.css, state.length, quotePattern.lastIndex + 1);
-
-            if (end !== -1) {
-                result = true;
-                state.nextPos = end;
-            }
-        }
-    }
+export default function isEscaping (state) {
+    const nextSymbolCode = state.css.charCodeAt(state.pos + 1);
 
-    return result;
+    return state.symbolCode === tilde && nextSymbolVariants.indexOf(nextSymbolCode) >= 0;
 }

lib/tokenizer/tokenize-default.js

@@ -3,21 +3,32 @@ import {
     slash,
     wordEndPattern
 } from './globals';
+import findEndOfEscaping from './find-end-of-escaping';
 import isEscaping from './is-escaping';
 import tokenizeInlineComment from './tokenize-inline-comment';
 import tokenizeMultilineComment from './tokenize-multiline-comment';
+import unclosed from './unclosed';
 
 export default function tokenizeDefault (state) {
-    state.nextSymbolCode = state.css.charCodeAt(state.pos + 1);
+    const nextSymbolCode = state.css.charCodeAt(state.pos + 1);
 
-    if (state.symbolCode === slash && state.nextSymbolCode === asterisk) {
+    if (state.symbolCode === slash && nextSymbolCode === asterisk) {
         tokenizeMultilineComment(state);
-    } else if (state.symbolCode === slash && state.nextSymbolCode === slash) {
+    } else if (state.symbolCode === slash && nextSymbolCode === slash) {
         tokenizeInlineComment(state);
     } else {
-        if (isEscaping(state) === false) {
+        if (isEscaping(state)) {
+            const pos = findEndOfEscaping(state);
+
+            if (pos < 0) {
+                unclosed(state, 'escaping');
+            } else {
+                state.nextPos = pos;
+            }
+        } else {
             wordEndPattern.lastIndex = state.pos + 1;
             wordEndPattern.test(state.css);
+            
             if (wordEndPattern.lastIndex === 0) {
                 state.nextPos = state.css.length - 1;
             } else {

lib/tokenizer/tokenize-opened-parenthesis.js

@@ -34,19 +34,19 @@ function findClosedParenthesisPosition (css, length, start) {
 // it is not very reasonable to reduce complexity beyond this level
 // eslint-disable-next-line complexity
 export default function tokenizeOpenedParenthesis (state) {
-    state.nextSymbolCode = state.css.charCodeAt(state.pos + 1);
+    const nextSymbolCode = state.css.charCodeAt(state.pos + 1);
     const tokensCount = state.tokens.length;
     const prevTokenCssPart = tokensCount ? state.tokens[tokensCount - 1][1] : '';
 
     if (
         prevTokenCssPart === 'url' &&
-        state.nextSymbolCode !== singleQuote &&
-        state.nextSymbolCode !== doubleQuote &&
-        state.nextSymbolCode !== space &&
-        state.nextSymbolCode !== newline &&
-        state.nextSymbolCode !== tab &&
-        state.nextSymbolCode !== feed &&
-        state.nextSymbolCode !== carriageReturn
+        nextSymbolCode !== singleQuote &&
+        nextSymbolCode !== doubleQuote &&
+        nextSymbolCode !== space &&
+        nextSymbolCode !== newline &&
+        nextSymbolCode !== tab &&
+        nextSymbolCode !== feed &&
+        nextSymbolCode !== carriageReturn
     ) {
         state.nextPos = state.pos;
 
@@ -91,7 +91,7 @@ export default function tokenizeOpenedParenthesis (state) {
             ]);
         } else {
             const badBracket = badBracketPattern.test(state.cssPart);
-
+            
             if (state.nextPos === -1 || badBracket) {
                 state.tokens.push([
                     state.symbol, state.symbol,

lib/tokenizer/tokenize-quotes.js

@@ -25,5 +25,6 @@ export default function tokenizeQuotes (state) {
         state.line, state.pos - state.offset,
         state.line, state.nextPos - state.offset
     ]);
+    
     state.pos = state.nextPos;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-less",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "LESS parser for PostCSS",
   "keywords": [
     "css",

test/parser/escaping.spec.js

@@ -0,0 +1,53 @@
+// chai uses expressions for validation
+/* eslint no-unused-expressions: 0 */
+
+import {expect} from 'chai';
+import parse from '../../lib/less-parse';
+
+describe('Parser', () => {
+    describe('Escaping', () => {
+        it('parses escaped string', () => {
+            const code = `
+                @testVar: 10px;
+            
+                .test-wrap {
+                    .selector {
+                        height: calc(~"100vh - @{testVar}");
+                    }
+                }
+            `;
+            const root = parse(code);
+
+            expect(root.first.prop).to.eql('@testVar');
+            expect(root.first.value).to.eql('10px');
+            expect(root.last.first.first.prop).to.eql('height');
+            expect(root.last.first.first.value).to.eql('calc(~"100vh - @{testVar}")');
+        });
+
+        it('parses escaping inside nested rules', () => {
+            const code = `
+                .test1 {
+                    .another-test {
+                        prop1: function(~"@{variable}");
+                    }
+                }
+                
+                .test2 {
+                    prop2: function(~\`@{test}\`);
+                }
+                
+                .test3 {
+                    filter: ~"alpha(opacity='@{opacity}')";
+                }
+            `;
+            const root = parse(code);
+
+            expect(root.nodes[0].first.first.prop).to.eql('prop1');
+            expect(root.nodes[0].first.first.value).to.eql('function(~"@{variable}")');
+            expect(root.nodes[1].first.prop).to.eql('prop2');
+            expect(root.nodes[1].first.value).to.eql('function(~`@{test}`)');
+            expect(root.nodes[2].first.prop).to.eql('filter');
+            expect(root.nodes[2].first.value).to.eql('~"alpha(opacity=\'@{opacity}\')"');
+        });
+    });
+});

test/tokenize.spec.js

@@ -98,7 +98,9 @@ describe('#tokenize()', () => {
             ['word', 'content', 1, 11, 1, 17],
             [':', ':', 1, 18],
             ['space', ' '],
-            ['word', '~  "a"', 1, 20, 1, 25],
+            ['word', '~', 1, 20, 1, 20],
+            ['space', '  '],
+            ['string', '"a"', 1, 23, 1, 25],
             [';', ';', 1, 26],
             ['space', ' '],
             ['}', '}', 1, 28]