Use rgba() instead of transparent (fix #5)

Author: benface

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-beta.2] - 2019-04-04
+
+### Fixed
+- Single-color gradients now generate a transparent `rgba()` version of the color instead of using the `transparent` keyword, which is interpreted as `rgba(0, 0, 0, 0)` (transparent black) by Safari and the CSS spec
+
 ## [2.0.0-beta.1] - 2019-04-04
 
 ### Added

index.js

@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const Color = require('color');
 
 module.exports = function() {
   return ({ config, e, addUtilities }) => {
@@ -19,7 +20,9 @@ module.exports = function() {
       let utilities = {};
       _.forEach(config('theme.gradients.colors', defaultColors), (colors, colorKey) => {
         if (!_.isArray(colors) || colors.length === 1) {
-          colors = ['transparent', _.isArray(colors) ? colors[0] : colors];
+          let color = _.isArray(colors) ? colors[0] : colors;
+          let parsedColor = Color(color);
+          colors = [parsedColor.alpha(0).rgb().string(), color];
         }
         _.forEach(config('theme.gradients.directions', defaultDirections), (direction, directionKey) => {
           utilities[`.${e(`bg-gradient-${directionKey}-${colorKey}`)}`] = {

package-lock.json

@@ -15,6 +15,7 @@
     "release": "f(){ release-it $1 && github-release-from-changelog ;};f"
   },
   "dependencies": {
+    "color": "^3.1.0",
     "lodash": "^4.17.11"
   },
   "devDependencies": {

package.json

@@ -95,28 +95,28 @@ test('there are default directions', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-tr-red {
-        background-image: linear-gradient(to top right, transparent, #f00);
+        background-image: linear-gradient(to top right, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-r-red {
-        background-image: linear-gradient(to right, transparent, #f00);
+        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-br-red {
-        background-image: linear-gradient(to bottom right, transparent, #f00);
+        background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-b-red {
-        background-image: linear-gradient(to bottom, transparent, #f00);
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-bl-red {
-        background-image: linear-gradient(to bottom left, transparent, #f00);
+        background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-l-red {
-        background-image: linear-gradient(to left, transparent, #f00);
+        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-tl-red {
-        background-image: linear-gradient(to top left, transparent, #f00);
+        background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), #f00);
       }
     `);
   });
@@ -142,13 +142,13 @@ test('directions can be customized', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .bg-gradient-to-top-red {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-to-top-green {
-        background-image: linear-gradient(to top, transparent, #0f0);
+        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
       }
       .bg-gradient-to-top-blue {
-        background-image: linear-gradient(to top, transparent, #00f);
+        background-image: linear-gradient(to top, rgba(0, 0, 255, 0), #00f);
       }
     `);
   });
@@ -202,16 +202,16 @@ test('multiple directions and multiple gradients can be used together', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .bg-gradient-to-top-red {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-to-bottom-red {
-        background-image: linear-gradient(to bottom, transparent, #f00);
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-to-top-green {
-        background-image: linear-gradient(to top, transparent, #0f0);
+        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
       }
       .bg-gradient-to-bottom-green {
-        background-image: linear-gradient(to bottom, transparent, #0f0);
+        background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0), #0f0);
       }
     `);
   });
@@ -232,11 +232,11 @@ test('responsive utilities are generated by default', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       @media (min-width: 640px) {
         .sm\\:bg-gradient-t-red {
-          background-image: linear-gradient(to top, transparent, #f00);
+          background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
         }
       }
     `);
@@ -261,13 +261,13 @@ test('variants can be customized', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .hover\\:bg-gradient-t-red:hover {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .active\\:bg-gradient-t-red:active {
-        background-image: linear-gradient(to top, transparent, #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
     `);
   });