CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.2.5
+* Fixed `:` support in `@supports` (by Dmitry Semigradsky).
+* Fixed docs (by Christian Oliff).
+
 ## 10.2.4
 * Fixed browser names in `npx autoprefixer --info`.
 

README.md

@@ -1001,8 +1001,8 @@ IE will place `.grid-cell`, `::before` and `::after` in row 1 column 1.
 Modern browsers on the other hand will place `::before` in row 1 column 1,
 `.grid-cell` in row 1 column 2, and `::after` in row 2 column 1.
 
-See this [Code Pen](https://codepen.io/daniel-tonon/pen/gBymVw) to see a visualization
-of the issue. View the Code Pen in both a modern browser and IE to see the difference.
+See this [CodePen](https://codepen.io/daniel-tonon/pen/gBymVw) to see a visualization
+of the issue. View the CodePen in both a modern browser and IE to see the difference.
 
 Note that you can still create `::before` and `::after` elements as long as you manually
 place them outside the explicit grid.

data/prefixes.js

@@ -241,6 +241,7 @@ f(require('caniuse-lite/data/features/css-filter-function'), browsers =>
 
 // Backdrop-filter
 let backdrop = require('caniuse-lite/data/features/css-backdrop-filter')
+
 f(backdrop, { match: /y\sx|y\s#2/ }, browsers =>
   prefix(['backdrop-filter'], {
     feature: 'css-backdrop-filter',
@@ -305,6 +306,7 @@ f(require('caniuse-lite/data/features/user-select-none'), browsers =>
 
 // Flexible Box Layout
 let flexbox = require('caniuse-lite/data/features/flexbox')
+
 f(flexbox, { match: /a\sx/ }, browsers => {
   browsers = browsers.map(i => {
     if (/ie|firefox/.test(i)) {
@@ -685,6 +687,7 @@ f(require('caniuse-lite/data/features/css-deviceadaptation'), browsers =>
 
 // Resolution Media Queries
 let resolut = require('caniuse-lite/data/features/css-media-resolution')
+
 f(resolut, { match: /( x($| )|a #2)/ }, browsers =>
   prefix(['@resolution'], {
     feature: 'css-media-resolution',
@@ -757,6 +760,7 @@ f(logicalProps, { match: /x\s#2/ }, browsers =>
 
 // CSS appearance
 let appearance = require('caniuse-lite/data/features/css-appearance')
+
 f(appearance, { match: /#2|x/ }, browsers =>
   prefix(['appearance'], {
     feature: 'css-appearance',
@@ -810,6 +814,7 @@ f(require('caniuse-lite/data/features/css-image-set'), browsers =>
 
 // Writing Mode
 let writingMode = require('caniuse-lite/data/features/css-writing-mode')
+
 f(writingMode, { match: /a|x/ }, browsers =>
   prefix(['writing-mode'], {
     feature: 'css-writing-mode',
@@ -944,6 +949,7 @@ f(bidi, { match: /y x/ }, browsers =>
 
 // overscroll-behavior selector
 let over = require('caniuse-lite/data/features/css-overscroll-behavior')
+
 f(over, { match: /a #1/ }, browsers =>
   prefix(['overscroll-behavior'], {
     feature: 'css-overscroll-behavior',

lib/hacks/grid-utils.js

@@ -337,7 +337,7 @@ function changeDuplicateAreaSelectors (ruleSelectors, templateSelectors) {
  */
 function selectorsEqual (ruleA, ruleB) {
   return ruleA.selectors.some(sel => {
-    return ruleB.selectors.some(s => s === sel)
+    return ruleB.selectors.includes(sel)
   })
 }
 

lib/supports.js

@@ -223,10 +223,18 @@ class Supports {
     }
 
     nodes = nodes.filter(i => i !== '')
-    if (typeof nodes[0] === 'string' && nodes[0].includes(':')) {
-      return [brackets.stringify(nodes)]
-    }
 
+    if (typeof nodes[0] === 'string') {
+      let firstNode = nodes[0].trim()
+
+      if (
+        firstNode.includes(':') ||
+        firstNode === 'selector' ||
+        firstNode === 'not selector'
+      ) {
+        return [brackets.stringify(nodes)]
+      }
+    }
     return nodes.map(i => this.normalize(i))
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "10.2.4",
+  "version": "10.2.5",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -29,9 +29,9 @@
     "postcss": "^8.1.0"
   },
   "dependencies": {
-    "browserslist": "^4.16.1",
-    "caniuse-lite": "^1.0.30001181",
-    "colorette": "^1.2.1",
+    "browserslist": "^4.16.3",
+    "caniuse-lite": "^1.0.30001196",
+    "colorette": "^1.2.2",
     "fraction.js": "^4.0.13",
     "normalize-range": "^0.1.2",
     "postcss-value-parser": "^4.1.0"
@@ -41,31 +41,31 @@
     "chalk": false
   },
   "devDependencies": {
-    "@logux/eslint-config": "^44.1.0",
-    "@size-limit/preset-small-lib": "4.9.1",
+    "@logux/eslint-config": "^45.1.0",
+    "@size-limit/preset-small-lib": "4.10.0",
     "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "check-dts": "^0.4.1",
-    "clean-publish": "^1.1.8",
-    "eslint": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
+    "check-dts": "^0.4.4",
+    "clean-publish": "^1.1.9",
+    "eslint": "^7.21.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest": "^24.1.5",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-let": "^1.1.0",
-    "eslint-plugin-prettierx": "^0.16.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-prettierx": "^0.17.1",
+    "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-security": "^1.4.0",
-    "eslint-plugin-unicorn": "^27.0.0",
+    "eslint-plugin-unicorn": "^28.0.2",
     "fs-extra": "^9.1.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
-    "postcss": "^8.2.4",
-    "size-limit": "^4.9.1",
-    "ts-jest": "^26.5.0",
-    "typescript": "^4.1.3"
+    "lint-staged": "^10.5.4",
+    "postcss": "^8.2.7",
+    "size-limit": "^4.10.0",
+    "ts-jest": "^26.5.3",
+    "typescript": "^4.2.3"
   },
   "lint-staged": {
     "*.js": "eslint --fix",
@@ -88,7 +88,8 @@
       "security/detect-unsafe-regex": "off",
       "node/no-missing-require": "off",
       "no-unused-expressions": "off",
-      "no-unused-vars": "off"
+      "no-unused-vars": "off",
+      "no-console": "off"
     },
     "overrides": [
       {

test/autoprefixer.test.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import postcss, { AtRule, ChildNode, Container, Rule } from 'postcss'
+import postcss, { AtRule, ChildNode, Container, Rule, Plugin } from 'postcss'
 import path from 'path'
 import fs from 'fs'
 
@@ -84,7 +84,7 @@ let example = autoprefixer({
   overrideBrowserslist: ['defaults']
 })
 
-function prefixer (name: string) {
+function prefixer (name: string): Plugin {
   if (
     name === 'grid' ||
     name === 'grid-gap' ||
@@ -162,16 +162,16 @@ function prefixer (name: string) {
   }
 }
 
-function read (name: string) {
+function read (name: string): string {
   let file = path.join(__dirname, '/cases/' + name + '.css')
   return fs.readFileSync(file).toString()
 }
 
-function universalizer (string: string) {
+function universalizer (string: string): string {
   return string.replace(/\r/g, '')
 }
 
-function check (from: string, instance = prefixer(from)) {
+function check (from: string, instance = prefixer(from)): void {
   let input = read(from)
   let output = read(from + '.out')
   let result = postcss([instance]).process(input)
@@ -487,7 +487,7 @@ const isContainerNode = (node: ChildNode): node is AtRule | Rule => {
 }
 
 it('does not broke AST', () => {
-  function checkParent (node: Container) {
+  function checkParent (node: Container): void {
     node.walk(child => {
       expect(child.parent).toBeDefined()
       if (isContainerNode(child)) checkParent(child)
@@ -535,7 +535,7 @@ it('sets browserslist environment', () => {
 })
 
 it('takes values from other PostCSS plugins', () => {
-  function plugin (root: Container) {
+  function plugin (root: Container): void {
     root.walkDecls(i => {
       i.value = 'calc(0)'
     })
@@ -563,7 +563,7 @@ it('has disabled grid options by default', () => {
 })
 
 it('has different outputs for different grid options', () => {
-  function ap (gridValue: autoprefixer.Options['grid']) {
+  function ap (gridValue: autoprefixer.Options['grid']): Plugin {
     return autoprefixer({
       overrideBrowserslist: ['Edge 12', 'IE 10'],
       grid: gridValue
@@ -590,7 +590,7 @@ it('has different outputs for different grid options', () => {
 })
 
 it('has different outputs for different grid environment variables', () => {
-  function ap (gridValue: autoprefixer.GridValue) {
+  function ap (gridValue: autoprefixer.GridValue): Plugin {
     process.env.AUTOPREFIXER_GRID = gridValue
     return autoprefixer({ overrideBrowserslist: ['Edge 12', 'IE 10'] })
   }

test/supports.test.js

@@ -155,4 +155,18 @@ describe('process()', () => {
     supports.process(rule)
     expect(rule.params).toEqual('(color black) and not ((-moz-a: 1) or (a: 1))')
   })
+
+  it("shouldn't throw errors", () => {
+    let rule = { params: 'not selector(:is(a, b))' }
+    supports.process(rule)
+    expect(rule.params).toEqual('not selector(:is(a, b))')
+  })
+
+  it("shouldn't throw errors (2)", () => {
+    let rule = { params: ' (selector( :nth-child(1n of a, b) )) or (c: b(1)) ' }
+    supports.process(rule)
+    expect(rule.params).toEqual(
+      ' (selector( :nth-child(1n of a, b) )) or ((c: -moz-b(1)) or (c: b(1))) '
+    )
+  })
 })