Skip to content

Commit 9d87a2c

Browse files
author
darryl.snow
committed
feat(gen): Generate CSS from Stylus
Add Stylus support alongside Sass, Less, and raw CSS, including Bootstrap-Stylus.
1 parent 306fa12 commit 9d87a2c

File tree

14 files changed

+155
-14
lines changed

14 files changed

+155
-14
lines changed

‎app/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
7878
name: "stylesheet",
7979
default: 1,
8080
message: "What would you like to write stylesheets with?",
81-
choices: [ "CSS", "Sass", "Less"],
81+
choices: [ "CSS", "Stylus", "Sass", "Less"],
8282
filter: function( val ) { return val.toLowerCase(); }
8383
}, {
8484
type: "list",
@@ -188,6 +188,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
188188
if(this.filters['html']) extensions.push('html');
189189
if(this.filters['jade']) extensions.push('jade');
190190
if(this.filters['css']) extensions.push('css');
191+
if(this.filters['stylus']) extensions.push('styl');
191192
if(this.filters['sass']) extensions.push('scss');
192193
if(this.filters['less']) extensions.push('less');
193194

‎app/templates/Gruntfile.js‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,17 @@ module.exports = function (grunt) {
7070
'<%%= yeoman.client %>/{app,components}/**/*.mock.js'
7171
],
7272
tasks: ['newer:jshint:all', 'karma']
73-
},<% if(filters.sass) { %>
73+
},<% if(filters.stylus) { %>
74+
injectStylus: {
75+
files: [
76+
'<%%= yeoman.client %>/{app,components}/**/*.styl'],
77+
tasks: ['injector:stylus']
78+
},
79+
stylus: {
80+
files: [
81+
'<%%= yeoman.client %>/{app,components}/**/*.styl'],
82+
tasks: ['stylus', 'autoprefixer']
83+
},<% } %><% if(filters.sass) { %>
7484
injectSass: {
7585
files: [
7686
'<%%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
@@ -394,13 +404,15 @@ module.exports = function (grunt) {
394404
concurrent: {
395405
server: [<% if(filters.coffee) { %>
396406
'coffee',<% } %><% if(filters.jade) { %>
397-
'jade',<% } %><% if(filters.sass) { %>
407+
'jade',<% } %><% if(filters.stylus) { %>
408+
'stylus',<% } %><% if(filters.sass) { %>
398409
'sass',<% } %><% if(filters.less) { %>
399410
'less',<% } %>
400411
],
401412
test: [<% if(filters.coffee) { %>
402413
'coffee',<% } %><% if(filters.jade) { %>
403-
'jade',<% } %><% if(filters.sass) { %>
414+
'jade',<% } %><% if(filters.stylus) { %>
415+
'stylus',<% } %><% if(filters.sass) { %>
404416
'sass',<% } %><% if(filters.less) { %>
405417
'less',<% } %>
406418
],
@@ -415,7 +427,8 @@ module.exports = function (grunt) {
415427
},
416428
dist: [<% if(filters.coffee) { %>
417429
'coffee',<% } %><% if(filters.jade) { %>
418-
'jade',<% } %><% if(filters.sass) { %>
430+
'jade',<% } %><% if(filters.stylus) { %>
431+
'stylus',<% } %><% if(filters.sass) { %>
419432
'sass',<% } %><% if(filters.less) { %>
420433
'less',<% } %>
421434
'imagemin',
@@ -499,6 +512,22 @@ module.exports = function (grunt) {
499512
ext: '.js'
500513
}]
501514
}
515+
},<% } %><% if(filters.stylus) { %>
516+
517+
// Compiles Stylus to CSS
518+
stylus: {
519+
server: {
520+
options: {
521+
paths: [
522+
'<%%= yeoman.client %>/bower_components',
523+
'<%%= yeoman.client %>/app',
524+
'<%%= yeoman.client %>/components'
525+
]
526+
},
527+
files: {
528+
'.tmp/app/app.css' : '<%%= yeoman.client %>/app/app.styl'
529+
}
530+
}
502531
},<% } %><% if(filters.sass) { %>
503532

504533
// Compiles Sass to CSS
@@ -557,7 +586,26 @@ module.exports = function (grunt) {
557586
'!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.mock.js']
558587
]
559588
}
560-
},<% if(filters.sass) { %>
589+
},<% if(filters.stylus) { %>
590+
591+
// Inject component styl into app.styl
592+
stylus: {
593+
options: {
594+
transform: function(filePath) {
595+
filePath = filePath.replace('/client/app/', '');
596+
filePath = filePath.replace('/client/components/', '');
597+
return '@import \'' + filePath + '\';';
598+
},
599+
starttag: '// injector',
600+
endtag: '// endinjector'
601+
},
602+
files: {
603+
'<%%= yeoman.client %>/app/app.styl': [
604+
'<%%= yeoman.client %>/{app,components}/**/*.styl',
605+
'!<%%= yeoman.client %>/app/app.styl'
606+
]
607+
}
608+
},<% } %><% if(filters.sass) { %>
561609

562610
// Inject component scss into app.scss
563611
sass: {

‎app/templates/_bower.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
"angular": ">=1.2.*",
66
"json3": "~3.3.1",
77
"es5-shim": "~3.0.1",
8-
"jquery": "~1.11.0",
9-
"bootstrap-sass-official": "~3.1.1",
8+
"jquery": "~1.11.0",<% if(filters.sass) { %>
9+
"bootstrap-sass-official": "~3.1.1",<% } %><% if(filters.stylus) { %>
10+
"bootstrap-stylus": "latest",<% } %>
1011
"bootstrap": "~3.1.1",
1112
"angular-resource": ">=1.2.*",
1213
"angular-cookies": ">=1.2.*",

‎app/templates/_package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,9 @@
6060
"grunt-protractor-runner": "^0.2.4",
6161
"grunt-asset-injector": "^0.1.0",
6262
"grunt-karma": "~0.8.2",
63-
"grunt-mocha-test": "~0.10.2",
64-
"grunt-contrib-sass": "^0.7.3",
63+
"grunt-mocha-test": "~0.10.2",<% if(filters.sass) { %>
64+
"grunt-contrib-sass": "^0.7.3",<% } %><% if(filters.stylus) { %>
65+
"grunt-contrib-stylus": "latest",<% } %>
6566
"jit-grunt": "^0.5.0",
6667
"time-grunt": "~0.3.1",
6768
"grunt-express-server": "~0.4.17",

‎app/templates/client/app/account(auth)/login/login(stylus).styl‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Colors
2+
// --------------------------------------------------
3+
4+
$btnText = #fff
5+
$btnTextAlt = #000
6+
7+
$btnFacebookBackground = #3B5998
8+
$btnFacebookBackgroundHighlight = #133783
9+
10+
$btnTwitterBackground = #2daddc
11+
$btnTwitterBackgroundHighlight = #0271bf
12+
13+
$btnGithubBackground = #fafafa
14+
$btnGithubBackgroundHighlight = #ccc
15+
16+
$btnGooglePlusBackground = #dd4b39
17+
$btnGooglePlusBackgroundHighlight = #c53727
18+
19+
20+
// Social buttons
21+
// --------------------------------------------------
22+
23+
.btn-facebook
24+
button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight)
25+
26+
.btn-twitter
27+
button-variant($btnText, $btnTwitterBackground, $btnTwitterBackgroundHighlight)
28+
29+
.btn-github
30+
button-variant($btnTextAlt, $btnGithubBackground, $btnGithubBackgroundHighlight)
31+
32+
.btn-google-plus
33+
button-variant($btnText, $btnGooglePlusBackground, $btnGooglePlusBackgroundHighlight)

‎app/templates/client/app/admin(auth)/admin(stylus).styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.trash
2+
color rgb(209, 91, 71)

‎app/templates/client/app/app(stylus).styl‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
$icon-font-path = "/bower_components/bootstrap-stylus/fonts"
2+
$fa-font-path = "/bower_components/font-awesome/fonts"
3+
4+
@import "bootstrap-stylus/stylus/bootstrap"
5+
@import "font-awesome/css/font-awesome.css"
6+
7+
//
8+
// App-wide Styles
9+
//
10+
11+
.browsehappy
12+
background #ccc
13+
color #000
14+
margin 0.2em 0
15+
padding 0.2em 0
16+
17+
// Responsive: Portrait tablets and up
18+
@media screen and (min-width: 768px)
19+
.container
20+
max-width 730px
21+
22+
// Component styles are injected through grunt
23+
// injector
24+
@import "account/login/login"
25+
@import "admin/admin"
26+
@import "main/main"
27+
// endinjector

‎app/templates/client/app/main/main(stylus).styl‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.thing-form
2+
margin 20px 0
3+
4+
#banner
5+
border-bottom none
6+
margin-top -20px
7+
8+
#banner h1
9+
font-size 60px
10+
letter-spacing -1px
11+
line-height 1
12+
13+
.hero-unit
14+
background #4393B9
15+
color #F5F5F5
16+
padding 30px 15px
17+
position relative
18+
text-align center
19+
text-shadow 0 1px 0 rgba(0, 0, 0, 0.1)
20+
21+
.footer
22+
border-top 1px solid #E5E5E5
23+
margin-top 70px
24+
padding 30px 0
25+
text-align center

‎app/templates/server/api/thing/thing.controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ exports.index = function(req, res) {<% if (!filters.mongoose) { %>
1717
res.json([
1818
{
1919
name : 'Development Tools',
20-
info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Sass, CoffeeScript, and Less.'
20+
info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Stylus, Sass, CoffeeScript, and Less.'
2121
}, {
2222
name : 'Server and Client integration',
2323
info : 'Built with a powerful and fun stack: MongoDB, Express, AngularJS, and Node.'

‎app/templates/server/config/seed(mongoose).js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ var Thing = require('../api/thing/thing.model');
1111
Thing.find({}).remove(function() {
1212
Thing.create({
1313
name : 'Development Tools',
14-
info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Sass, CoffeeScript, and Less.'
14+
info : 'Integration with popular tools such as Bower, Grunt, Karma, Mocha, JSHint, Node Inspector, Livereload, Protractor, Jade, Stylus, Sass, CoffeeScript, and Less.'
1515
}, {
1616
name : 'Server and Client integration',
1717
info : 'Built with a powerful and fun stack: MongoDB, Express, AngularJS, and Node.'

0 commit comments

Comments
 (0)