gatsby-background-image-es5 - npm Package Compare versions

Comparing version 0.7.1 to 0.7.2

HelperUtils.js

@@ -24,4 +24,2 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /**
@@ -28,0 +26,0 @@ * Mirror of BackgroundImage.propTypes. Keep in SYNC!

ImageUtils.js

@@ -338,6 +338,2 @@ "use strict";
   }); // Backup bgImage to lastImage.
-  // TODO: perhaps use bgImage & lastImage as an array and introduce:
-  // TODO: - gbImageString & lastImageString
-  // TODO: might help with the suddenly "missing" astronaut ^^.
-  // TODO: use imageReferenceCompleted() for "src" & "currentSrc", else fill in from lastImage.
 
@@ -362,2 +358,9 @@ var returnArray = (0, _isArray["default"])(image);
       returnArray: returnArray
+    }), nextImage); // Now add possible `rgba()` or similar CSS string props.
+
+    nextImage = (0, _HelperUtils.combineArray)(getCurrentFromData({
+      data: image,
+      propName: "CSS_STRING",
+      addUrl: false,
+      returnArray: returnArray
     }), nextImage); // Do we have at least one img loaded?
@@ -462,2 +465,7 @@
         return imageLoaded(dataElement) && dataElement[propName] || "";
+      } // Check if CSS strings should be parsed.
+
+
+      if (propName === "CSS_STRING" && (0, _HelperUtils.isString)(dataElement)) {
+        return dataElement;
       }
@@ -565,2 +573,3 @@
 
+        // Check for individual image or CSS string changes.
         return (0, _every["default"])(_context = props.fluid).call(_context, function (image, index) {
@@ -576,2 +585,3 @@ return image.src !== prevProps.fluid[index].src;
 
+        // Check for individual image or CSS string changes.
         return (0, _every["default"])(_context2 = props.fixed).call(_context2, function (image, index) {
@@ -621,2 +631,9 @@ return image.src !== prevProps.fixed[index].src;
       returnArray: returnArray
+    }), initialImage); // Now add possible `rgba()` or similar CSS string props.
+
+    initialImage = (0, _HelperUtils.combineArray)(getCurrentFromData({
+      data: image,
+      propName: "CSS_STRING",
+      addUrl: false,
+      returnArray: returnArray
     }), initialImage);
@@ -623,0 +640,0 @@

index.js

@@ -360,6 +360,6 @@ "use strict";
 BackgroundImage.propTypes = {
-  resolutions: _propTypes["default"].oneOfType([fixedObject, _propTypes["default"].arrayOf(fixedObject)]),
-  sizes: _propTypes["default"].oneOfType([fluidObject, _propTypes["default"].arrayOf(fluidObject)]),
-  fixed: _propTypes["default"].oneOfType([fixedObject, _propTypes["default"].arrayOf(fixedObject)]),
-  fluid: _propTypes["default"].oneOfType([fluidObject, _propTypes["default"].arrayOf(fluidObject)]),
+  resolutions: _propTypes["default"].oneOfType([fixedObject, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([fixedObject, _propTypes["default"].string]))]),
+  sizes: _propTypes["default"].oneOfType([fluidObject, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([fluidObject, _propTypes["default"].string]))]),
+  fixed: _propTypes["default"].oneOfType([fixedObject, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([fixedObject, _propTypes["default"].string]))]),
+  fluid: _propTypes["default"].oneOfType([fluidObject, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([fluidObject, _propTypes["default"].string]))]),
   fadeIn: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
@@ -366,0 +366,0 @@ durationFadeIn: _propTypes["default"].number,

package.json

 {
   "name": "gatsby-background-image-es5",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Lazy-loading React background-image component with optional support for the blur-up effect. Transpiled to ES5.",
@@ -47,3 +47,3 @@ "keywords": [
   },
-  "gitHead": "c8efcb7e811bde81660cc7170a22e7a2cc3e6446"
+  "gitHead": "886417d998e575cf57a1b4c2bafd272562d4b96f"
 }

README.md

@@ -232,3 +232,4 @@ <h1 align="center">
 As `gatsby-background-image` may now be used with [multiple backgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds),
-this is what a component using it might look like:
+**including CSS strings** like `rgba()` or suchlike this is what a component 
+using `gatsby-background-image-es5` might look like:
 
@@ -269,6 +270,7 @@ ```jsx
 
-  // Watch out for CSS's stacking order, especially when styling the individual
-  // positions! The lowermost image comes last!
+  // Watch out for CSS's stacking order, especially when styling the
+  // individual positions! The lowermost image comes last!
   const backgroundFluidImageStack = [
     seamlessBackground.childImageSharp.fluid,
+    `linear-gradient(rgba(220, 15, 15, 0.73), rgba(4, 243, 67, 0.73))`
     astronaut.childImageSharp.fluid,
@@ -308,4 +310,4 @@ ].reverse()
   /* Now again, remember the stacking order of CSS: lowermost comes last! */
-  background-repeat: no-repeat, repeat;
-  background-position: center 155%, center;
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: center 155%, center, center;
   color: #fff;
@@ -408,3 +410,4 @@ `
 The `fluid` or `fixed` (as well as the deprecated `resolutions` & `sizes`) props
-may be given as an array of images returned from `fluid` or `fixed` queries. 
+may be given as an array of images returned from `fluid` or `fixed` queries or 
+CSS Strings like `rgba()` or such. 
 
@@ -414,7 +417,7 @@ The `fadeIn` prop may be set to `soft` to ignore cached images and always
 
-| Name                   | Type                  | Description                                                      |
-| ---------------------- | --------------------- | ---------------------------------------------------------------- |
-| `fixed`            	 | `object`/`array`      | Data returned from one or multiple fixed queries.                |
-| `fluid`            	 | `object`/`array`      | Data returned from one or multiple fixed queries.                |
-| `fadeIn`               | `boolean`/`string`    | Defaults to fading in the image on load, may be forced by `soft` |
+| Name                   | Type                  | Description                                                                     |
+| ---------------------- | --------------------- | ------------------------------------------------------------------------------- |
+| `fixed`            	 | `object`/`array`      | Data returned from one fixed query or an array of multiple ones or CSS string(s)|
+| `fluid`            	 | `object`/`array`      | Data returned from one fluid query or an array of multiple ones or CSS string(s)|
+| `fadeIn`               | `boolean`/`string`    | Defaults to fading in the image on load, may be forced by `soft`                |
 
@@ -421,0 +424,0 @@ ## props Not Available

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82772

increased by1.21%

Lines of code

1464

increased by0.83%

Number of lines in readme file

449

increased by0.67%

No dependency changes