feat: migrate plugin to postcss 8

Author: marcalexiei

.babelrc

@@ -19,5 +19,6 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     "add-module-exports"
-  ]
+  ],
+  "comments": false
 }

package-lock.json

@@ -36,8 +36,7 @@
     "property"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.7.2",
-    "postcss": "^7.0.21"
+    "@babel/runtime": "^7.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.0",
@@ -66,8 +65,12 @@
     "husky": "^3.0.9",
     "lint-staged": "^9.4.3",
     "nyc": "^14.1.1",
+    "postcss": "^8.2.5",
     "rimraf": "^3.0.0"
   },
+  "peerDependencies": {
+    "postcss": "^8.2.5"
+  },
   "ava": {
     "require": [
       "@babel/register"

package.json

@@ -1,18 +1,19 @@
 # postcss-map-get <a href="https://github.com/postcss/postcss"><img align="left" height="49" title="PostCSS" src="http://postcss.github.io/postcss/logo.svg"></a>
+
 > [PostCSS](https://github.com/postcss/postcss) plugin to transform SASS Function [map-get](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method).  
 
 [![Travis Build Status](https://img.shields.io/travis/Scrum/postcss-map-get/master.svg?style=flat-square&label=unix)](https://travis-ci.org/Scrum/postcss-map-get)[![node](https://img.shields.io/node/v/postcss-map-get.svg?maxAge=2592000&style=flat-square)]()[![npm version](https://img.shields.io/npm/v/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)[![Dependency Status](https://david-dm.org/scrum/postcss-map-get.svg?style=flat-square)](https://david-dm.org/scrum/postcss-map-get)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/postcss-map-get.svg?style=flat-square)](https://coveralls.io/r/Scrum/postcss-map-get)
 
 [![npm downloads](https://img.shields.io/npm/dm/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)[![npm](https://img.shields.io/npm/dt/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)
 
-
 ## Why?
+
 Adds the ability to use sass like Map Function [map-get](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method).  
 
 ## Install
 
 ```bash
-$ npm install postcss-map-get
+$ npm install postcss postcss-map-get
 ```
 
 > **Note:** This project is compatible with node v8+
@@ -38,11 +39,13 @@ var output = postcss()
 
 console.log(output);
 ```
+
 > Returns the value in a map associated with the given key. If the map doesn't have such a key, returns null.
 
-# Example
+## Example
 
 *input.css*
+
 ```css
 body {
   background: map-get((
@@ -64,7 +67,9 @@ body {
   max-width: 100%;
 }
 ```
+
 *output.css*
+
 ```css
 body {
   background: #fff;

readme.md

@@ -1,23 +1,28 @@
-import postcss from 'postcss';
 import processValue from './process-value';
 import {METHOD} from './constant';
 
-export default postcss.plugin('postcss-map-get', () => {
-  return nodes => {
-    nodes.walkDecls(decl => {
+const plugin = () => {
+  return {
+    postcssPlugin: 'postcss-map-get',
+
+    Declaration(decl) {
       let {value} = decl;
 
       if (value.includes(METHOD)) {
         decl.value = processValue(decl.value);
       }
-    });
+    },
 
-    nodes.walkAtRules(rules => {
-      const {params: parameters} = rules;
+    AtRule(atRule) {
+      const {params: parameters} = atRule;
 
       if (parameters.includes(METHOD)) {
-        rules.params = processValue(parameters);
+        atRule.params = processValue(parameters);
       }
-    });
+    }
   };
-});
+};
+
+plugin.postcss = true;
+
+export default plugin;

src/index.js

@@ -93,7 +93,7 @@ export default function (value) {
     mapString += output.content;
     position = output.position;
 
-    // resolve the desidered requested key
+    // resolve the desired requested key
     let keyString = '';
 
     // indicates if we found the come which separate map and requested key:

src/process-value.js

@@ -70,4 +70,4 @@ test('it should remove line breaks and space from map key only', t => {
   const expected = '.foo {border: 1px solid black}';
   const value = '.foo {border: map-get((\n  border: 1px solid black), border)}';
   t.is(processing(value), expected);
-});
+});