Gulp setup for Theo

gulp-tasks-theo.coffee

exports.init = (gulp) ->
	theo = require('theo')
	props = './styles/properties/props.json'
	dest = './styles/generated'
	_ = require 'lodash'


	gulp.task 'default', ['theo-sass', 'theo-js']

	gulp.task 'theo-sass', (done) ->
		gulp.src props
			.pipe theo.plugins.transform 'ownWeb'
			.pipe theo.plugins.format 'scss'
			.pipe gulp.dest dest

	gulp.task 'theo-js', (done) ->
		gulp.src props
			.pipe theo.plugins.transform 'ownJs'
			.pipe theo.plugins.format 'js'
			.pipe gulp.dest dest

	theo.registerFormat 'js', (json, options) ->
		map = _.map json.propKeys, (key, index) ->
			item = json.props[index]
			key = "#{_.camelCase key}"
			"	\"#{key}\": #{item.value},"
		.join '\n'
		"module.exports = {\n#{map}\n}"

	theo.registerValueTransform('scss/easing',
		(prop, meta) -> prop.type is 'easing',
		(prop, meta) ->
			[a,b,c,d] = prop.value
			"cubic-bezier(#{a}, #{b}, #{c}, #{d})"
	)
	theo.registerValueTransform('scss/duration',
		(prop, meta) -> prop.type is 'duration',
		(prop, meta) -> prop.value + 's'
	)
	theo.registerValueTransform('js/string',
		(prop, meta) -> not (prop.type in ['easing', 'size', 'duration', 'font-weight']),
		(prop, meta) -> "\"#{prop.value}\""
	)
	theo.registerValueTransform('js/easing',
		(prop, meta) -> prop.type is 'easing',
		(prop, meta) -> "[#{prop.value}]"
	)
	theo.registerValueTransform('js/duration',
		(prop, meta) -> prop.type is 'duration',
		(prop, meta) -> prop.value * 1000
	)

	theo.registerTransform 'ownJs', [
		'js/string'
		'js/easing'
		'js/duration'
	]
	theo.registerTransform 'ownWeb', [
		'color/rgb'
		'scss/easing'
		'scss/duration'
	]