Support PostCSS 8 (#8)

Author: Semigradsky

.rollup.js

@@ -1,8 +1,25 @@
-import pkg from './package.json'
+import babel from '@rollup/plugin-babel';
 
 export default {
-	...pkg.rollup,
-	plugins: pkg.rollup.plugins.map(plugin => require(plugin)()),
+	input: 'src/index.js',
+	output: [
+		{ file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true, exports: 'default' },
+		{ file: 'dist/index.esm.js', format: 'esm', sourcemap: true, exports: 'default' }
+	],
+	plugins: [
+		babel({
+			babelHelpers: 'bundled',
+			presets: [
+				['@babel/preset-env', {
+					corejs: 3,
+					loose: true,
+					modules: false,
+					targets: { node: 10 },
+					useBuiltIns: 'entry'
+				}]
+			]
+		}),
+	],
 	onwarn(warning, warn) {
 		if (warning.code !== 'UNRESOLVED_IMPORT') warn(warning)
 	}

INSTALL.md

@@ -11,18 +11,10 @@ instructions for:
 Add [PostCSS Lab Function] to your project:
 
 ```bash
-npm install postcss-lab-function --save-dev
+npm install postcss postcss-lab-function --save-dev
 ```
 
-Use [PostCSS Lab Function] to process your CSS:
-
-```js
-const postcssLabFunction = require('postcss-lab-function');
-
-postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
+Use it as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');

README.md

@@ -28,18 +28,10 @@
 Add [PostCSS Lab Function] to your project:
 
 ```bash
-npm install postcss-lab-function --save-dev
+npm install postcss postcss-lab-function --save-dev
 ```
 
-Use [PostCSS Lab Function] to process your CSS:
-
-```js
-const postcssLabFunction = require('postcss-lab-function');
-
-postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
+Use it as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');

package.json

@@ -27,17 +27,20 @@
   },
   "dependencies": {
     "@csstools/convert-colors": "^2.0.0",
-    "postcss": "^7.0.27",
-    "postcss-values-parser": "^3.2.0"
+    "postcss-values-parser": "^4.0.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "postcss-tape": "^5.0.2",
-    "rollup": "^2.7.2",
-    "rollup-plugin-babel": "^4.4.0"
+    "eslint": "^7.10.0",
+    "postcss": "^8.1.0",
+    "postcss-tape": "^6.0.0",
+    "rollup": "^2.28.2"
   },
   "babel": {
     "presets": [
@@ -57,22 +60,6 @@
     "extends": "eslint:recommended",
     "parser": "babel-eslint"
   },
-  "rollup": {
-    "input": "src/index.js",
-    "plugins": [
-      "rollup-plugin-babel"
-    ],
-    "output": [
-      {
-        "file": "dist/index.cjs.js",
-        "format": "cjs"
-      },
-      {
-        "file": "dist/index.esm.js",
-        "format": "esm"
-      }
-    ]
-  },
   "keywords": [
     "postcss",
     "css",

src/index.js

@@ -1,18 +1,19 @@
-import postcss from 'postcss'
 import onCSSDeclaration from './onCSSDeclaration'
 import options from './options'
 
 /** Transform lab() and lch() functions in CSS. */
-const postcssPlugin = postcss.plugin('postcss-lab-function', /** @type {PostCSSPluginInitializer} */ opts => {
+const postcssPlugin = /** @type {PostCSSPluginInitializer} */ opts => {
 	options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false
 
-	return root => {
-		root.walkDecls(onCSSDeclaration)
+	return {
+		postcssPlugin: 'postcss-lab-function',
+		Declaration: onCSSDeclaration,
 	}
-})
+}
+
+postcssPlugin.postcss = true
 
 export default postcssPlugin
 
-/** @typedef {import('postcss').Root} CSSRoot */ 
-/** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */ 
-/** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */ 
+/** @typedef {import('postcss').Plugin} PostCSSPlugin */
+/** @typedef {(opts: options) => PostCSSPlugin} PostCSSPluginInitializer */