chore(deps): bump cssnano-5.1.13 & postcss-8.1

.gitignore

@@ -8,3 +8,4 @@ yarn-error.log
 .cache
 dist
 _examples
+.idea

packages/babel/package.json

@@ -28,16 +28,16 @@
         "@reshadow/postcss": "0.0.1",
         "@reshadow/utils": "0.0.1",
         "css-modules-loader-core": "^1.1.0",
-        "cssnano": "^4.1.10",
+        "cssnano": "^5.1.13",
         "generic-names": "^2.0.1",
-        "postcss": "^7.0.17",
+        "postcss": "^8.1.0",
         "postcss-import-sync2": "1.1.0",
         "postcss-mixins": "^6.2.2",
         "postcss-modules-extract-imports": "^2.0.0",
         "postcss-modules-local-by-default": "^3.0.2",
         "postcss-modules-scope": "^2.0.1",
         "postcss-modules-values": "^3.0.0",
-        "postcss-preset-env": "^6.7.0",
+        "postcss-preset-env": "^7.8.2",
         "postcss-simple-vars": "^5.0.2",
         "resolve": "^1.11.1",
         "string-hash": "^1.1.3",

packages/babel/postcss/index.js

@@ -53,7 +53,7 @@ const syncPlugin = plugin => (root, result) => {
     const {SynchronousPromise} = require('synchronous-promise');
     const realPromise = global.Promise;
     global.Promise = SynchronousPromise;
-    plugin(root, result);
+    postcss([plugin]).process(root, result);
     global.Promise = realPromise;
 };
 

packages/babel/spec/__snapshots__/index.test.js.snap

@@ -470,7 +470,9 @@ const styled_c8 = create([(
 /*__reshadow_css_start__*/
 __css__(
 /*__inner_css_start__*/
-\`.___button_1n8fw_1{display:grid}\`
+\`.___button_1n8fw_1 {
+    display: grid;
+}\`
 /*__inner_css_end__*/
 , \\"1n8fwd2\\")
 /*__reshadow_css_end__*/
@@ -497,7 +499,6 @@ const styled_c8 = create([(
 __css__(
 /*__inner_css_start__*/
 \`.___button_ltzzv_1 {
-    -webkit-transition: 1s;
     transition: 1s;
 }\`
 /*__inner_css_end__*/

packages/postcss/index.js

@@ -1,4 +1,3 @@
-const postcss = require('postcss');
 const createTransform = require('./transform');
 
 const config = {
@@ -13,7 +12,7 @@ const fromPairs = x =>
 
 const sortByKeys = obj => fromPairs(Object.entries(obj).sort());
 
-module.exports = postcss.plugin('postcss-reshadow', (options = {}) => {
+const plugin = (options = {}) => {
     const {scope, scopeBehaviour, stats, root: projectRoot} = Object.assign(
         {},
         config,
@@ -25,56 +24,63 @@ module.exports = postcss.plugin('postcss-reshadow', (options = {}) => {
         scopeBehaviour,
     });
 
-    return (root, result) => {
-        if (
-            projectRoot &&
-            typeof result.opts.from === 'string' &&
-            !result.opts.from.startsWith(projectRoot)
-        )
-            return;
-
-        const elements = {};
-        transform.state = {elements};
-
-        root.walkRules(ruleDecl => {
-            const rule = ruleDecl;
-
+    return {
+        postcssPlugin: 'postcss-reshadow',
+        Once(root, result) {
             if (
-                rule.parent.type === 'atrule' &&
-                rule.parent.name.endsWith('keyframes')
-            ) {
+                projectRoot &&
+                typeof result.opts.from === 'string' &&
+                !result.opts.from.startsWith(projectRoot)
+            )
                 return;
-            }
 
-            rule.selector = rule.selector.replace(
-                /]\\?=(['"].*?['"]|[\w]+)/g,
-                '=$1]',
-            );
+            const elements = {};
+            transform.state = {elements};
+
+            root.walkRules(ruleDecl => {
+                const rule = ruleDecl;
 
-            const selector = transform.run(rule);
+                if (
+                    rule.parent.type === 'atrule' &&
+                    rule.parent.name.endsWith('keyframes')
+                ) {
+                    return;
+                }
 
-            rule.selector = selector;
-        });
+                rule.selector = rule.selector.replace(
+                    /]\\?=(['"].*?['"]|[\w]+)/g,
+                    '=$1]',
+                );
 
-        Object.entries(elements).forEach(([, value]) => {
-            const {mods, props} = value;
+                const selector = transform.run(rule);
 
-            value.mods = sortByKeys(mods);
-            value.props = sortByKeys(props);
-        });
+                rule.selector = selector;
+            });
 
-        if (stats) {
-            root.append({
-                name: 'value',
-                params: `__elements__: '${JSON.stringify(
-                    elements,
-                    (key, value) => {
-                        if (value instanceof Set) return Array.from(value);
+            Object.entries(elements).forEach(([, value]) => {
+                const {mods, props} = value;
 
-                        return value;
-                    },
-                )}'`,
+                value.mods = sortByKeys(mods);
+                value.props = sortByKeys(props);
             });
-        }
+
+            if (stats) {
+                root.append({
+                    name: 'value',
+                    params: `__elements__: '${JSON.stringify(
+                        elements,
+                        (key, value) => {
+                            if (value instanceof Set) return Array.from(value);
+
+                            return value;
+                        },
+                    )}'`,
+                });
+            }
+        },
     };
-});
+};
+
+plugin.postcss = true;
+
+module.exports = plugin;

packages/postcss/package.json

@@ -20,7 +20,7 @@
         "build": "../../build.sh"
     },
     "dependencies": {
-        "postcss": "7.0.36",
+        "postcss": "8.1.0",
         "postcss-selector-parser": "6.0.2"
     },
     "devDependencies": {

packages/webpack/package.json

@@ -32,7 +32,7 @@
         "extract-loader": "^3.1.0",
         "file-loader": "^4.1.0",
         "memory-fs": "^0.4.1",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^4.0.3",
         "react": "^16.7.0",
         "react-dom": "^16.7.0",
         "reshadow": "0.0.1",