Skip to content
This repository was archived by the owner on Aug 5, 2020. It is now read-only.

Commit 0912db3

Browse files
author
Marlow Payne
committed
Migrate SCSS compilation to libsass
1 parent e9f2868 commit 0912db3

File tree

9 files changed

+133
-81
lines changed

9 files changed

+133
-81
lines changed

‎CHANGELOG‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
- Remove Zepto support in favor of jQuery
44
- Migrate all dependencies to NPM, remove Bower
55
- Migrate JS linting to eslint
6+
- Migrate SCSS compilation to libsass
67
5.1.2
78
- Ensuring disabled items don't close on close
89
5.0.1

‎Gruntfile.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,16 @@ module.exports = function(grunt) {
2828

2929
// load npm tasks
3030
var npmTasks = [
31+
'grunt-autoprefixer',
32+
'grunt-contrib-clean',
33+
'grunt-contrib-connect',
34+
'grunt-contrib-copy',
3135
'grunt-contrib-uglify',
3236
'grunt-contrib-watch',
33-
'grunt-contrib-connect',
34-
'grunt-css',
3537
'grunt-eslint',
36-
'grunt-shell',
37-
'grunt-contrib-clean',
38-
'grunt-contrib-copy',
39-
'grunt-autoprefixer',
40-
'grunt-contrib-sass',
4138
'grunt-mocha-phantomjs',
39+
'grunt-sass',
40+
'grunt-shell',
4241
'grunt-version'
4342
];
4443

@@ -49,7 +48,7 @@ module.exports = function(grunt) {
4948
});
5049

5150
grunt.registerTask('serve', ['build', 'connect:server', 'watch']);
52-
grunt.registerTask('build', ['lint:prod', 'copy', 'uglify', 'version:all', 'sass', 'autoprefixer', 'cssmin']);
51+
grunt.registerTask('build', ['lint:prod', 'copy', 'uglify', 'version:all', 'sass', 'autoprefixer']);
5352
grunt.registerTask('release', ['lint:prod', 'test', 'shell:tagRelease']);
5453
grunt.registerTask('test', ['build', 'connect:test', 'mocha_phantomjs']);
5554
grunt.registerTask('test:browser', ['build', 'connect:test:keepalive']);

‎dist/bellows-theme.css‎

Lines changed: 68 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.bellows {
22
-webkit-box-sizing: border-box;
3-
box-sizing: border-box; }
3+
box-sizing: border-box;
4+
}
45

56
.bellows__header {
67
position: relative;
@@ -9,50 +10,72 @@
910
border-width: 0 0 1px;
1011
background: #3498db;
1112
color: white;
12-
-webkit-tap-highlight-color: transparent; }
13-
.bellows__header:active {
14-
background: #2980b9; }
15-
.bellows__header::before, .bellows__header::after {
16-
content: '';
17-
position: absolute;
18-
top: 50%;
19-
right: 20px;
20-
z-index: 2;
21-
display: block;
22-
width: 16px;
23-
height: 4px;
24-
margin-top: -2px;
25-
background: white;
26-
pointer-events: none;
27-
-webkit-transition: -webkit-transform 0.25s ease-in-out;
28-
transition: transform 0.25s ease-in-out; }
29-
.bellows__header::before {
30-
content: '';
31-
-webkit-transform: rotate(0deg);
32-
-ms-transform: rotate(0deg);
33-
transform: rotate(0deg); }
34-
.bellows__header::after {
35-
-webkit-transform: rotate(90deg);
36-
-ms-transform: rotate(90deg);
37-
transform: rotate(90deg); }
38-
.bellows__item.bellows--is-open > .bellows__header::before, .bellows__item.bellows--is-opening > .bellows__header::before {
39-
-webkit-transform: rotate(180deg);
40-
-ms-transform: rotate(180deg);
41-
transform: rotate(180deg); }
42-
.bellows__item.bellows--is-open > .bellows__header::after, .bellows__item.bellows--is-opening > .bellows__header::after {
43-
-webkit-transform: rotate(360deg);
44-
-ms-transform: rotate(360deg);
45-
transform: rotate(360deg); }
46-
.bellows__item:last-child > .bellows__header {
47-
border-bottom: 0; }
48-
.bellows__header h1,
49-
.bellows__header h2,
50-
.bellows__header h3,
51-
.bellows__header h4 {
52-
margin: 0; }
13+
-webkit-tap-highlight-color: transparent;
14+
}
15+
16+
.bellows__header:active {
17+
background: #2980b9;
18+
}
19+
20+
.bellows__header::before, .bellows__header::after {
21+
content: '';
22+
position: absolute;
23+
top: 50%;
24+
right: 20px;
25+
z-index: 2;
26+
display: block;
27+
width: 16px;
28+
height: 4px;
29+
margin-top: -2px;
30+
background: white;
31+
pointer-events: none;
32+
-webkit-transition: -webkit-transform 0.25s ease-in-out;
33+
transition: transform 0.25s ease-in-out;
34+
}
35+
36+
.bellows__header::before {
37+
content: '';
38+
-webkit-transform: rotate(0deg);
39+
-ms-transform: rotate(0deg);
40+
transform: rotate(0deg);
41+
}
42+
43+
.bellows__header::after {
44+
-webkit-transform: rotate(90deg);
45+
-ms-transform: rotate(90deg);
46+
transform: rotate(90deg);
47+
}
48+
49+
.bellows__item.bellows--is-open > .bellows__header::before,
50+
.bellows__item.bellows--is-opening > .bellows__header::before {
51+
-webkit-transform: rotate(180deg);
52+
-ms-transform: rotate(180deg);
53+
transform: rotate(180deg);
54+
}
55+
56+
.bellows__item.bellows--is-open > .bellows__header::after,
57+
.bellows__item.bellows--is-opening > .bellows__header::after {
58+
-webkit-transform: rotate(360deg);
59+
-ms-transform: rotate(360deg);
60+
transform: rotate(360deg);
61+
}
62+
63+
.bellows__item:last-child > .bellows__header {
64+
border-bottom: 0;
65+
}
66+
67+
.bellows__header h1,
68+
.bellows__header h2,
69+
.bellows__header h3,
70+
.bellows__header h4 {
71+
margin: 0;
72+
}
5373

5474
.bellows__content {
5575
padding: 20px;
56-
border: 1px solid #ecf0f1; }
57-
.bellows__content .bellows {
58-
margin-top: 20px; }
76+
border: 1px solid #ecf0f1;
77+
}
78+
79+
.bellows__content .bellows {
80+
margin-top: 20px;
81+
}

‎dist/bellows-theme.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bellows.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
.bellows__item:not(.bellows--is-open) > .bellows__content {
2-
display: none; }
2+
display: none;
3+
}
34

45
.bellows__item.bellows--is-open > .bellows__content-wrapper,
56
.bellows__item.bellows--is-closing > .bellows__content-wrapper {
6-
display: block; }
7+
display: block;
8+
}
79

810
.bellows__content-wrapper {
9-
display: none; }
11+
display: none;
12+
}

‎dist/bellows.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@
1414
"grunt-contrib-clean": "0.5.0",
1515
"grunt-contrib-connect": "0.9.0",
1616
"grunt-contrib-copy": "0.4.1",
17-
"grunt-contrib-sass": "0.8.1",
1817
"grunt-contrib-uglify": "0.8.1",
1918
"grunt-contrib-watch": "0.5.3",
20-
"grunt-css": "0.5.4",
2119
"grunt-eslint": "17.3.2",
2220
"grunt-mocha-phantomjs": "0.3.2",
2321
"grunt-open": "0.2.3",
22+
"grunt-sass": "1.1.0",
2423
"grunt-shell": "0.2.2",
2524
"grunt-version": "0.3.3",
2625
"mobify-code-style": "^2.4.2",
27-
"mocha": "1.14.0"
26+
"mocha": "1.14.0",
27+
"node-sass-import-once": "1.2.0"
2828
},
2929
"license": "MIT",
3030
"bugs": {

‎tasks/config/cssmin.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎tasks/config/sass.js‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,55 @@
11
module.exports = function(grunt) {
2+
var importOnce = require('node-sass-import-once');
3+
24
return {
3-
dist: {
5+
min: {
46
options: {
5-
style: 'nested',
6-
sourcemap: 'none'
7+
outputStyle: 'compressed',
8+
includePaths: [
9+
'src/style/',
10+
'node_modules/'
11+
],
12+
importer: importOnce,
13+
importOnce: {
14+
index: false,
15+
css: false
16+
}
717
},
818
files: [{
919
expand: true,
10-
cwd: 'src/style',
11-
src: ['*.scss'],
12-
dest: 'dist',
13-
ext: '.css'
20+
cwd: 'src/style/',
21+
src: [
22+
'**/*.scss',
23+
'!node_modules/**/*.scss'
24+
],
25+
dest: 'dist/',
26+
ext: '.min.css',
27+
}]
28+
},
29+
unmin: {
30+
options: {
31+
outputStyle: 'expanded',
32+
includePaths: [
33+
'src/style/',
34+
'node_modules/'
35+
],
36+
importer: importOnce,
37+
importOnce: {
38+
index: false,
39+
css: false
40+
},
41+
indentWidth: 2
42+
},
43+
files: [{
44+
expand: true,
45+
cwd: 'src/style/',
46+
src: [
47+
'**/*.scss',
48+
'!node_modules/**/*.scss'
49+
],
50+
dest: 'dist/',
51+
ext: '.css',
1452
}]
1553
}
1654
};
17-
};
55+
};

0 commit comments

Comments
 (0)