From 9d87a2c8d0a0227fee3878eb7e9c4f101bd995e0 Mon Sep 17 00:00:00 2001 From: "darryl.snow" Date: Sun, 13 Jul 2014 22:49:37 +0800 Subject: [PATCH] feat(gen): Generate CSS from Stylus Add Stylus support alongside Sass, Less, and raw CSS, including Bootstrap-Stylus. --- app/index.js | 3 +- app/templates/Gruntfile.js | 58 +++++++++++++++++-- app/templates/_bower.json | 5 +- app/templates/_package.json | 5 +- .../account(auth)/login/login(stylus).styl | 33 +++++++++++ .../client/app/admin(auth)/admin(stylus).styl | 2 + app/templates/client/app/app(stylus).styl | 27 +++++++++ .../client/app/main/main(stylus).styl | 25 ++++++++ .../server/api/thing/thing.controller.js | 2 +- app/templates/server/config/seed(mongoose).js | 2 +- readme.md | 3 +- test/fixtures/bower.json | 1 + test/fixtures/package.json | 1 + test/test-file-creation.js | 2 +- 14 files changed, 155 insertions(+), 14 deletions(-) create mode 100644 app/templates/client/app/account(auth)/login/login(stylus).styl create mode 100644 app/templates/client/app/admin(auth)/admin(stylus).styl create mode 100644 app/templates/client/app/app(stylus).styl create mode 100644 app/templates/client/app/main/main(stylus).styl diff --git a/app/index.js b/app/index.js index 8b97c1b5c..9346e2187 100644 --- a/app/index.js +++ b/app/index.js @@ -78,7 +78,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({ name: "stylesheet", default: 1, message: "What would you like to write stylesheets with?", - choices: [ "CSS", "Sass", "Less"], + choices: [ "CSS", "Stylus", "Sass", "Less"], filter: function( val ) { return val.toLowerCase(); } }, { type: "list", @@ -188,6 +188,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({ if(this.filters['html']) extensions.push('html'); if(this.filters['jade']) extensions.push('jade'); if(this.filters['css']) extensions.push('css'); + if(this.filters['stylus']) extensions.push('styl'); if(this.filters['sass']) extensions.push('scss'); if(this.filters['less']) extensions.push('less'); diff --git a/app/templates/Gruntfile.js b/app/templates/Gruntfile.js index f73d1c3da..b55f43732 100644 --- a/app/templates/Gruntfile.js +++ b/app/templates/Gruntfile.js @@ -70,7 +70,17 @@ module.exports = function (grunt) { '<%%= yeoman.client %>/{app,components}/**/*.mock.js' ], tasks: ['newer:jshint:all', 'karma'] - },<% if(filters.sass) { %> + },<% if(filters.stylus) { %> + injectStylus: { + files: [ + '<%%= yeoman.client %>/{app,components}/**/*.styl'], + tasks: ['injector:stylus'] + }, + stylus: { + files: [ + '<%%= yeoman.client %>/{app,components}/**/*.styl'], + tasks: ['stylus', 'autoprefixer'] + },<% } %><% if(filters.sass) { %> injectSass: { files: [ '<%%= yeoman.client %>/{app,components}/**/*.{scss,sass}'], @@ -394,13 +404,15 @@ module.exports = function (grunt) { concurrent: { server: [<% if(filters.coffee) { %> 'coffee',<% } %><% if(filters.jade) { %> - 'jade',<% } %><% if(filters.sass) { %> + 'jade',<% } %><% if(filters.stylus) { %> + 'stylus',<% } %><% if(filters.sass) { %> 'sass',<% } %><% if(filters.less) { %> 'less',<% } %> ], test: [<% if(filters.coffee) { %> 'coffee',<% } %><% if(filters.jade) { %> - 'jade',<% } %><% if(filters.sass) { %> + 'jade',<% } %><% if(filters.stylus) { %> + 'stylus',<% } %><% if(filters.sass) { %> 'sass',<% } %><% if(filters.less) { %> 'less',<% } %> ], @@ -415,7 +427,8 @@ module.exports = function (grunt) { }, dist: [<% if(filters.coffee) { %> 'coffee',<% } %><% if(filters.jade) { %> - 'jade',<% } %><% if(filters.sass) { %> + 'jade',<% } %><% if(filters.stylus) { %> + 'stylus',<% } %><% if(filters.sass) { %> 'sass',<% } %><% if(filters.less) { %> 'less',<% } %> 'imagemin', @@ -499,6 +512,22 @@ module.exports = function (grunt) { ext: '.js' }] } + },<% } %><% if(filters.stylus) { %> + + // Compiles Stylus to CSS + stylus: { + server: { + options: { + paths: [ + '<%%= yeoman.client %>/bower_components', + '<%%= yeoman.client %>/app', + '<%%= yeoman.client %>/components' + ] + }, + files: { + '.tmp/app/app.css' : '<%%= yeoman.client %>/app/app.styl' + } + } },<% } %><% if(filters.sass) { %> // Compiles Sass to CSS @@ -557,7 +586,26 @@ module.exports = function (grunt) { '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.mock.js'] ] } - },<% if(filters.sass) { %> + },<% if(filters.stylus) { %> + + // Inject component styl into app.styl + stylus: { + options: { + transform: function(filePath) { + filePath = filePath.replace('/client/app/', ''); + filePath = filePath.replace('/client/components/', ''); + return '@import \'' + filePath + '\';'; + }, + starttag: '// injector', + endtag: '// endinjector' + }, + files: { + '<%%= yeoman.client %>/app/app.styl': [ + '<%%= yeoman.client %>/{app,components}/**/*.styl', + '!<%%= yeoman.client %>/app/app.styl' + ] + } + },<% } %><% if(filters.sass) { %> // Inject component scss into app.scss sass: { diff --git a/app/templates/_bower.json b/app/templates/_bower.json index da84d2b87..07e0a939f 100644 --- a/app/templates/_bower.json +++ b/app/templates/_bower.json @@ -5,8 +5,9 @@ "angular": ">=1.2.*", "json3": "~3.3.1", "es5-shim": "~3.0.1", - "jquery": "~1.11.0", - "bootstrap-sass-official": "~3.1.1", + "jquery": "~1.11.0",<% if(filters.sass) { %> + "bootstrap-sass-official": "~3.1.1",<% } %><% if(filters.stylus) { %> + "bootstrap-stylus": "latest",<% } %> "bootstrap": "~3.1.1", "angular-resource": ">=1.2.*", "angular-cookies": ">=1.2.*", diff --git a/app/templates/_package.json b/app/templates/_package.json index 1f8d19c62..daac870e2 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -60,8 +60,9 @@ "grunt-protractor-runner": "^0.2.4", "grunt-asset-injector": "^0.1.0", "grunt-karma": "~0.8.2", - "grunt-mocha-test": "~0.10.2", - "grunt-contrib-sass": "^0.7.3", + "grunt-mocha-test": "~0.10.2",<% if(filters.sass) { %> + "grunt-contrib-sass": "^0.7.3",<% } %><% if(filters.stylus) { %> + "grunt-contrib-stylus": "latest",<% } %> "jit-grunt": "^0.5.0", "time-grunt": "~0.3.1", "grunt-express-server": "~0.4.17", diff --git a/app/templates/client/app/account(auth)/login/login(stylus).styl b/app/templates/client/app/account(auth)/login/login(stylus).styl new file mode 100644 index 000000000..89880d018 --- /dev/null +++ b/app/templates/client/app/account(auth)/login/login(stylus).styl @@ -0,0 +1,33 @@ +// Colors +// -------------------------------------------------- + +$btnText = #fff +$btnTextAlt = #000 + +$btnFacebookBackground = #3B5998 +$btnFacebookBackgroundHighlight = #133783 + +$btnTwitterBackground = #2daddc +$btnTwitterBackgroundHighlight = #0271bf + +$btnGithubBackground = #fafafa +$btnGithubBackgroundHighlight = #ccc + +$btnGooglePlusBackground = #dd4b39 +$btnGooglePlusBackgroundHighlight = #c53727 + + +// Social buttons +// -------------------------------------------------- + +.btn-facebook + button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight) + +.btn-twitter + button-variant($btnText, $btnTwitterBackground, $btnTwitterBackgroundHighlight) + +.btn-github + button-variant($btnTextAlt, $btnGithubBackground, $btnGithubBackgroundHighlight) + +.btn-google-plus + button-variant($btnText, $btnGooglePlusBackground, $btnGooglePlusBackgroundHighlight) \ No newline at end of file diff --git a/app/templates/client/app/admin(auth)/admin(stylus).styl b/app/templates/client/app/admin(auth)/admin(stylus).styl new file mode 100644 index 000000000..1d0648d18 --- /dev/null +++ b/app/templates/client/app/admin(auth)/admin(stylus).styl @@ -0,0 +1,2 @@ +.trash + color rgb(209, 91, 71) \ No newline at end of file diff --git a/app/templates/client/app/app(stylus).styl b/app/templates/client/app/app(stylus).styl new file mode 100644 index 000000000..a1fe6fb88 --- /dev/null +++ b/app/templates/client/app/app(stylus).styl @@ -0,0 +1,27 @@ +$icon-font-path = "/bower_components/bootstrap-stylus/fonts" +$fa-font-path = "/bower_components/font-awesome/fonts" + +@import "bootstrap-stylus/stylus/bootstrap" +@import "font-awesome/css/font-awesome.css" + +// +// App-wide Styles +// + +.browsehappy + background #ccc + color #000 + margin 0.2em 0 + padding 0.2em 0 + +// Responsive: Portrait tablets and up +@media screen and (min-width: 768px) + .container + max-width 730px + +// Component styles are injected through grunt +// injector +@import "account/login/login" +@import "admin/admin" +@import "main/main" +// endinjector \ No newline at end of file diff --git a/app/templates/client/app/main/main(stylus).styl b/app/templates/client/app/main/main(stylus).styl new file mode 100644 index 000000000..7e05602b0 --- /dev/null +++ b/app/templates/client/app/main/main(stylus).styl @@ -0,0 +1,25 @@ +.thing-form + margin 20px 0 + +#banner + border-bottom none + margin-top -20px + +#banner h1 + font-size 60px + letter-spacing -1px + line-height 1 + +.hero-unit + background #4393B9 + color #F5F5F5 + padding 30px 15px + position relative + text-align center + text-shadow 0 1px 0 rgba(0, 0, 0, 0.1) + +.footer + border-top 1px solid #E5E5E5 + margin-top 70px + padding 30px 0 + text-align center \ No newline at end of file diff --git a/app/templates/server/api/thing/thing.controller.js b/app/templates/server/api/thing/thing.controller.js index e2e4d4c5b..0e1edb970 100644 --- a/app/templates/server/api/thing/thing.controller.js +++ b/app/templates/server/api/thing/thing.controller.js @@ -17,7 +17,7 @@ exports.index = function(req, res) {<% if (!filters.mongoose) { %> res.json([ { name : 'Development Tools', - info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Sass, CoffeeScript, and Less.' + info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Stylus, Sass, CoffeeScript, and Less.' }, { name : 'Server and Client integration', info : 'Built with a powerful and fun stack: MongoDB, Express, AngularJS, and Node.' diff --git a/app/templates/server/config/seed(mongoose).js b/app/templates/server/config/seed(mongoose).js index cc589d90c..27ab19417 100644 --- a/app/templates/server/config/seed(mongoose).js +++ b/app/templates/server/config/seed(mongoose).js @@ -11,7 +11,7 @@ var Thing = require('../api/thing/thing.model'); Thing.find({}).remove(function() { Thing.create({ name : 'Development Tools', - info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Sass, CoffeeScript, and Less.' + info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Stylus, Sass, CoffeeScript, and Less.' }, { name : 'Server and Client integration', info : 'Built with a powerful and fun stack: MongoDB, Express, AngularJS, and Node.' diff --git a/readme.md b/readme.md index a2ba242b3..877ad3b77 100644 --- a/readme.md +++ b/readme.md @@ -37,7 +37,7 @@ Run `grunt` for building, `grunt serve` for preview, and `grunt serve:dist` for * Scripts: `JavaScript`, `CoffeeScript` * Markup: `HTML`, `Jade` -* Stylesheets: `CSS`, `Sass`, `Less`, +* Stylesheets: `CSS`, `Stylus`, `Sass`, `Less`, * Angular Routers: `ngRoute`, `ui-router` **Server** @@ -53,6 +53,7 @@ A grunt task looks for new files in your `client/app` and `client/components` fo * `less` files into `client/app.less` * `scss` files into `client/app.scss` +* `stylus` files into `client/app.styl` * `css` files into `client/index.html` * `js` files into `client/index.html` * `coffeescript` temp `js` files into `client/index.html` diff --git a/test/fixtures/bower.json b/test/fixtures/bower.json index f49789d0f..dea41015a 100644 --- a/test/fixtures/bower.json +++ b/test/fixtures/bower.json @@ -6,6 +6,7 @@ "es5-shim": "~3.0.1", "jquery": "~1.11.0", "bootstrap-sass-official": "~3.1.1", + "bootstrap-stylus": "latest", "bootstrap": "~3.1.1", "angular-resource": ">=1.2.*", "angular-cookies": ">=1.2.*", diff --git a/test/fixtures/package.json b/test/fixtures/package.json index 5458ed301..00a34ddec 100644 --- a/test/fixtures/package.json +++ b/test/fixtures/package.json @@ -43,6 +43,7 @@ "grunt-contrib-coffee": "^0.10.1", "grunt-contrib-jade": "^0.11.0", "grunt-contrib-less": "^0.11.0", + "grunt-contrib-stylus": "latest", "grunt-google-cdn": "~0.4.0", "grunt-newer": "~0.7.0", "grunt-ngmin": "~0.0.3", diff --git a/test/test-file-creation.js b/test/test-file-creation.js index e18f76c05..d8fce41cf 100644 --- a/test/test-file-creation.js +++ b/test/test-file-creation.js @@ -197,7 +197,7 @@ describe('angular-fullstack generator', function () { helpers.mockPrompt(gen, { script: 'coffee', markup: 'jade', - stylesheet: 'less', + stylesheet: 'stylus', router: 'ngroute', mongoose: false, auth: false,