feat(gen): Generate CSS from Stylus

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

Hide file tree

Showing 5 changed files with 29 additions and 28 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", "Stylus", "Sass", "Less"],
+        choices: [ "CSS", "Sass", "Stylus", "Less"],
         filter: function( val ) { return val.toLowerCase(); }
       },  {
         type: "list",

diff --git a/app/templates/Gruntfile.js b/app/templates/Gruntfile.js
@@ -522,7 +522,8 @@ module.exports = function (grunt) {
             '<%%= yeoman.client %>/bower_components',
             '<%%= yeoman.client %>/app',
             '<%%= yeoman.client %>/components'
-          ]
+          ],
+          "include css": true
         },
         files: {
           '.tmp/app/app.css' : '<%%= yeoman.client %>/app/app.styl'

diff --git a/app/templates/client/app/admin(auth)/admin(stylus).styl b/app/templates/client/app/admin(auth)/admin(stylus).styl
@@ -1,2 +1,2 @@
 .trash
-	color		rgb(209, 91, 71)
+    color rgb(209, 91, 71)
diff --git a/app/templates/client/app/app(stylus).styl b/app/templates/client/app/app(stylus).styl
@@ -1,23 +1,23 @@
-$icon-font-path = 	"/bower_components/bootstrap-stylus/fonts"
-$fa-font-path = 	"/bower_components/font-awesome/fonts"
+$icon-font-path = "/bower_components/bootstrap/dist/fonts"
+$fa-font-path = "/bower_components/font-awesome/fonts"
 
-@import 			"bootstrap-stylus/stylus/bootstrap"
-@import 			"font-awesome/css/font-awesome.css"
+@import "bootstrap/dist/css/bootstrap.css"
+@import "font-awesome/css/font-awesome.css"
 
 // 
 // App-wide Styles
 // 
 
 .browsehappy
-    background		#ccc
-    color			#000
-    margin			0.2em 0
-    padding			0.2em 0
+    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
+        max-width 730px
 
 // Component styles are injected through grunt
 // injector

diff --git a/app/templates/client/app/main/main(stylus).styl b/app/templates/client/app/main/main(stylus).styl
@@ -1,25 +1,25 @@
 .thing-form
-    margin				20px 0
+    margin 20px 0
 
 #banner
-    border-bottom		none
-    margin-top			-20px
+    border-bottom none
+    margin-top -20px
 
 #banner h1
-    font-size			60px
-    letter-spacing		-1px
-    line-height			1
+    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)
+    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
+    border-top 1px solid #E5E5E5
+    margin-top 70px
+    padding 30px 0
+    text-align center