From: Geoff Kimball Date: Fri, 11 Mar 2016 20:06:03 +0000 (-0800) Subject: Get Sass compilation in customizer task working X-Git-Tag: v6.2.1~30^2~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3555affd06e88bf30696df2ac3781f578fe6af89;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Get Sass compilation in customizer task working --- diff --git a/customizer/config.yml b/customizer/config.yml new file mode 100644 index 000000000..11bd709cb --- /dev/null +++ b/customizer/config.yml @@ -0,0 +1,180 @@ +grid: + sass: grid + +typography: + sass: typography + +button: + sass: button + +forms: + sass: forms + +input_range: + sass: range-input + +accordion: + sass: accordion + js: accordion + js_utils: + - keyboard + - motion + +accordion_menu: + sass: accordion-menu + js: accordionMenu + js_utils: + - keyboard + - motion + - nest + +badge: + sass: badge + +breadcrumbs: + sass: breadcrumbs + +button_group: + sass: button-group + +callout: + sass: callout + +close_button: + sass: close-button + +drilldown_menu: + sass: drilldown-menu + js: drilldown + js_utils: + - keyboard + - motion + - nest + +dropdown: + sass: dropdown + js: dropdown + js_utils: + - keyboard + - box + - triggers + +dropdown_menu: + sass: dropdown-menu + js: dropdownMenu + js_utils: + - keyboard + - motion + - box + - nest + +flex_video: + sass: flex-video + +interchange: + js: interchange + js_utils: + - triggers + - timerAndImageLoader + +label: + sass: label + +magellan: + js: magellan + js_utils: + - motion + +media_object: + sass: media-object + +menu: + sass: menu + +off_canvas: + sass: off-canvas + +orbit: + sass: orbit + js: orbit + js_utils: + - motion + - timerAndImageLoader + - keyboard + - touch + +progress_bar: + sass: progress-bar + +progress_element: + sass: progress-element + +meter_element: + sass: meter-element + +slider: + sass: slider + js: slider + js_utils: + - box + - motion + - triggers + - mediaQuery + +sticky: + sass: sticky + js: sticky + js_utils: + - triggers + - mediaQuery + +reveal: + sass: reveal + js: reveal + js_utils: + - box + - motion + - triggers + - mediaQuery + +switch: + sass: switch + +table: + sass: table + +tabs: + sass: tabs + js: tabs + js_utils: + - keyboard + - timerAndImageLoader + +thumbnail: + sass: thumbnail + +title_bar: + sass: title-bar + +togger: + js: toggler + js_utils: + - motion + +tooltip: + sass: tooltip + js: tooltip + js_utils: + - box + - triggers + - mediaQuery + - motion + +top_bar: + sass: top-bar + +visibility: + sass: visibility-classes + +float: + sass: float-classes diff --git a/customizer/lib/js.js b/customizer/lib/js.js new file mode 100644 index 000000000..cf8c8b69d --- /dev/null +++ b/customizer/lib/js.js @@ -0,0 +1,28 @@ +var unique = require('array-uniq'); + +module.exports = function(config, modules) { + var files = ['core']; + var utils = []; + var libraries = []; + + for (var i in modules) { + var name = modules[i]; + + // Check if the module has JS files + if (config[name] && config[name].js) { + libraries = libraries.push(config[name].js); + + // Check if the module has dependencies + if (config[name].js_utils) { + utils = utils.concat(config[name].js_utils); + } + } + } + + utils = unique(utils); + files = files.concat(utils, libraries); + + return files.map(function(file) { + return 'foundation.' + file + '.js'; + }); +} diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js new file mode 100644 index 000000000..0d50bc59c --- /dev/null +++ b/customizer/lib/sass.js @@ -0,0 +1,43 @@ +var format = require('util').format; +var multiline = require('multiline'); + +var SASS_TEMPLATE = multiline(function() {/* + @charset 'utf-8'; + + // Variables go here + %s + + // Core imports go here + @import 'foundation'; + @import 'motion-ui'; + + // Modules go here + %s + + // Motion UI goes here + @include motion-ui-transitions; + @include motion-ui-animations; +*/}); + +module.exports = function(config, modules, variables) { + var CONFIG = config; + var variableList = []; + var exportList = []; + + // Create variable overrides code + for (var i in variables) { + var name = i.replace('_', '-'); + variableList.push(`$${name}: ${variables[i]}`); + } + + // Create module exports with @include + for (var i in modules) { + var name = modules[i]; + + if (CONFIG[name] && CONFIG[name].sass) { + exportList.push(`@include foundation-${CONFIG[name].sass};`); + } + } + + return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n ')) +} diff --git a/gulp/customizer.js b/gulp/customizer.js new file mode 100644 index 000000000..3ff3f950b --- /dev/null +++ b/gulp/customizer.js @@ -0,0 +1,40 @@ +var gulp = require('gulp'); +var File = require('vinyl'); +var sassBuild = require('../customizer/lib/sass'); +var jsGlob = require('../customizer/lib/js'); +var fs = require('fs'); +var yaml = require('js-yaml').safeLoad; +var sass = require('gulp-sass'); +var Readable = require('stream').Readable; +var source = require('vinyl-source-stream'); + +var CUSTOMIZER_CONFIG; +var MODULE_LIST = ['accordion', 'tabs']; + +gulp.task('customizer:loadConfig', function(done) { + fs.readFile('customizer/config.yml', function(err, data) { + if (err) throw err; + CUSTOMIZER_CONFIG = yaml(data.toString()); + done(); + }); +}); + +gulp.task('customizer:sass', ['customizer:loadConfig'], function(done) { + var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, {}); + + var stream = new Readable({ objectMode: true }); + stream._read = function() {}; + stream.push(new File({ + path: 'foundation.scss', + contents: new Buffer(sassFile) + })); + + return stream + .pipe(sass({ + includePaths: [ + 'scss', + 'node_modules/motion-ui/src' + ] + })) + .pipe(gulp.dest('.customizer/css')); +}); diff --git a/package.json b/package.json index 2c92e16ad..5c72658c4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "license": "MIT", "devDependencies": { + "array-uniq": "^1.0.2", "babel-core": "^6.3.26", "babel-eslint": "^5.0.0", "babel-plugin-transform-es2015-arrow-functions": "^6.3.13", @@ -59,9 +60,11 @@ "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.1.0", "inquirer": "^0.11.4", + "js-yaml": "^3.5.4", "mocha": "^2.3.3", "mocha-phantomjs": "^4.0.2", "motion-ui": "^1.1.0", + "multiline": "^1.0.2", "octophant": "^1.0.0", "opener": "^1.4.1", "panini": "^1.1.1", @@ -72,7 +75,9 @@ "run-sequence": "^1.1.4", "sass-true": "^2.0.3", "sinon": "^1.17.3", - "supercollider": "^1.4.0" + "supercollider": "^1.4.0", + "vinyl": "^1.1.1", + "vinyl-source-stream": "^1.1.0" }, "repository": { "type": "git",