use postcss extend instead of soon to be deprecated apply

Author: d2fong

package.json

@@ -109,6 +109,7 @@
     "postcss": "^6.0.13",
     "postcss-cli": "^4.1.1",
     "postcss-cssnext": "^3.0.2",
+    "postcss-extend": "^1.0.5",
     "postcss-import": "^10.0.0",
     "postcss-url": "^7.1.2",
     "rimraf": "^2.6.2",

postcss.config.js

@@ -6,6 +6,7 @@ let conf = {
   plugins: [
     require('postcss-import')(),
     require('postcss-url')({ url: 'inline', maxSize: Number.MAX_SAFE_INTEGER }),
+    require('postcss-extend')(),
     require('postcss-cssnext')({
       browsers: require('./package.json').browserslist,
       warnForDuplicates: false

src/styles/features/view/editWarning.css

@@ -2,8 +2,8 @@
 
 /* change someday to global "snackbar" component, like in react material-ui */
 .edit-warning-container {
-  @apply --flex-center;
-  @apply --no-select;
+  @extend %flex-center;
+  @extend %no-select;
 
   position: fixed;
   pointer-events: none;
@@ -25,7 +25,7 @@
 
 
 .edit-warning {
-  @apply --flex-center;
+  @extend %flex-center;
 
   height: 1.8em;
   padding: 0.4em 1em 0.4em 1em;
@@ -43,15 +43,15 @@
     left: calc(100% - 2.6em);
     animation-name: none;
     transition: transform 1s ease 0s, opacity 1s ease 1s;
-  
+
     &.closed {
       transform: translateX(100%);
       box-shadow: 0px;
       opacity: 0;
     }
   }
-  
-  
+
+
   .edit-warning {
     height: 1.8em;
     min-width: 20em;
@@ -61,4 +61,4 @@
     box-shadow: var(--box-shadow);
     background-color: var(--invalidColor);
   }
-} 
+}

src/styles/features/view/graph.css

@@ -1,6 +1,6 @@
 .Graph {
-  @apply --flex-center;
-  
+  @extend %flex-center;
+
   width: 100%;
   height: 100%;
 }

src/styles/features/view/menuBar.css

@@ -1,5 +1,5 @@
 .menu-bar {
-  @apply --flex-center;
+  @extend %flex-center;
 
   position: absolute;
   justify-content: flex-start;
@@ -15,11 +15,11 @@
 }
 
 .menu-bar-inner-container {
-  @apply --flex-center;
+  @extend %flex-center;
 }
 
 .pc-logo-container {
-  @apply --flex-center;
+  @extend %flex-center;
 
   height: calc(var(--icon-size) * 3 / 2);
   width: calc(var(--icon-size) * 3 / 2);
@@ -41,8 +41,8 @@
 }
 
 .layout-dropdown-button {
-  @apply --flex-center;
-  @apply --no-select;
+  @extend %flex-center;
+  @extend %no-select;
 
   height: calc(var(--icon-size) * 3 / 2);
   width: calc(var(--icon-size) * 3 / 2);
@@ -61,7 +61,7 @@
 }
 
 .layout-dropdown {
-  @apply --flex-center;
+  @extend %flex-center;
 
   display: none;
   margin-left: 1em;
@@ -108,4 +108,4 @@
     padding-top: 1em;
     padding-bottom: 1em;
   }
-} 
+}

src/styles/features/view/sidebarMenu.css

@@ -54,8 +54,8 @@
 }
 
 .tool-button {
-  @apply --flex-center;
-  @apply --no-select;
+  @extend %flex-center;
+  @extend %no-select;
 
   height: calc(var(--icon-size) * 3 / 2);
   font-size: var(--icon-size);
@@ -85,8 +85,8 @@
 }
 
 .sidebar-text {
-  @apply --flex-center;
-  
+  @extend %flex-center;
+
   height: 100%;
   width: 100%;
   z-index: 300;
@@ -106,8 +106,8 @@
 
 /* change someday to global "image-card" component */
 .image-card {
-  @apply --flex-center;
-  
+  @extend %flex-center;
+
   margin: auto;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -116,7 +116,7 @@
   flex-direction: column;
   background-color: white;
   box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
-  
+
   & img {
     border: 1px solid black;
     min-height: 3em;
@@ -139,7 +139,7 @@
 
 .download-option {
   /* height: 10em; */
-  
+
   width: 95%;
   margin: auto;
   box-sizing: border-box;
@@ -151,7 +151,7 @@
   border-style: solid;
   border-color: black;
   border-width: 2px 2px 0px 2px;
-  
+
   &:first-child {
     margin-top: 1em;
   }
@@ -163,15 +163,15 @@
 }
 
 .download-icon-container {
-  @apply --flex-center;
+  @extend %flex-center;
 
   width: 30%;
   height: 100%;
   margin: auto;
 }
 
 .download-icon-inner-container {
-  @apply --flex-center;
+  @extend %flex-center;
 
   width: var(--icon-size);
   height: var(--icon-size);
@@ -205,10 +205,10 @@
     left: calc(- var(--icon-size-mobile) * 3 / 2);
     height: calc((var(--icon-size-mobile) * 3 / 2) * 4);
     width: calc(var(--icon-size-mobile) * 3 / 2);
-  
+
     &.conditional {
       height: calc(var(--icon-size-mobile) * 3 / 2);
-  
+
       &.open {
         left: calc(- var(--icon-size-mobile) * 3 / 2);
       }
@@ -231,12 +231,12 @@
     left: 0;
     box-shadow: 0px;
     transform: translateY(0%);
-  
+
     &.open {
       transform: translateY(-100%);
     }
   }
-  
+
   .sidebar-select {
     position: absolute;
     top: calc(- var(--icon-size-mobile) * 3 / 2);
@@ -246,39 +246,39 @@
     flex-direction: row;
     border-width: 2px 2px 0px 2px;
     border-radius: 3px 3px 0px 0px;
-  
+
     &.conditional {
       height: calc(var(--icon-size-mobile) * 3 / 2);
       width: calc(var(--icon-size-mobile) * 3 / 2);
       border-width: 2px 2px 0px 0px;
       top: 0;
       box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
-  
+
       &.open {
         top: calc(- var(--icon-size-mobile) * 3 / 2);
         left: 0;
         box-shadow: var(--box-shadow);
       }
     }
   }
-  
+
   .tool-button {
     height: calc(var(--icon-size-mobile) * 3 / 2);
     flex-grow: 1;
 
     border-left: 2px solid black;
     border-top: 0;
-  
+
     &:first-child {
       border-left: 0;
     }
   }
-  
+
   .sidebar-content {
     border-width: 2px 0px 0px 0px;
   }
-  
+
   .sidebar-text {
     border-width: 10px 0px 0px 0px;
   }
-} 
+}

src/styles/vars.css

@@ -14,23 +14,6 @@
   --link: #03A9F4;
   --link-visited: #7E57C2;
 
-  --flex-center: {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  };
-
-  --no-select: {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  
-    cursor: default;
-  }
-  
   --widgetBorderColor: #aaa;
   --widgetBorderRadius: 4px;
   --widgetDisabledBorderColor: #ddd;
@@ -44,4 +27,15 @@
   --invalidColor: #c20e0e;
   --smallFontSize: 0.8em;
   --fadedColor: #888;
+
+  %flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  %no-select {
+    user-select: none;
+    cursor: default;
+  }
 }