You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

tailwindcss-gradients

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-gradients - npm Package Compare versions

Comparing version

2.0.0-beta.1
to
2.0.0-beta.2

5

CHANGELOG.md

@@ -8,2 +8,7 @@ # Changelog

## [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

@@ -10,0 +15,0 @@

5

index.js
const _ = require('lodash');
const Color = require('color');

@@ -22,3 +23,5 @@ module.exports = function() {

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];
}

@@ -25,0 +28,0 @@ _.forEach(config('theme.gradients.directions', defaultDirections), (direction, directionKey) => {

3

package.json
{
"name": "tailwindcss-gradients",
"version": "2.0.0-beta.1",
"version": "2.0.0-beta.2",
"description": "Tailwind CSS plugin to generate gradient background utilities",

@@ -18,2 +18,3 @@ "author": "Benoît Rouleau <benoit.rouleau@icloud.com>",

"dependencies": {
"color": "^3.1.0",
"lodash": "^4.17.11"

@@ -20,0 +21,0 @@ },

40

test.js

@@ -98,24 +98,24 @@ const _ = require('lodash');

.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);
}

@@ -146,9 +146,9 @@ `);

.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);
}

@@ -207,12 +207,12 @@ `);

.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);
}

@@ -238,7 +238,7 @@ `);

.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);
}

@@ -268,9 +268,9 @@ }

.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);
}

@@ -277,0 +277,0 @@ `);