postcss 8.3.11 → 8.4.0

package/lib/container.d.ts

@@ -181,10 +181,10 @@ export default abstract class Container<
    */
   walkRules(
     selectorFilter: string | RegExp,
-    callback: (atRule: Rule, index: number) => false | void
+    callback: (rule: Rule, index: number) => false | void
   ): false | undefined
   walkRules(
-    callback: (atRule: Rule, index: number) => false | void
+    callback: (rule: Rule, index: number) => false | void
   ): false | undefined
 
   /**

package/lib/container.js

@@ -316,7 +316,7 @@ class Container extends Node {
     }
 
     let processed = nodes.map(i => {
-      // istanbul ignore next
+      /* c8 ignore next */
       if (!i[my]) Container.rebuild(i)
       i = i.proxyOf
       if (i.parent) i.parent.removeChild(i)
@@ -410,7 +410,7 @@ Container.registerAtRule = dependant => {
 module.exports = Container
 Container.default = Container
 
-// istanbul ignore next
+/* c8 ignore start */
 Container.rebuild = node => {
   if (node.type === 'atrule') {
     Object.setPrototypeOf(node, AtRule.prototype)
@@ -430,3 +430,4 @@ Container.rebuild = node => {
     })
   }
 }
+/* c8 ignore stop */

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

@@ -1,5 +1,20 @@
 import { FilePosition } from './input.js'
 
+/**
+ * A position that is part of a range.
+ */
+export interface RangePosition {
+  /**
+   * The line number in the input.
+   */
+  line: number
+
+  /**
+   * The column number in the input.
+   */
+  column: number
+}
+
 /**
  * The CSS parser throws this error for broken CSS.
  *
@@ -31,17 +46,21 @@ import { FilePosition } from './input.js'
  */
 export default class CssSyntaxError {
   /**
-   * @param message Error message.
-   * @param line    Source line of the error.
-   * @param column  Source column of the error.
-   * @param source  Source code of the broken file.
-   * @param file    Absolute path to the broken file.
-   * @param plugin  PostCSS plugin name, if error came from plugin.
+   * Instantiates a CSS syntax error. Can be instantiated for a single position
+   * or for a range.
+   * @param message        Error message.
+   * @param lineOrStartPos If for a single position, the line number, or if for
+   *                       a range, the inclusive start position of the error.
+   * @param columnOrEndPos If for a single position, the column number, or if for
+   *                       a range, the exclusive end position of the error.
+   * @param source         Source code of the broken file.
+   * @param file           Absolute path to the broken file.
+   * @param plugin         PostCSS plugin name, if error came from plugin.
    */
   constructor(
     message: string,
-    line?: number,
-    column?: number,
+    lineOrStartPos?: number | RangePosition,
+    columnOrEndPos?: number | RangePosition,
     source?: string,
     file?: string,
     plugin?: string
@@ -121,6 +140,34 @@ export default class CssSyntaxError {
    */
   column?: number
 
+  /**
+   * Source line of the error's end, exclusive. Provided if the error pertains
+   * to a range.
+   *
+   * ```js
+   * error.endLine       //=> 3
+   * error.input.endLine //=> 4
+   * ```
+   *
+   * PostCSS will use the input source map to detect the original location.
+   * If you need the position in the PostCSS input, use `error.input.endLine`.
+   */
+  endLine?: number
+
+  /**
+   * Source column of the error's end, exclusive. Provided if the error pertains
+   * to a range.
+   *
+   * ```js
+   * error.endColumn       //=> 1
+   * error.input.endColumn //=> 4
+   * ```
+   *
+   * PostCSS will use the input source map to detect the original location.
+   * If you need the position in the PostCSS input, use `error.input.endColumn`.
+   */
+  endColumn?: number
+
   /**
    * Source code of the broken file.
    *

package/lib/css-syntax-error.js

@@ -20,8 +20,15 @@ class CssSyntaxError extends Error {
       this.plugin = plugin
     }
     if (typeof line !== 'undefined' && typeof column !== 'undefined') {
-      this.line = line
-      this.column = column
+      if (typeof line === 'number') {
+        this.line = line
+        this.column = column
+      } else {
+        this.line = line.line
+        this.column = line.column
+        this.endLine = column.line
+        this.endColumn = column.column
+      }
     }
 
     this.setMessage()

package/lib/input.d.ts

@@ -13,15 +13,25 @@ export interface FilePosition {
   file?: string
 
   /**
-   * Line in source file.
+   * Line of inclusive start position in source file.
    */
   line: number
 
   /**
-   * Column in source file.
+   * Column of inclusive start position in source file.
    */
   column: number
 
+  /**
+   * Line of exclusive end position in source file.
+   */
+  endLine?: number
+
+  /**
+   * Column of exclusive end position in source file.
+   */
+  endColumn?: number
+
   /**
    * Source code.
    */
@@ -108,18 +118,28 @@ export default class Input {
   /**
    * Reads the input source map and returns a symbol position
    * in the input source (e.g., in a Sass file that was compiled
-   * to CSS before being passed to PostCSS).
+   * to CSS before being passed to PostCSS). Optionally takes an
+   * end position, exclusive.
    *
    * ```js
    * root.source.input.origin(1, 1) //=> { file: 'a.css', line: 3, column: 1 }
+   * root.source.input.origin(1, 1, 1, 4)
+   * //=> { file: 'a.css', line: 3, column: 1, endLine: 3, endColumn: 4 }
    * ```
    *
-   * @param line   Line in input CSS.
-   * @param column Column in input CSS.
+   * @param line      Line for inclusive start position in input CSS.
+   * @param column    Column for inclusive start position in input CSS.
+   * @param endLine   Line for exclusive end position in input CSS.
+   * @param endColumn Column for exclusive end position in input CSS.
    *
    * @return Position in input source.
    */
-  origin(line: number, column: number): FilePosition | false
+  origin(
+    line: number,
+    column: number,
+    endLine?: number,
+    endColumn?: number
+  ): FilePosition | false
 
   /**
    * Converts source offset to line and column.

package/lib/input.js

@@ -103,18 +103,43 @@ class Input {
   }
 
   error(message, line, column, opts = {}) {
-    let result
-    if (!column) {
+    let result, endLine, endColumn
+
+    if (line && typeof line === 'object') {
+      let start = line
+      let end = column
+      if (typeof line.offset === 'number') {
+        let pos = this.fromOffset(start.offset)
+        line = pos.line
+        column = pos.col
+      } else {
+        line = start.line
+        column = start.column
+      }
+      if (typeof end.offset === 'number') {
+        let pos = this.fromOffset(end.offset)
+        endLine = pos.line
+        endColumn = pos.col
+      } else {
+        endLine = end.line
+        endColumn = end.column
+      }
+    } else if (!column) {
       let pos = this.fromOffset(line)
       line = pos.line
       column = pos.col
     }
-    let origin = this.origin(line, column)
+
+    let origin = this.origin(line, column, endLine, endColumn)
     if (origin) {
       result = new CssSyntaxError(
         message,
-        origin.line,
-        origin.column,
+        origin.endLine === undefined
+          ? origin.line
+          : { line: origin.line, column: origin.column },
+        origin.endLine === undefined
+          ? origin.column
+          : { line: origin.endLine, column: origin.endColumn },
         origin.source,
         origin.file,
         opts.plugin
@@ -122,15 +147,15 @@ class Input {
     } else {
       result = new CssSyntaxError(
         message,
-        line,
-        column,
+        endLine === undefined ? line : { line, column },
+        endLine === undefined ? column : { line: endLine, column: endColumn },
         this.css,
         this.file,
         opts.plugin
       )
     }
 
-    result.input = { line, column, source: this.css }
+    result.input = { line, column, endLine, endColumn, source: this.css }
     if (this.file) {
       if (pathToFileURL) {
         result.input.url = pathToFileURL(this.file).toString()
@@ -141,13 +166,18 @@ class Input {
     return result
   }
 
-  origin(line, column) {
+  origin(line, column, endLine, endColumn) {
     if (!this.map) return false
     let consumer = this.map.consumer()
 
     let from = consumer.originalPositionFor({ line, column })
     if (!from.source) return false
 
+    let to
+    if (typeof endLine === 'number') {
+      to = consumer.originalPositionFor({ line: endLine, column: endColumn })
+    }
+
     let fromUrl
 
     if (isAbsolute(from.source)) {
@@ -162,14 +192,16 @@ class Input {
     let result = {
       url: fromUrl.toString(),
       line: from.line,
-      column: from.column
+      column: from.column,
+      endLine: to && to.line,
+      endColumn: to && to.column
     }
 
     if (fromUrl.protocol === 'file:') {
       if (fileURLToPath) {
         result.file = fileURLToPath(fromUrl)
       } else {
-        // istanbul ignore next
+        /* c8 ignore next 2 */
         throw new Error(`file: protocol is not available in this PostCSS build`)
       }
     }

package/lib/lazy-result.d.ts

@@ -89,8 +89,9 @@ export default class LazyResult implements PromiseLike<Result> {
    *
    * This property will only work with synchronous plugins.
    * If the processor contains any asynchronous plugins
-   * it will throw an error. This is why this method is only
-   * for debug purpose, you should always use `LazyResult#then`.
+   * it will throw an error.
+   *
+   * PostCSS runners should always use `LazyResult#then`.
    */
   get css(): string
 
@@ -100,8 +101,9 @@ export default class LazyResult implements PromiseLike<Result> {
    *
    * This property will only work with synchronous plugins.
    * If the processor contains any asynchronous plugins
-   * it will throw an error. This is why this method is only
-   * for debug purpose, you should always use `LazyResult#then`.
+   * it will throw an error.
+   *
+   * PostCSS runners should always use `LazyResult#then`.
    */
   get content(): string
 
@@ -111,8 +113,9 @@ export default class LazyResult implements PromiseLike<Result> {
    *
    * This property will only work with synchronous plugins.
    * If the processor contains any asynchronous plugins
-   * it will throw an error. This is why this method is only
-   * for debug purpose, you should always use `LazyResult#then`.
+   * it will throw an error.
+   *
+   * PostCSS runners should always use `LazyResult#then`.
    */
   get map(): SourceMap
 
@@ -123,8 +126,7 @@ export default class LazyResult implements PromiseLike<Result> {
    * This property will only work with synchronous plugins. If the processor
    * contains any asynchronous plugins it will throw an error.
    *
-   * This is why this method is only for debug purpose,
-   * you should always use `LazyResult#then`.
+   * PostCSS runners should always use `LazyResult#then`.
    */
   get root(): Root
 
@@ -135,8 +137,7 @@ export default class LazyResult implements PromiseLike<Result> {
    * This property will only work with synchronous plugins. If the processor
    * contains any asynchronous plugins it will throw an error.
    *
-   * This is why this method is only for debug purpose,
-   * you should always use `LazyResult#then`.
+   * PostCSS runners should always use `LazyResult#then`.
    */
   get messages(): Message[]
 

package/lib/lazy-result.js

@@ -137,7 +137,7 @@ class LazyResult {
       }
 
       if (root && !root[my]) {
-        // istanbul ignore next
+        /* c8 ignore next 2 */
         Container.rebuild(root)
       }
     }
@@ -364,6 +364,7 @@ class LazyResult {
           let b = runtimeVer.split('.')
 
           if (a[0] !== b[0] || parseInt(a[1]) > parseInt(b[1])) {
+            // eslint-disable-next-line no-console
             console.error(
               'Unknown error from PostCSS plugin. Your current PostCSS ' +
                 'version is ' +
@@ -378,7 +379,8 @@ class LazyResult {
         }
       }
     } catch (err) {
-      // istanbul ignore next
+      /* c8 ignore next 3 */
+      // eslint-disable-next-line no-console
       if (console && console.error) console.error(err)
     }
     return error

package/lib/map-generator.js

@@ -8,11 +8,12 @@ let sourceMapAvailable = Boolean(SourceMapConsumer && SourceMapGenerator)
 let pathAvailable = Boolean(dirname && resolve && relative && sep)
 
 class MapGenerator {
-  constructor(stringify, root, opts) {
+  constructor(stringify, root, opts, cssString) {
     this.stringify = stringify
     this.mapOpts = opts.map || {}
     this.root = root
     this.opts = opts
+    this.css = cssString
   }
 
   isMap() {
@@ -67,12 +68,16 @@ class MapGenerator {
   clearAnnotation() {
     if (this.mapOpts.annotation === false) return
 
-    let node
-    for (let i = this.root.nodes.length - 1; i >= 0; i--) {
-      node = this.root.nodes[i]
-      if (node.type !== 'comment') continue
-      if (node.text.indexOf('# sourceMappingURL=') === 0) {
-        this.root.removeChild(i)
+    if (!this.root && typeof this.css === 'string') {
+      this.css = this.css.replace(/(\n)?\/\*#[\S\s]*?\*\/$/gm, '')
+    } else {
+      let node
+      for (let i = this.root.nodes.length - 1; i >= 0; i--) {
+        node = this.root.nodes[i]
+        if (node.type !== 'comment') continue
+        if (node.text.indexOf('# sourceMappingURL=') === 0) {
+          this.root.removeChild(i)
+        }
       }
     }
   }
@@ -129,7 +134,7 @@ class MapGenerator {
     if (Buffer) {
       return Buffer.from(str).toString('base64')
     } else {
-      // istanbul ignore next
+      /* c8 ignore next 2 */
       return window.btoa(unescape(encodeURIComponent(str)))
     }
   }
@@ -147,7 +152,7 @@ class MapGenerator {
     } else {
       content = this.outputFile() + '.map'
     }
-
+    /* c8 ignore next 6 */
     let eol = '\n'
     if (this.css.includes('\r\n')) eol = '\r\n'
 
@@ -176,6 +181,32 @@ class MapGenerator {
     return [this.css, this.map]
   }
 
+  generateSimpleMap() {
+    this.map = new SourceMapGenerator({ file: this.outputFile() })
+    this.previousMaps = []
+
+    let source
+    if (this.opts.from) {
+      source = this.toUrl(this.opts.from)
+    } else {
+      source = '<no source>'
+    }
+
+    this.map.addMapping({
+      source,
+      generated: { line: 1, column: 0 },
+      original: { line: 1, column: 0 }
+    })
+
+    if (this.isAnnotation()) this.addAnnotation()
+
+    if (this.isInline()) {
+      return [this.css]
+    }
+
+    return [this.cssString, this.map]
+  }
+
   path(file) {
     if (file.indexOf('<') === 0) return file
     if (/^\w+:\/\//.test(file)) return file
@@ -193,7 +224,7 @@ class MapGenerator {
 
   toUrl(path) {
     if (sep === '\\') {
-      // istanbul ignore next
+      /* c8 ignore next 2 */
       path = path.replace(/\\/g, '/')
     }
     return encodeURI(path).replace(/[#?]/g, encodeURIComponent)
@@ -206,7 +237,7 @@ class MapGenerator {
       if (pathToFileURL) {
         return pathToFileURL(node.source.input.from).toString()
       } else {
-        // istanbul ignore next
+        /* c8 ignore next 4 */
         throw new Error(
           '`map.absolute` option is not available in this PostCSS build'
         )
@@ -236,6 +267,7 @@ class MapGenerator {
 
       if (node && type !== 'end') {
         mapping.generated.line = line
+        /* c8 ignore next */
         mapping.generated.column = column - 1
         if (node.source && node.source.start) {
           mapping.source = this.sourcePath(node)
@@ -243,6 +275,7 @@ class MapGenerator {
           mapping.original.column = node.source.start.column - 1
           this.map.addMapping(mapping)
         } else {
+          /* c8 ignore next 8 */
           mapping.source = noSource
           mapping.original.line = 1
           mapping.original.column = 0
@@ -285,6 +318,10 @@ class MapGenerator {
   generate() {
     this.clearAnnotation()
 
+    if (pathAvailable && sourceMapAvailable && this.isMap() && !this.root) {
+      return this.generateSimpleMap()
+    }
+
     if (pathAvailable && sourceMapAvailable && this.isMap()) {
       return this.generateMap()
     }

package/lib/no-work-result.d.ts

@@ -0,0 +1,37 @@
+import Result, { Message, ResultOptions } from './result.js'
+import { SourceMap } from './postcss.js'
+import Processor from './processor.js'
+import Warning from './warning.js'
+import Root from './root.js'
+import LazyResult from './lazy-result.js'
+
+/**
+ * A Promise proxy for the result of PostCSS transformations.
+ * This lazy result instance doesn't parse css unless `NoWorkResult#root` or `Result#root`
+ * are accessed. See the example below for details.
+ * A `NoWork` instance is returned by `Processor#process` ONLY when no plugins defined.
+ *
+ * ```js
+ * const noWorkResult = postcss().process(css) // No plugins are defined.
+ *                                             // CSS is not parsed
+ * let root = noWorkResult.root // now css is parsed because we accessed the root
+ * ```
+ */
+export default class NoWorkResult implements LazyResult {
+  then: Promise<Result>['then']
+  catch: Promise<Result>['catch']
+  finally: Promise<Result>['finally']
+  constructor(processor: Processor, css: string, opts: ResultOptions)
+  get [Symbol.toStringTag](): string
+  get processor(): Processor
+  get opts(): ResultOptions
+  get css(): string
+  get content(): string
+  get map(): SourceMap
+  get root(): Root
+  get messages(): Message[]
+  warnings(): Warning[]
+  toString(): string
+  sync(): Result
+  async(): Promise<Result>
+}

package/lib/no-work-result.js

@@ -0,0 +1,131 @@
+'use strict'
+
+let MapGenerator = require('./map-generator')
+let stringify = require('./stringify')
+let warnOnce = require('./warn-once')
+let parse = require('./parse')
+const Result = require('./result')
+
+class NoWorkResult {
+  constructor(processor, css, opts) {
+    this.stringified = false
+
+    this._processor = processor
+    this._css = css
+    this._opts = opts
+    this._map = undefined
+    let root
+
+    let str = stringify
+    this.result = new Result(this._processor, root, this._opts)
+    this.result.css = css
+
+    let self = this
+    Object.defineProperty(this.result, 'root', {
+      get() {
+        return self.root
+      }
+    })
+
+    if (this._opts.map) {
+      let map = new MapGenerator(str, root, this._opts, css)
+      let [generatedCSS, generatedMap] = map.generate()
+      if (generatedCSS) {
+        this.result.css = generatedCSS
+      }
+      if (generatedMap) {
+        this.result.map = generatedMap
+      }
+    }
+  }
+
+  get [Symbol.toStringTag]() {
+    return 'NoWorkResult'
+  }
+
+  get processor() {
+    return this.result.processor
+  }
+
+  get opts() {
+    return this.result.opts
+  }
+
+  get css() {
+    return this.result.css
+  }
+
+  get content() {
+    return this.result.css
+  }
+
+  get map() {
+    return this.result.map
+  }
+
+  get root() {
+    if (this._root) {
+      return this._root
+    }
+
+    let root
+    let parser = parse
+
+    try {
+      root = parser(this._css, this._opts)
+    } catch (error) {
+      this.error = error
+    }
+
+    this._root = root
+
+    return root
+  }
+
+  get messages() {
+    return []
+  }
+
+  warnings() {
+    return []
+  }
+
+  toString() {
+    return this._css
+  }
+
+  then(onFulfilled, onRejected) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!('from' in this._opts)) {
+        warnOnce(
+          'Without `from` option PostCSS could generate wrong source map ' +
+            'and will not find Browserslist config. Set it to CSS file path ' +
+            'or to `undefined` to prevent this warning.'
+        )
+      }
+    }
+
+    return this.async().then(onFulfilled, onRejected)
+  }
+
+  catch(onRejected) {
+    return this.async().catch(onRejected)
+  }
+
+  finally(onFinally) {
+    return this.async().then(onFinally, onFinally)
+  }
+
+  async() {
+    if (this.error) return Promise.reject(this.error)
+    return Promise.resolve(this.result)
+  }
+
+  sync() {
+    if (this.error) throw this.error
+    return this.result
+  }
+}
+
+module.exports = NoWorkResult
+NoWorkResult.default = NoWorkResult