postcss 8.1.14 → 8.2.3

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 8.2.3
+* FIx `JSON.stringify(Node[])` support (by Niklas Mischkulnig).
+
+## 8.2.2
+* Fixed CSS-in-JS support (by James Garbutt).
+* Fixed plugin types (by Ludovico Fischer).
+* Fixed `Result#warn()` types.
+
+## 8.2.1
+* Fixed `Node#toJSON()` and `postcss.fromJSON()` (by Niklas Mischkulnig).
+
+## 8.2 “Prince Orobas”
+* Added `Node#toJSON()` and `postcss.fromJSON()` (by Niklas Mischkulnig).
+
 ## 8.1.14
 * Fixed parser performance regression.
 

package/README.md

@@ -100,7 +100,8 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 * [`font-magician`] generates all the `@font-face` rules needed in CSS.
 * [`postcss-inline-svg`] allows you to inline SVG and customize its styles.
 * [`postcss-write-svg`] allows you to write simple SVG directly in your CSS.
-
+* [`webp-in-css`] to use WebP image format in CSS background.
+* [`avif-in-css`] to use AVIF image format in CSS background.
 
 ### Linters
 
@@ -136,6 +137,8 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 [`postcss-rtl`]:                https://github.com/vkalinichev/postcss-rtl
 [`postcss-use`]:                https://github.com/postcss/postcss-use
 [`css-modules`]:                https://github.com/css-modules/css-modules
+[`webp-in-css`]:                https://github.com/ai/webp-in-css
+[`avif-in-css`]:                https://github.com/nucliweb/avif-in-css
 [`colorguard`]:                 https://github.com/SlexAxton/css-colorguard
 [`stylelint`]:                  https://github.com/stylelint/stylelint
 [`stylefmt`]:                   https://github.com/morishitter/stylefmt
@@ -146,7 +149,6 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 [`short`]:                      https://github.com/jonathantneal/postcss-short
 [`lost`]:                       https://github.com/peterramsing/lost
 
-
 ## Syntaxes
 
 PostCSS can transform styles in any syntax, not just CSS.

package/lib/container.d.ts

@@ -91,8 +91,9 @@ export default abstract class Container extends Node {
    * @param callback Iterator receives each node and index.
    * @return Returns `false` if iteration was broke.
    */
-  each (callback: (node: ChildNode, index: number) => void): void
-  each (callback: (node: ChildNode, index: number) => false): false
+  each (
+    callback: (node: ChildNode, index: number) => false | void
+  ): false | undefined
 
   /**
    * Traverses the container’s descendant nodes, calling callback
@@ -113,8 +114,9 @@ export default abstract class Container extends Node {
    * @param callback Iterator receives each node and index.
    * @return  Returns `false` if iteration was broke.
    */
-  walk (callback: (node: ChildNode, index: number) => void): void
-  walk (callback: (node: ChildNode, index: number) => false): false
+  walk (
+    callback: (node: ChildNode, index: number) => false | void
+  ): false | undefined
 
   /**
    * Traverses the container’s descendant nodes, calling callback
@@ -147,14 +149,11 @@ export default abstract class Container extends Node {
    */
   walkDecls (
     propFilter: string | RegExp,
-    callback: (decl: Declaration, index: number) => void
-  ): void
-  walkDecls (callback: (decl: Declaration, index: number) => void): void
+    callback: (decl: Declaration, index: number) => false | void
+  ): false | undefined
   walkDecls (
-    propFilter: string | RegExp,
-    callback: (decl: Declaration, index: number) => false
-  ): false
-  walkDecls (callback: (decl: Declaration, index: number) => false): false
+    callback: (decl: Declaration, index: number) => false | void
+  ): false | undefined
 
   /**
    * Traverses the container’s descendant nodes, calling callback
@@ -180,14 +179,11 @@ export default abstract class Container extends Node {
    */
   walkRules (
     selectorFilter: string | RegExp,
-    callback: (atRule: Rule, index: number) => void
-  ): void
-  walkRules (callback: (atRule: Rule, index: number) => void): void
+    callback: (atRule: Rule, index: number) => false | void
+  ): false | undefined
   walkRules (
-    selectorFilter: string | RegExp,
-    callback: (atRule: Rule, index: number) => false
-  ): false
-  walkRules (callback: (atRule: Rule, index: number) => false): false
+    callback: (atRule: Rule, index: number) => false | void
+  ): false | undefined
 
   /**
    * Traverses the container’s descendant nodes, calling callback
@@ -220,14 +216,11 @@ export default abstract class Container extends Node {
    */
   walkAtRules (
     nameFilter: string | RegExp,
-    callback: (atRule: AtRule, index: number) => void
-  ): void
-  walkAtRules (callback: (atRule: AtRule, index: number) => void): void
+    callback: (atRule: AtRule, index: number) => false | void
+  ): false | undefined
   walkAtRules (
-    nameFilter: string | RegExp,
-    callback: (atRule: AtRule, index: number) => false
-  ): false
-  walkAtRules (callback: (atRule: AtRule, index: number) => false): false
+    callback: (atRule: AtRule, index: number) => false | void
+  ): false | undefined
 
   /**
    * Traverses the container’s descendant nodes, calling callback
@@ -246,10 +239,12 @@ export default abstract class Container extends Node {
    * @return Returns `false` if iteration was broke.
    */
 
-  walkComments (callback: (comment: Comment, indexed: number) => void): void
   walkComments (
-    callback: (comment: Comment, indexed: number) => boolean
-  ): boolean
+    callback: (comment: Comment, indexed: number) => false | void
+  ): false | undefined
+  walkComments (
+    callback: (comment: Comment, indexed: number) => false | void
+  ): false | undefined
 
   /**
    * Inserts new nodes to the end of the container.

package/lib/css-syntax-error.d.ts

@@ -1,4 +1,4 @@
-import Input, { FilePosition } from './input.js'
+import { FilePosition } from './input.js'
 
 /**
  * The CSS parser throws this error for broken CSS.

package/lib/fromJSON.d.ts

@@ -0,0 +1,5 @@
+import { JSONHydrator } from './postcss.js'
+
+declare const fromJSON: JSONHydrator
+
+export default fromJSON

package/lib/fromJSON.js

@@ -0,0 +1,54 @@
+'use strict'
+
+let Declaration = require('./declaration')
+let PreviousMap = require('./previous-map')
+let Comment = require('./comment')
+let AtRule = require('./at-rule')
+let Input = require('./input')
+let Root = require('./root')
+let Rule = require('./rule')
+
+function fromJSON (json, inputs) {
+  if (Array.isArray(json)) return json.map(n => fromJSON(n))
+
+  let { inputs: ownInputs, ...defaults } = json
+  if (ownInputs) {
+    inputs = []
+    for (let input of ownInputs) {
+      let inputHydrated = { ...input, __proto__: Input.prototype }
+      if (inputHydrated.map) {
+        inputHydrated.map = {
+          ...inputHydrated.map,
+          __proto__: PreviousMap.prototype
+        }
+      }
+      inputs.push(inputHydrated)
+    }
+  }
+  if (defaults.nodes) {
+    defaults.nodes = json.nodes.map(n => fromJSON(n, inputs))
+  }
+  if (defaults.source) {
+    let { inputId, ...source } = defaults.source
+    defaults.source = source
+    if (inputId != null) {
+      defaults.source.input = inputs[inputId]
+    }
+  }
+  if (defaults.type === 'root') {
+    return new Root(defaults)
+  } else if (defaults.type === 'decl') {
+    return new Declaration(defaults)
+  } else if (defaults.type === 'rule') {
+    return new Rule(defaults)
+  } else if (defaults.type === 'comment') {
+    return new Comment(defaults)
+  } else if (defaults.type === 'atrule') {
+    return new AtRule(defaults)
+  } else {
+    throw new Error('Unknown node type: ' + json.type)
+  }
+}
+
+module.exports = fromJSON
+fromJSON.default = fromJSON

package/lib/input.js

@@ -8,6 +8,8 @@ let terminalHighlight = require('./terminal-highlight')
 let CssSyntaxError = require('./css-syntax-error')
 let PreviousMap = require('./previous-map')
 
+let fromOffsetCache = Symbol('fromOffset cache')
+
 class Input {
   constructor (css, opts = {}) {
     if (
@@ -49,42 +51,45 @@ class Input {
   }
 
   fromOffset (offset) {
-    let lines = this.css.split('\n')
-    let lineToIndex = new Array(lines.length)
-    let prevIndex = 0
+    let lastLine, lineToIndex
+    if (!this[fromOffsetCache]) {
+      let lines = this.css.split('\n')
+      lineToIndex = new Array(lines.length)
+      let prevIndex = 0
+
+      for (let i = 0, l = lines.length; i < l; i++) {
+        lineToIndex[i] = prevIndex
+        prevIndex += lines[i].length + 1
+      }
 
-    for (let i = 0, l = lines.length; i < l; i++) {
-      lineToIndex[i] = prevIndex
-      prevIndex += lines[i].length + 1
+      this[fromOffsetCache] = lineToIndex
+    } else {
+      lineToIndex = this[fromOffsetCache]
     }
+    lastLine = lineToIndex[lineToIndex.length - 1]
 
-    let lastLine = lineToIndex[lineToIndex.length - 1]
-
-    this.fromOffset = index => {
-      let min = 0
-      if (index >= lastLine) {
-        min = lineToIndex.length - 1
-      } else {
-        let max = lineToIndex.length - 2
-        let mid
-        while (min < max) {
-          mid = min + ((max - min) >> 1)
-          if (index < lineToIndex[mid]) {
-            max = mid - 1
-          } else if (index >= lineToIndex[mid + 1]) {
-            min = mid + 1
-          } else {
-            min = mid
-            break
-          }
+    let min = 0
+    if (offset >= lastLine) {
+      min = lineToIndex.length - 1
+    } else {
+      let max = lineToIndex.length - 2
+      let mid
+      while (min < max) {
+        mid = min + ((max - min) >> 1)
+        if (offset < lineToIndex[mid]) {
+          max = mid - 1
+        } else if (offset >= lineToIndex[mid + 1]) {
+          min = mid + 1
+        } else {
+          min = mid
+          break
         }
       }
-      return {
-        line: min + 1,
-        col: index - lineToIndex[min] + 1
-      }
     }
-    return this.fromOffset(offset)
+    return {
+      line: min + 1,
+      col: offset - lineToIndex[min] + 1
+    }
   }
 
   error (message, line, column, opts = {}) {
@@ -168,6 +173,22 @@ class Input {
   get from () {
     return this.file || this.id
   }
+
+  toJSON () {
+    let json = {}
+    for (let name of ['hasBOM', 'css', 'file', 'id']) {
+      if (this[name] != null) {
+        json[name] = this[name]
+      }
+    }
+    if (this.map) {
+      json.map = { ...this.map }
+      if (json.map.consumerCache) {
+        json.map.consumerCache = undefined
+      }
+    }
+    return json
+  }
 }
 
 module.exports = Input

package/lib/node.js

@@ -166,8 +166,11 @@ class Node {
     if (!keepBetween) delete this.raws.between
   }
 
-  toJSON () {
+  toJSON (_, inputs) {
     let fixed = {}
+    let emitInputs = inputs == null
+    inputs = inputs || new Map()
+    let inputsNextIndex = 0
 
     for (let name in this) {
       if (!Object.prototype.hasOwnProperty.call(this, name)) {
@@ -180,18 +183,34 @@ class Node {
       if (Array.isArray(value)) {
         fixed[name] = value.map(i => {
           if (typeof i === 'object' && i.toJSON) {
-            return i.toJSON()
+            return i.toJSON(null, inputs)
           } else {
             return i
           }
         })
       } else if (typeof value === 'object' && value.toJSON) {
-        fixed[name] = value.toJSON()
+        fixed[name] = value.toJSON(null, inputs)
+      } else if (name === 'source') {
+        let inputId = inputs.get(value.input)
+        if (inputId == null) {
+          inputId = inputsNextIndex
+          inputs.set(value.input, inputsNextIndex)
+          inputsNextIndex++
+        }
+        fixed[name] = {
+          inputId,
+          start: value.start,
+          end: value.end
+        }
       } else {
         fixed[name] = value
       }
     }
 
+    if (emitInputs) {
+      fixed.inputs = [...inputs.keys()].map(input => input.toJSON())
+    }
+
     return fixed
   }
 

package/lib/postcss.d.ts

@@ -170,7 +170,7 @@ export interface Plugin extends Processors {
 }
 
 export interface PluginCreator<PluginOptions> {
-  (opts?: PluginOptions): Plugin
+  (opts?: PluginOptions): Plugin | Processor
   postcss: true
 }
 
@@ -213,6 +213,11 @@ export interface Stringifier {
   (node: AnyNode, builder: Builder): void
 }
 
+export interface JSONHydrator {
+  (data: object[]): Node[]
+  (data: object): Node
+}
+
 export interface Syntax {
   /**
    * Function to generate AST by string.
@@ -352,6 +357,17 @@ export interface Postcss {
    */
   parse: Parser
 
+  /**
+   * Rehydrate a JSON AST (from `Node#toJSON`) back into the AST classes.
+   *
+   * ```js
+   * const json = root.toJSON()
+   * // save to file, send by network, etc
+   * const root2  = postcss.fromJSON(json)
+   * ```
+   */
+  fromJSON: JSONHydrator
+
   /**
    * Contains the `list` module.
    */
@@ -412,6 +428,7 @@ export interface Postcss {
 
 export const stringify: Stringifier
 export const parse: Parser
+export const fromJSON: JSONHydrator
 
 export const comment: Postcss['comment']
 export const atRule: Postcss['atRule']

package/lib/postcss.js

@@ -6,6 +6,7 @@ let LazyResult = require('./lazy-result')
 let Container = require('./container')
 let Processor = require('./processor')
 let stringify = require('./stringify')
+let fromJSON = require('./fromJSON')
 let Warning = require('./warning')
 let Comment = require('./comment')
 let AtRule = require('./at-rule')
@@ -62,6 +63,7 @@ postcss.plugin = function plugin (name, initializer) {
 
 postcss.stringify = stringify
 postcss.parse = parse
+postcss.fromJSON = fromJSON
 postcss.list = list
 
 postcss.comment = defaults => new Comment(defaults)

package/lib/postcss.mjs

@@ -3,6 +3,7 @@ import postcss from './postcss.js'
 export default postcss
 
 export const stringify = postcss.stringify
+export const fromJSON = postcss.fromJSON
 export const plugin = postcss.plugin
 export const parse = postcss.parse
 export const list = postcss.list

package/lib/processor.js

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

package/lib/result.d.ts

@@ -177,7 +177,7 @@ export default class Result {
    * @param opts Warning options.
    * @return Created warning.
    */
-  warn (message: string, options?: WarningOptions): void
+  warn (message: string, options?: WarningOptions): Warning
 
   /**
    * Returns warnings from plugins. Filters `Warning` instances

package/lib/root.d.ts

@@ -1,11 +1,6 @@
 import Container, { ContainerProps } from './container.js'
 import { ProcessOptions } from './postcss.js'
-import { ChildNode } from './node.js'
-import Declaration from './declaration.js'
-import Comment from './comment.js'
-import AtRule from './at-rule.js'
 import Result from './result.js'
-import Rule from './rule.js'
 
 interface RootRaws {
   /**

package/lib/stringifier.js

@@ -25,11 +25,19 @@ class Stringifier {
   }
 
   stringify (node, semicolon) {
+    /* istanbul ignore if */
+    if (!this[node.type]) {
+      throw new Error(
+        'Unknown AST node type ' +
+          node.type +
+          '. ' +
+          'Maybe you need to change PostCSS stringifier.'
+      )
+    }
     this[node.type](node, semicolon)
   }
 
   root (node) {
-    this.root = node
     this.body(node)
     if (node.raws.after) this.builder(node.raws.after)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss",
-  "version": "8.1.14",
+  "version": "8.2.3",
   "description": "Tool for transforming styles with JS plugins",
   "engines": {
     "node": "^10 || ^12 || >=14"