switch to postcss

Author: rikschennink

dist/filepond-plugin-file-poster.css

@@ -1,5 +1,5 @@
 /*!
- * FilePondPluginFilePoster 2.3.0
+ * FilePondPluginFilePoster 2.3.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -12,7 +12,6 @@
 .filepond--image-preview-wrapper ~ .filepond--file-poster-wrapper {
   display: none;
 }
-
 .filepond--file-poster-overlay {
   display: block;
   position: absolute;
@@ -32,34 +31,42 @@
   user-select: none;
 }
 
+/* success (is second canvas) */
 .filepond--file-poster-overlay:nth-of-type(2) {
   mix-blend-mode: normal;
 }
 
+/* error (is third canvas) */
 .filepond--file-poster-overlay:nth-of-type(3) {
   mix-blend-mode: normal;
 }
 
+/* disable for Safari as mix-blend-mode causes the overflow:hidden of the parent container to not work */
 @supports (-webkit-marquee-repetition: infinite) and
   ((-o-object-fit: fill) or (object-fit: fill)) {
   .filepond--file-poster-overlay {
     mix-blend-mode: normal;
   }
 }
-
 .filepond--file-poster-wrapper {
+  /* no interaction */
   pointer-events: none;
+
+  /* have preview fill up all available space */
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 100%;
   margin: 0;
+
+  /* radius is .05em less to prevent the panel background color from shining through */
   border-radius: 0.45em;
   overflow: hidden;
+
+  /* this seems to prevent Chrome from redrawing this layer constantly */
   background: rgba(0, 0, 0, 0.01);
 }
-
 .filepond--file-poster {
   position: relative;
   z-index: 1;
@@ -70,6 +77,8 @@
   -webkit-transform-origin: center center;
   transform-origin: center center;
   background: #222;
+
+  /* will be animated */
   will-change: transform, opacity;
 }
 .filepond--file-poster img {

dist/filepond-plugin-file-poster.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePondPluginFilePoster 2.3.0
+ * FilePondPluginFilePoster 2.3.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */

dist/filepond-plugin-file-poster.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * FilePondPluginFilePoster 2.3.0
+ * FilePondPluginFilePoster 2.3.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */

dist/filepond-plugin-file-poster.js

@@ -1,6 +1,6 @@
 {
     "name": "filepond-plugin-file-poster",
-    "version": "2.3.0",
+    "version": "2.3.1",
     "description": "File Poster Plugin for FilePond",
     "license": "MIT",
     "author": {
@@ -28,8 +28,8 @@
         "build": "npm run scripts | npm run styles",
         "scripts": "npx rollup -c",
         "styles": "npm run styles:pretty && npm run styles:nano",
-        "styles:pretty": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer | npx prettier --single-quote --parser css | node banner-cli.js FilePondPluginFilePoster > dist/filepond-plugin-file-poster.css",
-        "styles:nano": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer --use cssnano | node banner-cli.js FilePondPluginFilePoster > dist/filepond-plugin-file-poster.min.css"
+        "styles:pretty": "cat src/css/* | npx postcss --no-map --use postcss-nested autoprefixer | npx prettier --single-quote --parser css | node banner-cli.js FilePondPluginFilePoster > dist/filepond-plugin-file-poster.css",
+        "styles:nano": "cat src/css/* | npx postcss --no-map --use postcss-nested autoprefixer --use cssnano | node banner-cli.js FilePondPluginFilePoster > dist/filepond-plugin-file-poster.min.css"
     },
     "peerDependencies": {
         "filepond": ">=4.x <5.x"
@@ -40,7 +40,9 @@
         "autoprefixer": "^9.5.0",
         "cssnano": "^4.1.10",
         "node-sass": "^4.14.1",
-        "postcss-cli": "^6.1.2",
+        "postcss": "^8.1.4",
+        "postcss-cli": "^8.1.0",
+        "postcss-nested": "^5.0.1",
         "prettier": "^1.16.4",
         "rollup": "^1.7.0",
         "rollup-plugin-babel": "^4.3.2",
@@ -50,4 +52,4 @@
         "rollup-plugin-prettier": "^0.6.0",
         "rollup-plugin-terser": "^4.0.4"
     }
-}
+}

dist/filepond-plugin-file-poster.min.css

@@ -14,17 +14,17 @@
     user-select: none;
 }
 
-// success (is second canvas)
+/* success (is second canvas) */
 .filepond--file-poster-overlay:nth-of-type(2) {
     mix-blend-mode: normal;
 }
 
-// error (is third canvas)
+/* error (is third canvas) */
 .filepond--file-poster-overlay:nth-of-type(3) {
     mix-blend-mode: normal;
 }
 
-// disable for Safari as mix-blend-mode causes the overflow:hidden of the parent container to not work
+/* disable for Safari as mix-blend-mode causes the overflow:hidden of the parent container to not work */
 @supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
     .filepond--file-poster-overlay {
         mix-blend-mode: normal;

dist/filepond-plugin-file-poster.min.js

@@ -1,19 +1,19 @@
 .filepond--file-poster-wrapper {
-    // no interaction
+    /* no interaction */
     pointer-events: none;
 
-    // have preview fill up all available space
+    /* have preview fill up all available space */
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     height:100%;
     margin: 0;
 
-    // radius is .05em less to prevent the panel background color from shining through
+    /* radius is .05em less to prevent the panel background color from shining through */
     border-radius: 0.45em;
     overflow: hidden;
 
-    // this seems to prevent Chrome from redrawing this layer constantly
+    /* this seems to prevent Chrome from redrawing this layer constantly */
     background: rgba(0, 0, 0, 0.01);
 }

package-lock.json

@@ -8,7 +8,7 @@
     transform-origin: center center;
     background: #222;
 
-    // will be animated
+    /* will be animated */
     will-change: transform, opacity;
 
     img {