Initial refactor

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "6.9.0"
+        }
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

lerna.json

@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.0.0",
+  "version": "0.0.1",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,19 @@
 {
 	"private": true,
+	"scripts": {
+		"build": "lerna exec --parallel -- babel src -d dist",
+		"bootstrap": "lerna bootstrap"
+	},
 	"devDependencies": {
-		"lerna": "^2.9.0"
+		"babel-cli": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
+		"lerna": "^2.9.0",
+		"tailwindcss": "^0.4.3"
 	},
-	"workspaces": ["packages/*"]
-}
+	"workspaces": [
+		"packages/*"
+	],
+	"dependencies": {
+		"lodash": "^4.17.5"
+	}
+}

packages/glhd-tailwindcss-transitions/README.md

@@ -0,0 +1,34 @@
+export default {
+	transitionPrefix: 'transition',
+	transitionDuration: {
+		default: '.25s',
+		'slower': '.75s',
+		'slow': '.5s',
+		'fast': '.15s',
+		'faster': '.075s',
+	},
+	transitionProperty: {
+		default: 'all',
+		'all': 'all',
+		'none': 'none',
+		'bg': 'background',
+		'opacity': 'opacity',
+		'color': 'color',
+		'shadow': 'box-shadow',
+	},
+	transitionTimingFunction: {
+		default: 'ease-in-out',
+		'linear': 'linear',
+		'ease': 'ease',
+		'ease-in': 'ease-in',
+		'ease-out': 'ease-out',
+		'ease-in-out': 'ease-in-out',
+	},
+	transitionDelay: {
+		default: '.1s',
+		'long': '.2s',
+		'longer': '.3s',
+		'longest': '.4s',
+		'none': '0s',
+	},
+};

packages/glhd-tailwindcss-transitions/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "glhd-tailwindcss-transitions",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": "https://github.com/glhd/tailwindcss-plugins",
+  "author": "Chris Morrell",
+  "license": "MIT",
+  "private": false
+}

packages/glhd-tailwindcss-transitions/src/defaultConfig.js

@@ -0,0 +1,34 @@
+export default {
+	transitionPrefix: 'transition',
+	transitionDuration: {
+		default: '.25s',
+		'slower': '.75s',
+		'slow': '.5s',
+		'fast': '.15s',
+		'faster': '.075s',
+	},
+	transitionProperty: {
+		default: 'all',
+		'all': 'all',
+		'none': 'none',
+		'bg': 'background',
+		'opacity': 'opacity',
+		'color': 'color',
+		'shadow': 'box-shadow',
+	},
+	transitionTimingFunction: {
+		default: 'ease-in-out',
+		'linear': 'linear',
+		'ease': 'ease',
+		'ease-in': 'ease-in',
+		'ease-out': 'ease-out',
+		'ease-in-out': 'ease-in-out',
+	},
+	transitionDelay: {
+		default: '.1s',
+		'long': '.2s',
+		'longer': '.3s',
+		'longest': '.4s',
+		'none': '0s',
+	},
+};

packages/glhd-tailwindcss-transitions/src/index.js

@@ -0,0 +1,3 @@
+
+export { default } from './plugin';
+export { default as defaultConfig } from './defaultConfig';

packages/glhd-tailwindcss-transitions/src/plugin.js

@@ -0,0 +1,42 @@
+
+import { get } from 'lodash';
+import defaultConfig from './defaultConfig';
+
+export default (options = {}) => ({ rule, addUtilities, config: userConfig }) => {
+	const config = (name) => {
+		const defaultValue = get(defaultConfig, name);
+		const userValue = userConfig(name, defaultValue);
+		return get(options, name, userValue);
+	};
+
+	const prefix = config('transitionPrefix');
+	const className = (key, modifier = '') => `.${prefix}` + ('default' === key ? '' : `${modifier}-${key}`);
+
+	// Duration
+	addUtilities(Object.entries(config('transitionDuration')).map(([key, value]) => {
+		return rule(className(key), {
+			'transition-duration': value,
+		});
+	}));
+
+	// Property
+	addUtilities(Object.entries(config('transitionProperty')).map(([key, value]) => {
+		return rule(className(key, '-property'), {
+			'transition-property': value,
+		});
+	}));
+
+	// Timing Function
+	addUtilities(Object.entries(config('transitionTimingFunction')).map(([key, value]) => {
+		return rule(className(key, '-timing'), {
+			'transition-timing-function': value,
+		});
+	}));
+
+	// Delay
+	addUtilities(Object.entries(config('transitionDelay')).map(([key, value]) => {
+		return rule(className(key, '-delay'), {
+			'transition-delay': value,
+		});
+	}));
+};