feat(gen): Generate CSS from Stylus

Add Stylus support alongside Sass, Less, and raw CSS, including Bootstrap-Stylus.
angular-fullstack · Jul 13, 2014 · 9d87a2c · 9d87a2c
1 parent 306fa12
commit 9d87a2c
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
diff --git a/app/templates/client/app/admin(auth)/admin(stylus).styl b/app/templates/client/app/admin(auth)/admin(stylus).styl
@@ -0,0 +1,2 @@
+.trash
+	color		rgb(209, 91, 71)
diff --git a/app/templates/client/app/app(stylus).styl 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
diff --git a/app/templates/client/app/main/main(stylus).styl 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,