feat: upgrade to PostCSS 8

.github/workflows/ci.yaml

@@ -0,0 +1,21 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: master
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x, 16.x, 17.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test

.gitignore

@@ -1,10 +1,11 @@
 node_modules
 package-lock.json
+yarn.lock
 .*
 !.appveyor.yml
 !.editorconfig
 !.gitignore
 !.tape.js
-!.travis.yml
+!.github
 *.log*
 *.result.css

.tape.js

@@ -1,7 +1,5 @@
 module.exports = {
-	'postcss-media-fn': {
-		'basic': {
-			message: 'supports basic usage'
-		}
+	'basic': {
+		message: 'supports basic usage'
 	}
 };

README.md

@@ -51,7 +51,7 @@ h1 {
 Add [Media()] to your build tool:
 
 ```bash
-npm install postcss-media-fn --save-dev
+npm install postcss postcss-media-fn --save-dev
 ```
 
 #### Node

index.js

@@ -1,22 +1,30 @@
-// tooling
-const postcss = require('postcss');
-const parser = require('postcss-value-parser');
+const postcss = require("postcss");
+const {parse} = require('postcss-values-parser');
 
 // local tooling
-const isLikelyMediaFn = (node) => node.type === 'decl' && (/media\([^\)]+\)/).test(node.value);
-const isMediaFn = (node) => node.type === 'function' && node.value === 'media';
+const mediaFnRegExp = /media\([^)]+\)/i;
+const isMediaFn = (node) => node.name === 'media';
 const isResponsiveValue = (value) => value.length > 1;
 const isNonResponsiveValue = (value) => value.length === 1;
 
-// plugin
-module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
-	css.walkRules(
-		(rule) => {
+/**
+ * Use `media()` to assign responsive values.
+ * @returns {import('postcss').Plugin}
+ */
+module.exports = function creator() {
+	return {
+		postcssPlugin: 'postcss-media-fn',
+		Rule(rule) {
 			const newAtRules = [];
 
-			Array.prototype.filter.call(rule.nodes, isLikelyMediaFn).forEach(
+			rule.walkDecls(
 				(decl) => {
-					const newValue = parser(decl.value).walk(
+					if (!mediaFnRegExp.test(decl.value)) {
+						return;
+					}
+
+					const valueAST = parse(decl.value);
+					valueAST.walkFuncs(
 						(node) => {
 							if (isMediaFn(node)) {
 								// all values
@@ -28,9 +36,8 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 											values.push([]);
 										} else {
 											// otherwise, assign the stringified node to the last values sub-group
-											values[values.length - 1].push(parser.stringify(childNode));
+											values[values.length - 1].push(childNode.raws.before + childNode.toString() + childNode.raws.after);
 										}
-
 										return values;
 									},
 									[[]]
@@ -45,11 +52,14 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 								// for each responsive value
 								responsiveValues.forEach(
 									(value) => {
+										const prop = value.pop().trim()
+										const media = value.join('').trim()
+
 										// add new @media at-rule, rule, and declaration to list
 										newAtRules.push(
 											postcss.atRule({
 												name: 'media',
-												params: value.shift().trim(),
+												params: media,
 												source: decl.source
 											}).append(
 												rule.clone({
@@ -58,7 +68,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 													}
 												}).removeAll().append(
 													decl.clone({
-														value: value.join('').trim(),
+														value: prop,
 														raws: {}
 													})
 												)
@@ -71,15 +81,16 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 								if (nonResponsiveValues.length) {
 									// re-assign the first non-responsive value to the declaration
 									node.type = 'word';
-									node.value = nonResponsiveValues.shift().join('');
+									node.value = nonResponsiveValues.join('');
 								} else {
 									// otherwise, remove the node
-									node.type = 'word';
-									node.value = '';
+									node.remove()
 								}
 							}
 						}
-					).toString();
+					);
+
+					const newValue = valueAST.toString()
 
 					// if the value has changed
 					if (decl.value !== newValue) {
@@ -89,7 +100,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 							decl.remove();
 						} else {
 							// otherwise, update the declaration value
-							decl.value = newValue;
+							decl.value = newValue.trim();
 						}
 					}
 				}
@@ -103,5 +114,7 @@ module.exports = postcss.plugin('postcss-media-fn', () => (css) => {
 				}
 			}
 		}
-	);
-});
+	}
+}
+
+module.exports.postcss = true;

package.json

@@ -4,38 +4,42 @@
   "description": "Use `media()` to assign responsive values",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
-  "repository": "jonathantneal/postcss-media-fn",
-  "homepage": "https://github.com/jonathantneal/postcss-media-fn#readme",
-  "bugs": "https://github.com/jonathantneal/postcss-media-fn/issues",
+  "repository": "csstools/postcss-media-fn",
+  "homepage": "https://github.com/csstools/postcss-media-fn#readme",
+  "bugs": "https://github.com/csstools/postcss-media-fn/issues",
   "main": "index.js",
   "files": [
     "example.js",
     "index.js"
   ],
   "scripts": {
-    "clean": "git clean -X -d -f",
-    "prepublish": "npm test",
-    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
-    "test:js": "eslint *.js --cache --ignore-pattern .gitignore",
-    "test:tape": "postcss-tape"
+    "lint:js": "eslint . --cache",
+    "lint": "npm lint:js",
+    "pretest": "npm lint",
+    "test": "postcss-tape",
+    "prepublishOnly": "npm test"
   },
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=12"
+  },
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
   "dependencies": {
-    "postcss": "^6.0.11",
-    "postcss-value-parser": "^3.3.0"
+    "postcss-values-parser": "^6.0.1"
   },
   "devDependencies": {
-    "eslint": "^4.6.1",
-    "eslint-config-dev": "2.0.0",
-    "postcss-tape": "2.0.1",
-    "pre-commit": "^1.2.2"
+    "eslint": "7.32.0",
+    "postcss": "8.3.11",
+    "postcss-tape": "6.0.1"
   },
   "eslintConfig": {
-    "extends": "dev"
+    "env": {
+      "es6": true,
+      "node": true
+    },
+    "extends": "eslint:recommended"
   },
-  "runkitExampleFilename": "example.js",
   "keywords": [
     "postcss",
     "css",