postcss 8.5.27 → 8.5.29

package/lib/declaration.d.ts

@@ -1,5 +1,5 @@
 import { ContainerWithChildren } from './container.js'
-import Node from './node.js'
+import Node, { NodeProps } from './node.js'
 
 declare namespace Declaration {
   export interface DeclarationRaws extends Record<string, unknown> {

package/lib/list.js

@@ -20,8 +20,21 @@ let list = {
     let inQuote = false
     let prevQuote = ''
     let escape = false
+    let inComment = false
+
+    for (let i = 0; i < string.length; i++) {
+      let letter = string[i]
+
+      if (inComment) {
+        current += letter
+        if (letter === '*' && string[i + 1] === '/') {
+          current += '/'
+          i += 1
+          inComment = false
+        }
+        continue
+      }
 
-    for (let letter of string) {
       if (escape) {
         escape = false
       } else if (letter === '\\') {
@@ -33,6 +46,11 @@ let list = {
       } else if (letter === '"' || letter === "'") {
         inQuote = true
         prevQuote = letter
+      } else if (letter === '/' && string[i + 1] === '*') {
+        current += '/*'
+        i += 1
+        inComment = true
+        continue
       } else if (letter === '(') {
         func += 1
       } else if (letter === ')') {

package/lib/map-generator.js

@@ -75,16 +75,22 @@ class MapGenerator {
         }
       }
     } else if (this.css) {
+      // Single forward pass. Removing every annotation from the whole
+      // string separately would be O(n^2) on many annotations.
       let annotation = '/*# sourceMappingURL='
+      let css = ''
+      let cursor = 0
       let startIndex
-      while ((startIndex = this.css.lastIndexOf(annotation)) !== -1) {
+      while ((startIndex = this.css.indexOf(annotation, cursor)) !== -1) {
         let endIndex = this.css.indexOf('*/', startIndex + annotation.length)
         if (endIndex === -1) break
-        while (startIndex > 0 && this.css[startIndex - 1] === '\n') {
+        while (startIndex > cursor && this.css[startIndex - 1] === '\n') {
           startIndex--
         }
-        this.css = this.css.slice(0, startIndex) + this.css.slice(endIndex + 2)
+        css += this.css.slice(cursor, startIndex)
+        cursor = endIndex + 2
       }
+      if (cursor > 0) this.css = css + this.css.slice(cursor)
     }
   }
 

package/lib/parser.js

@@ -494,6 +494,9 @@ class Parser {
     let token, type
     let length = tokens.length
     let value = ''
+    // Last character of `value`. Reading it from `value` would flatten
+    // the string concatenation on every comment and make parsing O(n^2).
+    let last = ''
     let clean = true
     let next, prev
 
@@ -506,16 +509,18 @@ class Parser {
         prev = tokens[i - 1] ? tokens[i - 1][0] : 'empty'
         next = tokens[i + 1] ? tokens[i + 1][0] : 'empty'
         if (!SAFE_COMMENT_NEIGHBOR[prev] && !SAFE_COMMENT_NEIGHBOR[next]) {
-          if (value.slice(-1) === ',') {
+          if (last === ',') {
             clean = false
           } else {
             value += token[1]
+            last = token[1].slice(-1)
           }
         } else {
           clean = false
         }
       } else {
         value += token[1]
+        last = token[1].slice(-1)
       }
     }
     if (!clean) {

package/lib/processor.js

@@ -7,7 +7,7 @@ let Root = require('./root')
 
 class Processor {
   constructor(plugins = []) {
-    this.version = '8.5.27'
+    this.version = '8.5.29'
     this.plugins = this.normalize(plugins)
   }
 

package/lib/stringifier.js

@@ -1,21 +1,9 @@
 'use strict'
 
-// Escapes sequences that could break out of an HTML <style> context.
-// Uses CSS unicode escaping (\3c = '<') which is valid CSS and parsed
-// correctly by all compliant CSS consumers.
-const STYLE_TAG = /(<)(\/?style\b)/gi
-const COMMENT_OPEN = /(<)(!--)/g
-
 // Characters that end an at-rule name, mirroring RE_AT_END in the tokenizer.
 // Params starting with anything else need a space to stay separate tokens.
 const AT_NAME_END = /[\t\n\f\r "#'()/;[\\\]{}]/
 
-function escapeHTMLInCSS(str) {
-  if (typeof str !== 'string') return str
-  if (!str.includes('<')) return str
-  return str.replace(STYLE_TAG, '\\3c $2').replace(COMMENT_OPEN, '\\3c $2')
-}
-
 const DEFAULT_RAW = {
   after: '\n',
   beforeClose: '\n',
@@ -50,11 +38,12 @@ function atruleStart(str, node) {
 }
 
 // `*--x` is not a custom property: the parser checks the first token, and the
-// `*`/`_` hack prefix moves from `prop` into `before` only after that.
+// `*`/`_` hack prefix moves from `prop` into `before` only after that. A free
+// semicolon in front of the declaration also ends up in `before`.
 function isCustomProperty(node) {
   if (!node.prop.startsWith('--')) return false
   let before = node.raws.before
-  return typeof before === 'undefined' || !/\S$/.test(before)
+  return typeof before === 'undefined' || !/[^\s;]$/.test(before)
 }
 
 function pushBody(str, stack, node) {
@@ -92,17 +81,17 @@ function pushBody(str, stack, node) {
 
 function pushBlock(str, stack, node, start) {
   let between = str.raw(node, 'between', 'beforeOpen')
-  str.builder(escapeHTMLInCSS(start + between) + '{', node, 'start')
+  str.builder(start + between + '{', node, 'start')
 
   let hasNodes = node.nodes && node.nodes.length
   let close = () => {
     let after = hasNodes
       ? str.raw(node, 'after')
       : str.raw(node, 'after', 'emptyBody')
-    if (after) str.builder(escapeHTMLInCSS(after))
+    if (after) str.builder(after)
     str.builder('}', node, 'end')
     if (node.type === 'rule' && node.raws.ownSemicolon) {
-      str.builder(escapeHTMLInCSS(node.raws.ownSemicolon), node, 'end')
+      str.builder(node.raws.ownSemicolon, node, 'end')
     }
   }
 
@@ -125,7 +114,7 @@ class Stringifier {
       this.block(node, start)
     } else {
       let end = (node.raws.between || '') + (semicolon ? ';' : '')
-      this.builder(escapeHTMLInCSS(start + end), node)
+      this.builder(start + end, node)
     }
   }
 
@@ -160,7 +149,7 @@ class Stringifier {
 
   block(node, start) {
     let between = this.raw(node, 'between', 'beforeOpen')
-    this.builder(escapeHTMLInCSS(start + between) + '{', node, 'start')
+    this.builder(start + between + '{', node, 'start')
 
     let after
     if (node.nodes && node.nodes.length) {
@@ -170,7 +159,7 @@ class Stringifier {
       after = this.raw(node, 'after', 'emptyBody')
     }
 
-    if (after) this.builder(escapeHTMLInCSS(after))
+    if (after) this.builder(after)
     this.builder('}', node, 'end')
   }
 
@@ -197,7 +186,7 @@ class Stringifier {
       let child = entry.node
       let before = this.raw(child, 'before')
       if (before) {
-        this.builder(entry.document ? before : escapeHTMLInCSS(before))
+        this.builder(before)
       }
 
       if (expandable && child.type === 'rule') {
@@ -213,7 +202,7 @@ class Stringifier {
   comment(node) {
     let left = this.raw(node, 'left', 'commentLeft')
     let right = this.raw(node, 'right', 'commentRight')
-    this.builder(escapeHTMLInCSS('/*' + left + node.text + right + '*/'), node)
+    this.builder('/*' + left + node.text + right + '*/', node)
   }
 
   decl(node, semicolon) {
@@ -227,7 +216,7 @@ class Stringifier {
     }
 
     if (semicolon) string += ';'
-    this.builder(escapeHTMLInCSS(string), node)
+    this.builder(string, node)
   }
 
   document(node) {
@@ -432,21 +421,20 @@ class Stringifier {
   }
 
   root(node) {
-    if (node.source && node.source.input.hasBOM) {
+    let inDocument = node.parent && node.parent.type === 'document'
+    if (!inDocument && node.source && node.source.input.hasBOM) {
       this.builder('\uFEFF', node, 'start')
     }
     this.body(node)
     if (node.raws.after) {
-      let after = node.raws.after
-      let isDocument = node.parent && node.parent.type === 'document'
-      this.builder(isDocument ? after : escapeHTMLInCSS(after))
+      this.builder(node.raws.after)
     }
   }
 
   rule(node) {
     this.block(node, this.rawValue(node, 'selector'))
     if (node.raws.ownSemicolon) {
-      this.builder(escapeHTMLInCSS(node.raws.ownSemicolon), node, 'end')
+      this.builder(node.raws.ownSemicolon, node, 'end')
     }
   }
 

package/lib/stringify.js

@@ -2,9 +2,67 @@
 
 let Stringifier = require('./stringifier')
 
+const STYLE_TAG = /(<)(\/?style\b)/gi
+const COMMENT_OPEN = /(<)(!--)/g
+
+function escapeHTMLInCSS(str) {
+  if (!str.includes('<')) return str
+  return str.replace(STYLE_TAG, '\\3c $2').replace(COMMENT_OPEN, '\\3c $2')
+}
+
+class SafeStringifier extends Stringifier {
+  escapeHTML(node, print) {
+    let builder = this.builder
+    let chunks, css
+    this.builder = (str, child, type) => {
+      if (chunks) {
+        css += str
+        chunks.push(str, child, type)
+      } else if (str.includes('<')) {
+        // Dangerous sequences start with `<`, so everything before
+        // the first `<` is safe to pass through. The rest is buffered
+        // to escape it as a whole.
+        css = str
+        chunks = [str, child, type]
+      } else {
+        builder(str, child, type)
+      }
+    }
+    print()
+    this.builder = builder
+    if (!chunks) return
+
+    let escaped = escapeHTMLInCSS(css)
+    if (escaped === css) {
+      // Keep the chunks to get a precise source map
+      for (let i = 0; i < chunks.length; i += 3) {
+        builder(chunks[i], chunks[i + 1], chunks[i + 2])
+      }
+    } else {
+      // Escaping happens only on a hack attempt, source map is not important
+      builder(escaped, node)
+    }
+  }
+
+  root(node) {
+    if (node.parent && node.parent.type === 'document') {
+      // Document raws around the Root hold markup and are kept as is since CSS in Document can be marked with <style>
+      this.escapeHTML(node, () => this.body(node))
+      if (node.raws.after) this.builder(node.raws.after)
+    } else {
+      this.escapeHTML(node, () => super.root(node))
+    }
+  }
+}
+
 function stringify(node, builder) {
-  let str = new Stringifier(builder)
-  str.stringify(node)
+  let str = new SafeStringifier(builder)
+  // Root escapes its own output and keeps markup in Document raws
+  if (node.type === 'root' || node.type === 'document') {
+    str.stringify(node)
+  } else {
+    str.escapeHTML(node, () => str.stringify(node))
+  }
 }
 
 module.exports = stringify

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss",
-  "version": "8.5.27",
+  "version": "8.5.29",
   "description": "Tool for transforming styles with JS plugins",
   "keywords": [
     "css",
@@ -78,9 +78,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "nanoid": "^3.3.18",
+    "nanoid": "^3.3.19",
     "picocolors": "^1.1.1",
-    "source-map-js": "^1.2.1"
+    "source-map-js": "^1.2.2"
   },
   "engines": {
     "node": "^10 || ^12 || >=14"