postcss 8.3.3 → 8.3.7

package/README.md

@@ -89,8 +89,7 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 
 ### Better CSS Readability
 
-* [`precss`] contains plugins for Sass-like features, like variables, nesting,
-  and mixins.
+* [`postcss-nested`] unwraps nested rules the way Sass does.
 * [`postcss-sorting`] sorts the content of rules and at-rules.
 * [`postcss-utilities`] includes the most commonly used shortcuts and helpers.
 * [`short`] adds and extends numerous shorthand properties.
@@ -146,7 +145,7 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 [`stylelint`]:                  https://github.com/stylelint/stylelint
 [`stylefmt`]:                   https://github.com/morishitter/stylefmt
 [`cssnano`]:                    https://cssnano.co/
-[`precss`]:                     https://github.com/jonathantneal/precss
+[`postcss-nested`]:             https://github.com/postcss/postcss-nested
 [`doiuse`]:                     https://github.com/anandthakker/doiuse
 [`rtlcss`]:                     https://github.com/MohammadYounes/rtlcss
 [`short`]:                      https://github.com/jonathantneal/postcss-short
@@ -310,8 +309,8 @@ Then create `postcss.config.js`:
 ```js
 module.exports = {
   plugins: [
-    require('precss'),
-    require('autoprefixer')
+    require('autoprefixer'),
+    require('postcss-nested')
   ]
 }
 ```
@@ -330,7 +329,7 @@ gulp.task('css', () => {
 
   return gulp.src('src/**/*.css')
     .pipe( sourcemaps.init() )
-    .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
+    .pipe( postcss([ require('autoprefixer'), require('postcss-nested') ]) )
     .pipe( sourcemaps.write('.') )
     .pipe( gulp.dest('build/') )
 })
@@ -410,11 +409,11 @@ For other environments, you can use the JS API:
 ```js
 const autoprefixer = require('autoprefixer')
 const postcss = require('postcss')
-const precss = require('precss')
+const postcssNested = require('postcss-nested')
 const fs = require('fs')
 
 fs.readFile('src/app.css', (err, css) => {
-  postcss([precss, autoprefixer])
+  postcss([autoprefixer, postcssNested])
     .process(css, { from: 'src/app.css', to: 'dest/app.css' })
     .then(result => {
       fs.writeFile('dest/app.css', result.css, () => true)

package/lib/container.js

@@ -422,6 +422,8 @@ Container.rebuild = node => {
     Object.setPrototypeOf(node, Comment.prototype)
   }
 
+  node[my] = true
+
   if (node.nodes) {
     node.nodes.forEach(child => {
       Container.rebuild(child)

package/lib/css-syntax-error.js

@@ -1,6 +1,6 @@
 'use strict'
 
-let { red, bold, gray, options: colorette } = require('colorette')
+let { red, bold, gray, isColorSupported } = require('nanocolors')
 
 let terminalHighlight = require('./terminal-highlight')
 
@@ -44,7 +44,7 @@ class CssSyntaxError extends Error {
     if (!this.source) return ''
 
     let css = this.source
-    if (color == null) color = colorette.enabled
+    if (color == null) color = isColorSupported
     if (terminalHighlight) {
       if (color) css = terminalHighlight(css)
     }

package/lib/lazy-result.js

@@ -136,7 +136,10 @@ class LazyResult {
         this.error = error
       }
 
-      if (root && !root[my]) Container.rebuild(root)
+      if (root && !root[my]) {
+        // istanbul ignore next
+        Container.rebuild(root)
+      }
     }
 
     this.result = new Result(processor, root, opts)

package/lib/node.js

@@ -1,8 +1,8 @@
 'use strict'
 
+let { isClean, my } = require('./symbols')
 let CssSyntaxError = require('./css-syntax-error')
 let Stringifier = require('./stringifier')
-let { isClean } = require('./symbols')
 let stringify = require('./stringify')
 
 function cloneNode(obj, parent) {
@@ -36,6 +36,7 @@ class Node {
   constructor(defaults = {}) {
     this.raws = {}
     this[isClean] = false
+    this[my] = true
 
     for (let name in defaults) {
       if (name === 'nodes') {

package/lib/parser.js

@@ -552,7 +552,13 @@ class Parser {
         if (founded === 2) break
       }
     }
-    throw this.input.error('Missed semicolon', token[2])
+    // If the token is a word, e.g. `!important`, `red` or any other valid property's value.
+    // Then we need to return the colon after that word token. [3] is the "end" colon of that word.
+    // And because we need it after that one we do +1 to get the next one.
+    throw this.input.error(
+      'Missed semicolon',
+      token[0] === 'word' ? token[3] + 1 : token[2]
+    )
   }
 }
 

package/lib/processor.js

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

package/lib/terminal-highlight.js

@@ -1,6 +1,6 @@
 'use strict'
 
-let { cyan, gray, green, yellow, magenta } = require('colorette')
+let { cyan, gray, green, yellow, magenta } = require('nanocolors')
 
 let tokenizer = require('./tokenize')
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss",
-  "version": "8.3.3",
+  "version": "8.3.7",
   "description": "Tool for transforming styles with JS plugins",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -60,15 +60,17 @@
   "license": "MIT",
   "homepage": "https://postcss.org/",
   "repository": "postcss/postcss",
+  "bugs": {
+    "url": "https://github.com/postcss/postcss/issues"
+  },
   "dependencies": {
-    "colorette": "^1.2.2",
-    "nanoid": "^3.1.23",
+    "nanocolors": "^0.1.5",
+    "nanoid": "^3.1.25",
     "source-map-js": "^0.6.2"
   },
   "browser": {
     "./lib/terminal-highlight": false,
     "source-map-js": false,
-    "colorette": false,
     "path": false,
     "url": false,
     "fs": false