Merge pull request #1 from kirschbaum-development/dev

Prep for 1.0 release

Author: dvanscott

.npmignore

@@ -0,0 +1,2 @@
+banner.png
+yarn.lock

.travis.yml

@@ -0,0 +1,11 @@
+language: node_js
+node_js:
+  - '10'
+  - '8'
+
+cache: yarn
+
+before_script:
+  - yarn install
+
+script: yarn test

README.md

@@ -1,8 +1,9 @@
-# Tailwind CSS Scale Utilities Plugin
+![](https://raw.githubusercontent.com/kirschbaum-development/tailwindcss-scale-utilities/dev/banner.png?token=AJHW5NJY5DEXJ3H7YZ4WUOS5MA3VC)
 
 [![npm](https://img.shields.io/npm/v/@kirschbaum-development/tailwindcss-scale-utilities.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
 [![npm](https://img.shields.io/npm/dt/@kirschbaum-development/tailwindcss-scale-utilities.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
+[![tests](https://travis-ci.org/kirschbaum-development/tailwindcss-scale-utilities.svg?branch=master)](https://travis-ci.org/kirschbaum-development/tailwindcss-scale-utilities)
 
 ## Installation
 
@@ -25,12 +26,12 @@ theme: {
     25: '.25',
     50: '.5',
     75: '.75',
-    1: 1
+    100: '1',
+    110: '1.1'
   }
 },
-
 variants: {
-  scale: ['responsive', 'hover']
+  scale: ['hover']
 }
 ```
 
@@ -41,16 +42,17 @@ variants: {
 {
   theme: {
     scale: {
+      '60': '0.6',
       '90': '0.9',
       '100': '1',
-      '110': '1.1'
+      '120': '1.2'
     }
   },
   variants: {
     scale: ['responsive']
   },
   plugins: [
-    require('tailwindcss-scale-utilities')()
+    require('tailwindcss-scale-utilities')
   ]
 }
 ```

banner.png

@@ -1,30 +1,29 @@
 const map = require('lodash/map');
 const fromPairs = require('lodash/fromPairs');
 
-module.exports = function () {
-    return ({ addUtilities, e, theme, variants }) => {
-        const scale = theme('scale', {
-            0: '0',
-            25: '.25',
-            50: '.5',
-            75: '.75',
-            100: '1'
-        });
+module.exports = ({ addUtilities, e, theme, variants }) => {
+    const scale = theme('scale', {
+        0: '0',
+        25: '.25',
+        50: '.5',
+        75: '.75',
+        100: '1',
+        110: '1.1'
+    });
 
-        const utilities = fromPairs(
-            map(scale, (value, modifier) => {
-                return [
-                    `.scale-${e(modifier)}`,
-                    {
-                        transform: `scale(${value})`
-                    }
-                ];
-            })
-        );
+    const utilities = fromPairs(
+        map(scale, (value, modifier) => {
+            return [
+                `.scale-${e(modifier)}`,
+                {
+                    transform: `scale(${value})`
+                }
+            ];
+        })
+    );
 
-        addUtilities(
-            utilities,
-            variants('scale', ['responsive', 'hover'])
-        );
-    };
-}
+    addUtilities(
+        utilities,
+        variants('scale', ['hover'])
+    );
+};

index.js

@@ -23,7 +23,7 @@
     },
     "dependencies": {
         "lodash": "^4.17",
-        "tailwindcss": "^1.0"
+        "tailwindcss": "1.0.* || 1.1.*"
     },
     "devDependencies": {
         "jest": "^24.8",

package.json

@@ -2,7 +2,6 @@ const merge = require('lodash/merge');
 const cssMatcher = require('jest-matcher-css');
 const postcss = require('postcss');
 const tailwindcss = require('tailwindcss');
-const scalePlugin = require('../index.js');
 
 const generatePluginCss = (config) => {
     return postcss(
@@ -15,17 +14,17 @@ const generatePluginCss = (config) => {
                 },
                 corePlugins: false,
                 plugins: [
-                    scalePlugin(),
+                  require('../index.js'),
                 ],
             }, config)
         )
     )
-        .process('@tailwind utilities', {
-            from: undefined,
-        })
-        .then(result => {
-            return result.css;
-        });
+    .process('@tailwind utilities', {
+        from: undefined,
+    })
+    .then(result => {
+        return result.css;
+    });
 };
 
 expect.extend({
@@ -50,6 +49,9 @@ test('default scale utilities and variants are generated', () => {
       .scale-100 {
         transform: scale(1);
       }
+      .scale-110 {
+        transform: scale(1.1);
+      }
       .hover\\:scale-0:hover {
         transform: scale(0);
       }
@@ -65,37 +67,8 @@ test('default scale utilities and variants are generated', () => {
       .hover\\:scale-100:hover {
         transform: scale(1);
       }
-      @media (min-width: 640px) {
-        .sm\\:scale-0 {
-          transform: scale(0);
-        }
-        .sm\\:scale-25 {
-          transform: scale(.25);
-        }
-        .sm\\:scale-50 {
-          transform: scale(.5);
-        }
-        .sm\\:scale-75 {
-          transform: scale(.75);
-        }
-        .sm\\:scale-100 {
-          transform: scale(1);
-        }
-        .sm\\:hover\\:scale-0:hover {
-          transform: scale(0);
-        }
-        .sm\\:hover\\:scale-25:hover {
-          transform: scale(.25);
-        }
-        .sm\\:hover\\:scale-50:hover {
-          transform: scale(.5);
-        }
-        .sm\\:hover\\:scale-75:hover {
-          transform: scale(.75);
-        }
-        .sm\\:hover\\:scale-100:hover {
-          transform: scale(1);
-        }
+      .hover\\:scale-110:hover {
+        transform: scale(1.1);
       }
     `);
     });
@@ -151,6 +124,9 @@ test('scale variants can be customized', () => {
       .scale-100 {
         transform: scale(1);
       }
+      .scale-110 {
+        transform: scale(1.1);
+      }
       .group:hover .group-hover\\:scale-0 {
         transform: scale(0);
       }
@@ -166,6 +142,9 @@ test('scale variants can be customized', () => {
       .group:hover .group-hover\\:scale-100 {
         transform: scale(1);
       }
+      .group:hover .group-hover\\:scale-110 {
+        transform: scale(1.1);
+      }
     `);
     });
 });