tailwindcss-gradients - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

index.js

@@ -5,2 +5,12 @@ const _ = require('lodash');
   variants = {},
+  directions = {
+    't': 'to top',
+    'tr': 'to top right',
+    'r': 'to right',
+    'br': 'to bottom right',
+    'b': 'to bottom',
+    'bl': 'to bottom left',
+    'l': 'to left',
+    'tl': 'to top left',
+  },
   gradients = {},
@@ -10,16 +20,16 @@ } = {}) => ({ e, addUtilities }) => {
     {
-      ...Object.assign(
-        {},
-        ..._.map(gradients, (colors, name) => {
-          if (!_.isArray(colors)) {
-            colors = ['transparent', colors];
+      ...(function() {
+        const utilities = {};
+        _.forEach(gradients, (gradientColors, gradientName) => {
+          if (!_.isArray(gradientColors) || gradientColors.length === 1) {
+            gradientColors = ['transparent', _.isArray(gradientColors) ? gradientColors[0] : gradientColors];
           }
-          return {
-            [`.${e(`bg-gradient-to-top-${name}`)}`]: { backgroundImage: `linear-gradient(to top, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-right-${name}`)}`]: { backgroundImage: `linear-gradient(to right, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-bottom-${name}`)}`]: { backgroundImage: `linear-gradient(to bottom, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-left-${name}`)}`]: { backgroundImage: `linear-gradient(to left, ${colors.join(', ')})` },
-          };
-        }),
-      ),
+          _.forEach(directions, (directionValue, directionName) => {
+            utilities[`.${e(`bg-gradient-${directionName}-${gradientName}`)}`] = {
+              backgroundImage: `linear-gradient(${directionValue}, ${gradientColors.join(', ')})`,
+            };
+          });
+        });
+        return utilities;
+      })(),
     },
@@ -26,0 +36,0 @@ variants,

package.json

 {
   "name": "tailwindcss-gradients",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Tailwind CSS plugin to generate gradient background utilities",
   "author": "Benoît Rouleau <[e-mail]>",
   "license": "ISC",
-  "repository": "https://github.com/benface/tailwindcss-gradients.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/benface/tailwindcss-gradients.git"
+  },
   "bugs": "https://github.com/benface/tailwindcss-gradients/issues",
   "homepage": "https://github.com/benface/tailwindcss-gradients",
   "scripts": {
-    "test": "node test.js"
+    "test": "jest",
+    "release": "f(){ release-it $1 && github-release-from-changelog ;};f"
   },
   "dependencies": {
     "lodash": "^4.17.10"
+  },
+  "devDependencies": {
+    "github-release-from-changelog": "^1.3.2",
+    "jest": "^23.6.0",
+    "jest-matcher-css": "^1.0.3",
+    "postcss": "^7.0.5",
+    "release-it": "^7.6.2",
+    "tailwindcss": "^0.7.0"
   }
 }

README.md

@@ -17,2 +17,8 @@ # Gradients Tailwind CSS Plugin
       variants: ['responsive'],
+      directions: {
+        't': 'to top',
+        'r': 'to right',
+        'b': 'to bottom',
+        'l': 'to left',
+      },
       gradients: {
@@ -31,15 +37,20 @@ 'red': '#f00',
 ```css
-/* configurable with the "gradients" option */
-.bg-gradient-to-top-[name] {
-  background-image: linear-gradient(to top, [color-1], [color-2], [...])
+/* configurable with the "directions" and "gradients" options */
+.bg-gradient-[direction-name]-[gradient-name] {
+  background-image: linear-gradient([direction-value], [gradient-color-1], [gradient-color-2], [...])
 }
-.bg-gradient-to-right-[name] {
-  background-image: linear-gradient(to right, [color-1], [color-2], [...])
+```
+
+Note: The `directions` option is optional and defaults to:
+```js
+{
+  't': 'to top',
+  'tr': 'to top right',
+  'r': 'to right',
+  'br': 'to bottom right',
+  'b': 'to bottom',
+  'bl': 'to bottom left',
+  'l': 'to left',
+  'tl': 'to top left',
 }
-.bg-gradient-to-bottom-[name] {
-  background-image: linear-gradient(to bottom, [color-1], [color-2], [...])
-}
-.bg-gradient-to-left-[name] {
-  background-image: linear-gradient(to left, [color-1], [color-2], [...])
-}
 ```

test.js

@@ -1,18 +0,192 @@
-const plugin = require('./index.js');
+const _ = require('lodash');
+const cssMatcher = require('jest-matcher-css');
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const defaultConfig = require('tailwindcss/defaultConfig')();
+const gradientsPlugin = require('./index.js');
 
-let generatedUtilities = {};
+const disabledModules = {};
+Object.keys(defaultConfig.modules).forEach(module => {
+  disabledModules[module] = false;
+});
 
-plugin({
-  gradients: {
-    'red': '#f00',
-    'red-blue': ['#f00', '#00f'],
-    'red-green-blue': ['#f00', '#0f0', '#00f'],
-  },
-})({
-  e: value => value,
-  addUtilities: (utilities) => {
-    generatedUtilities = utilities;
-  },
+const generatePluginCss = (options = {}) => {
+  return postcss(tailwindcss({
+    modules: disabledModules,
+    plugins: [gradientsPlugin(options)],
+  })).process('@tailwind utilities;', {
+    from: undefined,
+  }).then(result => {
+    return result.css;
+  });
+};
+
+expect.extend({
+  toMatchCss: cssMatcher,
 });
 
-console.log('generatedUtilities', generatedUtilities);
+test('there is no output by default', () => {
+  return generatePluginCss().then(css => {
+    expect(css).toMatchCss(``);
+  });
+});
+
+test('there is no output without directions', () => {
+  return generatePluginCss({
+    directions: {},
+    gradients: {
+      'red': '#f00',
+      'green': '#0f0',
+      'blue': '#00f',
+    },
+  }).then(css => {
+    expect(css).toMatchCss(``);
+  });
+});
+
+test('there is no output without gradients', () => {
+  return generatePluginCss({
+    directions: {
+      't': 'to top',
+      'r': 'to right',
+      'b': 'to bottom',
+      'l': 'to left',
+    },
+    gradients: {},
+  }).then(css => {
+    expect(css).toMatchCss(``);
+  });
+});
+
+test('there are default directions', () => {
+  return generatePluginCss({
+    gradients: {
+      'red': '#f00',
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-t-red {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+      .bg-gradient-tr-red {
+        background-image: linear-gradient(to top right, transparent, #f00);
+      }
+      .bg-gradient-r-red {
+        background-image: linear-gradient(to right, transparent, #f00);
+      }
+      .bg-gradient-br-red {
+        background-image: linear-gradient(to bottom right, transparent, #f00);
+      }
+      .bg-gradient-b-red {
+        background-image: linear-gradient(to bottom, transparent, #f00);
+      }
+      .bg-gradient-bl-red {
+        background-image: linear-gradient(to bottom left, transparent, #f00);
+      }
+      .bg-gradient-l-red {
+        background-image: linear-gradient(to left, transparent, #f00);
+      }
+      .bg-gradient-tl-red {
+        background-image: linear-gradient(to top left, transparent, #f00);
+      }
+    `);
+  });
+});
+
+test('directions can be customized', () => {
+  return generatePluginCss({
+    directions: {
+      'to-top': 'to top',
+    },
+    gradients: {
+      'red': '#f00',
+      'green': '#0f0',
+      'blue': '#00f',
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-to-top-red {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+      .bg-gradient-to-top-green {
+        background-image: linear-gradient(to top, transparent, #0f0);
+      }
+      .bg-gradient-to-top-blue {
+        background-image: linear-gradient(to top, transparent, #00f);
+      }
+    `);
+  });
+});
+
+test('gradients can have multiple colors', () => {
+  return generatePluginCss({
+    directions: {
+      'to-bottom': 'to bottom',
+    },
+    gradients: {
+      'red-green': ['#f00', '#0f0'],
+      'red-green-blue': ['#f00', '#0f0', '#00f'],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-to-bottom-red-green {
+        background-image: linear-gradient(to bottom, #f00, #0f0);
+      }
+      .bg-gradient-to-bottom-red-green-blue {
+        background-image: linear-gradient(to bottom, #f00, #0f0, #00f);
+      }
+    `);
+  });
+});
+
+test('multiple directions and multiple gradients can be used together', () => {
+  return generatePluginCss({
+    directions: {
+      'to-top': 'to top',
+      'to-bottom': 'to bottom',
+    },
+    gradients: {
+      'red': ['#f00'],
+      'green': ['#0f0'],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-to-top-red {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+      .bg-gradient-to-bottom-red {
+        background-image: linear-gradient(to bottom, transparent, #f00);
+      }
+      .bg-gradient-to-top-green {
+        background-image: linear-gradient(to top, transparent, #0f0);
+      }
+      .bg-gradient-to-bottom-green {
+        background-image: linear-gradient(to bottom, transparent, #0f0);
+      }
+    `);
+  });
+});
+
+test('variants are supported', () => {
+  return generatePluginCss({
+    variants: ['hover', 'active'],
+    directions: {
+      't': 'to top',
+    },
+    gradients: {
+      'red': '#f00',
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-t-red {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+      .hover\\:bg-gradient-t-red:hover {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+      .active\\:bg-gradient-t-red:active {
+        background-image: linear-gradient(to top, transparent, #f00);
+      }
+    `);
+  });
+});

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8910

increased by227.94%

Number of package files

6

increased by50%

Lines of code

220

increased by450%

Number of lines in readme file

54

increased by25.58%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

6

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes