Merge pull request #14 from paralect/ezhivitsa/update-dependencies

Replace postcss-cssnext with postcss-preset-env

browserslist

@@ -0,0 +1,2 @@
+> 1%
+Last 2 versions

package.json

@@ -31,34 +31,33 @@
     "@zeit/next-css": "0.2.0",
     "axios": "0.18.0",
     "classnames": "2.2.6",
-    "cssnano": "3.10.0",
+    "cssnano": "4.0.5",
     "extract-text-webpack-plugin": "3.0.2",
     "find-up": "2.1.0",
     "lodash": "4.17.10",
     "next": "6.1.1",
     "npm-run-all": "4.1.3",
-    "postcss-cssnext": "3.1.0",
-    "postcss-hexrgba": "1.0.1",
-    "postcss-import": "11.1.0",
+    "postcss-import": "12.0.0",
     "postcss-nested": "3.0.0",
+    "postcss-normalize": "6.0.0",
+    "postcss-preset-env": "5.3.0",
     "prop-types": "15.6.2",
     "react": "16.4.0",
     "react-dom": "16.4.0",
     "react-icon-base": "2.1.2",
-    "stylelint": "9.3.0",
+    "stylelint": "9.4.0",
     "stylelint-config-standard": "18.2.0"
   },
   "devDependencies": {
     "@paralect/eslint-config": "0.2.0",
-    "all-contributors-cli": "5.2.1",
-    "babel-eslint": "8.2.5",
-    "babel-plugin-inline-react-svg": "0.5.3",
+    "all-contributors-cli": "5.4.0",
+    "babel-eslint": "8.2.6",
+    "babel-plugin-inline-react-svg": "0.5.4",
     "babel-plugin-module-resolver": "3.1.1",
     "babel-preset-es2015": "6.24.1",
     "eslint": "4.19.1",
     "eslint-plugin-import": "2.13.0",
-    "eslint-plugin-jsx-a11y": "6.1.0",
-    "eslint-plugin-react": "7.10.0",
-    "lost": "8.3.0"
+    "eslint-plugin-jsx-a11y": "6.1.1",
+    "eslint-plugin-react": "7.10.0"
   }
 }

postcss.config.js

@@ -1,11 +1,11 @@
 const { join } = require('path');
 
 const postcssImport = require('postcss-import');
-const postcssCssNext = require('postcss-cssnext');
-const cssnano = require('cssnano');
+const postcssPresetEnv = require('postcss-preset-env');
 const postcssNested = require('postcss-nested');
-const postcssHexrgba = require('postcss-hexrgba');
-const lost = require('lost');
+const postcssNormalize = require('postcss-normalize');
+
+const cssnano = require('cssnano');
 
 module.exports = {
   plugins: [
@@ -14,11 +14,19 @@ module.exports = {
       path: ['styles'],
     }),
     postcssNested,
-    postcssCssNext,
-    postcssHexrgba,
+    postcssNormalize(),
+    postcssPresetEnv({
+      stage: 2,
+      features: {
+        'custom-media-queries': true,
+        'custom-properties': {
+          appendVariables: false,
+          preserve: false, // use true when will be fixed bug with duplicate root variables
+        },
+      },
+    }),
     cssnano({
       zindex: false,
     }),
-    lost,
   ],
 };

src/client/layouts/main/components/footer/styles.pcss

@@ -7,15 +7,15 @@
   margin-top: var(--distance-900);
 
   &.purple {
-    background: rgba(var(--deep-purple-100), 0.5);
+    background: var(--deep-purple-100-50);
   }
 
   &.green {
-    background: rgba(var(--green-100), 0.3);
+    background: var(--green-100-30);
   }
 
   &.blue {
-    background: rgba(var(--light-blue-100), 0.3);
+    background: var(--light-blue-100-30);
   }
 }
 
@@ -31,6 +31,7 @@
 
   svg {
     width: 80px;
+    height: 50px;
   }
 }
 

src/client/styles/colors/all.pcss

@@ -0,0 +1,8 @@
+@import './deep-purple.pcss';
+@import './green.pcss';
+@import './grey.pcss';
+@import './light-blue.pcss';
+
+:root {
+  --white: #fff;
+}

src/client/styles/colors/deep-purple.pcss

@@ -1,6 +1,7 @@
 :root {
   --deep-purple-50: #f3effb;
   --deep-purple-100: #ddd0f2;
+  --deep-purple-100-50: #ddd0f280;
   --deep-purple-200: #bca1e6;
   --deep-purple-300: #a682de;
   --deep-purple-400: #9063d6;

src/client/styles/colors/green.pcss

@@ -1,6 +1,7 @@
 :root {
   --green-50: #dff5e5;
   --green-100: #b2e6c1;
+  --green-100-30: #b2e6c148;
   --green-200: #94dda9;
   --green-300: #77d391;
   --green-400: #68cf85;

src/client/styles/colors/light-blue.pcss

@@ -1,6 +1,7 @@
 :root {
   --light-blue-50: #e1f5fe;
   --light-blue-100: #b3e5fc;
+  --light-blue-100-30: #b3e5fc80;
   --light-blue-200: #81d4fa;
   --light-blue-300: #4fc3f7;
   --light-blue-400: #29b6f6;

src/client/styles/global.pcss

@@ -1,3 +1,7 @@
+/* stylelint-disable */
+@import-normalize;
+/* stylelint-enable */
+
 @import 'variables.pcss';
 
 * {
@@ -11,8 +15,8 @@ html {
 }
 
 body {
-  margin: 0;
   min-height: 100vh;
+  margin: 0;
 }
 
 h1 {

src/client/styles/variables.pcss

@@ -1,10 +1,6 @@
-@import 'colors/deep-purple.pcss';
-@import 'colors/green.pcss';
-@import 'colors/grey.pcss';
-@import 'colors/light-blue.pcss';
+@import 'colors/all.pcss';
 
 :root {
-  --white: #fff;
   --max-container-width: 1160px;
   --border-radius-300: 2px;
   --border-radius-400: 3px;