Skip to content

Commit 8af6147

Browse files
kdinevkdinev
authored
Merge pull request #5093 from IgniteUI/sass
build(styles): use dart sass as the default styles compiler
2 parents 82e0478 + 6f769e5 commit 8af6147

File tree

5 files changed

+117
-136
lines changed

5 files changed

+117
-136
lines changed

‎gulpfile.js

+23-21
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ const ts = require('gulp-typescript');
1717
const path = require('path');
1818
const EventEmitter = require('events').EventEmitter;
1919

20+
sass.compiler = require('sass');
21+
2022
const STYLES = {
2123
SRC: './projects/igniteui-angular/src/lib/core/styles/themes/presets/*',
2224
DIST: './dist/igniteui-angular/styles',
@@ -119,9 +121,9 @@ gulp.task('copy-git-hooks', () => {
119121

120122
gulp.task('copy-migrations', () => {
121123
return gulp.src([
122-
'./projects/igniteui-angular/migrations/**/*.json',
123-
'!**/tsconfig.json'
124-
])
124+
'./projects/igniteui-angular/migrations/**/*.json',
125+
'!**/tsconfig.json'
126+
])
125127
.pipe(gulp.dest('./dist/igniteui-angular/migrations'));
126128
});
127129

@@ -154,24 +156,24 @@ gulp.task('typedoc-ts',
154156

155157
gulp.task('typedoc-js', ['typedoc:clean-js', 'typedoc-ts'], () => {
156158
gulp.src([
157-
`${TYPEDOC_THEME.SRC}/assets/js/lib/jquery-2.1.1.min.js`,
158-
`${TYPEDOC_THEME.SRC}/assets/js/lib/underscore-1.6.0.min.js`,
159-
`${TYPEDOC_THEME.SRC}/assets/js/lib/backbone-1.1.2.min.js`,
160-
`${TYPEDOC_THEME.SRC}/assets/js/lib/lunr.min.js`,
161-
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/igviewer.common.js`,
162-
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/igviewer.renderingService.js`,
163-
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/nav-initializer.js`,
164-
`${TYPEDOC_THEME.SRC}/assets/js/src/versioning/tag-versions.req.js`,
165-
`${TYPEDOC_THEME.SRC}/assets/js/main.js`
166-
])
159+
`${TYPEDOC_THEME.SRC}/assets/js/lib/jquery-2.1.1.min.js`,
160+
`${TYPEDOC_THEME.SRC}/assets/js/lib/underscore-1.6.0.min.js`,
161+
`${TYPEDOC_THEME.SRC}/assets/js/lib/backbone-1.1.2.min.js`,
162+
`${TYPEDOC_THEME.SRC}/assets/js/lib/lunr.min.js`,
163+
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/igviewer.common.js`,
164+
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/igviewer.renderingService.js`,
165+
`${TYPEDOC_THEME.SRC}/assets/js/src/navigation/nav-initializer.js`,
166+
`${TYPEDOC_THEME.SRC}/assets/js/src/versioning/tag-versions.req.js`,
167+
`${TYPEDOC_THEME.SRC}/assets/js/main.js`
168+
])
167169
.pipe(concat('main.js'))
168170
.pipe(gulp.dest(`${TYPEDOC_THEME.DIST}/assets/js/`));
169171
});
170172

171173
gulp.task('typedoc-theme-ts', () => {
172174
gulp.src([
173-
`${path.join(TYPEDOC_THEME.SRC, "assets", "js", "src", "theme.ts")}`
174-
])
175+
`${path.join(TYPEDOC_THEME.SRC, "assets", "js", "src", "theme.ts")}`
176+
])
175177
.pipe(ts({
176178
target: "es2017",
177179
moduleResolution: 'node',
@@ -193,10 +195,10 @@ gulp.task('typedoc-images', ['typedoc:clean-images'], () => {
193195

194196
gulp.task('typedoc-hbs', ['typedoc:clean-hbs'], () => {
195197
return gulp.src([
196-
`${TYPEDOC_THEME.SRC}/layouts/**/*`,
197-
`${TYPEDOC_THEME.SRC}/partials/**/*`,
198-
`${TYPEDOC_THEME.SRC}/templates/**/*`,
199-
], {
198+
`${TYPEDOC_THEME.SRC}/layouts/**/*`,
199+
`${TYPEDOC_THEME.SRC}/partials/**/*`,
200+
`${TYPEDOC_THEME.SRC}/templates/**/*`,
201+
], {
200202
base: `${TYPEDOC_THEME.SRC}`
201203
})
202204
.pipe(gulp.dest(`${TYPEDOC_THEME.DIST}`));
@@ -266,8 +268,8 @@ gulp.task('sassdoc-js', ['sassdoc-ts'], () => {
266268
gulp.src([
267269
`${SASSDOC_THEME.JS_DIR}/**/!(tag-versions.req)*.js`,
268270
])
269-
.pipe(concat('main.js'))
270-
.pipe(gulp.dest(SASSDOC_THEME.JS_DIR));
271+
.pipe(concat('main.js'))
272+
.pipe(gulp.dest(SASSDOC_THEME.JS_DIR));
271273
})
272274

273275
gulp.task('sassdoc-build', [

‎projects/igniteui-angular/package.json

+85-86
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,87 @@
11
{
2-
"name": "igniteui-angular",
3-
"version": "0.0.1",
4-
"description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
5-
"author": "Infragistics",
6-
"license": "Apache-2.0",
7-
"repository": {
8-
"type": "git",
9-
"url": "https://github.com/IgniteUI/igniteui-angular"
10-
},
11-
"bugs": {
12-
"url": "https://github.com/IgniteUI/igniteui-angular/issues"
13-
},
14-
"keywords": [
15-
"angular",
16-
"angular6",
17-
"UI components",
18-
"grid",
19-
"data table",
20-
"tree grid",
21-
"tree table",
22-
"hierarchical grid",
23-
"hierarchical table",
24-
"combo",
25-
"drop down",
26-
"select",
27-
"auto complete",
28-
"autocomplete",
29-
"list",
30-
"tabs",
31-
"calendar",
32-
"date picker",
33-
"datepicker",
34-
"time picker",
35-
"timepicker",
36-
"dialog",
37-
"navbar",
38-
"navdrawer",
39-
"toggle",
40-
"carousel",
41-
"avatar",
42-
"badge",
43-
"card",
44-
"checkbox",
45-
"switch",
46-
"input",
47-
"bottom nav",
48-
"mask",
49-
"button",
50-
"radio",
51-
"drag drop",
52-
"drag",
53-
"drop",
54-
"chips",
55-
"chip",
56-
"icon",
57-
"progress bar",
58-
"circular progress",
59-
"linear progress",
60-
"slider",
61-
"toast",
62-
"snackbar",
63-
"banner",
64-
"expansion panel",
65-
"excel export",
66-
"csv export"
67-
],
68-
"dependencies": {
69-
"@types/hammerjs": "^2.0.36",
70-
"hammerjs": "^2.0.8",
71-
"jszip": "^3.1.5"
72-
},
73-
"peerDependencies": {
74-
"@angular/common": "^8.0.0",
75-
"@angular/core": "^8.0.0",
76-
"@angular/animations": "^8.0.0",
77-
"@angular/forms": "^8.0.0",
78-
"node-sass": "^4.9.0",
79-
"web-animations-js": "^2.3.1"
80-
},
81-
"devDependencies": {
82-
"igniteui-cli": "~4.1.0"
83-
},
84-
"ng-update": {
85-
"migrations": "./migrations/migration-collection.json"
86-
},
87-
"schematics": "./schematics/collection.json"
2+
"name": "igniteui-angular",
3+
"version": "0.0.1",
4+
"description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
5+
"author": "Infragistics",
6+
"license": "Apache-2.0",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/IgniteUI/igniteui-angular"
10+
},
11+
"bugs": {
12+
"url": "https://github.com/IgniteUI/igniteui-angular/issues"
13+
},
14+
"keywords": [
15+
"angular",
16+
"angular6",
17+
"UI components",
18+
"grid",
19+
"data table",
20+
"tree grid",
21+
"tree table",
22+
"hierarchical grid",
23+
"hierarchical table",
24+
"combo",
25+
"drop down",
26+
"select",
27+
"auto complete",
28+
"autocomplete",
29+
"list",
30+
"tabs",
31+
"calendar",
32+
"date picker",
33+
"datepicker",
34+
"time picker",
35+
"timepicker",
36+
"dialog",
37+
"navbar",
38+
"navdrawer",
39+
"toggle",
40+
"carousel",
41+
"avatar",
42+
"badge",
43+
"card",
44+
"checkbox",
45+
"switch",
46+
"input",
47+
"bottom nav",
48+
"mask",
49+
"button",
50+
"radio",
51+
"drag drop",
52+
"drag",
53+
"drop",
54+
"chips",
55+
"chip",
56+
"icon",
57+
"progress bar",
58+
"circular progress",
59+
"linear progress",
60+
"slider",
61+
"toast",
62+
"snackbar",
63+
"banner",
64+
"expansion panel",
65+
"excel export",
66+
"csv export"
67+
],
68+
"dependencies": {
69+
"@types/hammerjs": "^2.0.36",
70+
"hammerjs": "^2.0.8",
71+
"jszip": "^3.1.5"
72+
},
73+
"peerDependencies": {
74+
"@angular/common": "^8.0.0",
75+
"@angular/core": "^8.0.0",
76+
"@angular/animations": "^8.0.0",
77+
"@angular/forms": "^8.0.0",
78+
"web-animations-js": "^2.3.1"
79+
},
80+
"devDependencies": {
81+
"igniteui-cli": "~4.1.0"
82+
},
83+
"ng-update": {
84+
"migrations": "./migrations/migration-collection.json"
85+
},
86+
"schematics": "./schematics/collection.json"
8887
}

‎projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,10 @@
110110
/// @param {Color} $l3-color - The ambient color.
111111
/// @returns {String} - A string to be used as box-shadow value.
112112
@function _elevation($elevation, $l1-color, $l2-color, $l3-color) {
113-
@return unquote(
114-
'#{map-get(_l1-shadows($l1-color), $elevation)},
115-
#{map-get(_l2-shadows($l2-color), $elevation)},
116-
#{map-get(_l3-shadows($l3-color), $elevation)}'
113+
@return unquote(#{
114+
map-get(_l1-shadows($l1-color), $elevation),
115+
map-get(_l2-shadows($l2-color), $elevation),
116+
map-get(_l3-shadows($l3-color), $elevation)}
117117
);
118118
}
119119

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-')
236236
@content;
237237
}
238238
} @else {
239-
#{implode($mx)} {
239+
#{selector-append($mx...)} {
240240
@content;
241241
}
242242
}
@@ -253,7 +253,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-')
253253
@content;
254254
}
255255
} @else {
256-
#{$first} #{implode($mx)} {
256+
#{$first} #{selector-append($mx...)} {
257257
@content;
258258
}
259259
}
@@ -307,7 +307,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-')
307307
$mod-classes: append($mod-classes, #{bem-selector($block: $this, $m: $mod)})
308308
}
309309
@at-root {
310-
#{implode($mod-classes)} {
310+
#{selector-append($mod-classes...)} {
311311
@content;
312312
}
313313
}

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

+2-22
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,10 @@
104104
/// @param {number|string} $variant [500] - The target color shade from the color palette.
105105
/// @returns {Color} White if no palette, color, and variant matches found.
106106
@function igx-color($palette, $color, $variant: 500) {
107-
@if map-exists($palette) and map-key-exists($palette, $color) and map-key-exists($color, $variant) {
107+
@if type-of($palette) == 'map' and map-has-key($palette, $color) {
108108
@return map-get(map-get($palette, $color), $variant);
109109
}
110+
110111
@return #fff;
111112
}
112113

@@ -325,27 +326,6 @@
325326
);
326327
}
327328

328-
/// Returns a string from the elements of a list.
329-
/// Works recursively so the elements can be lists themselves.
330-
/// @param {List} $list [null] - A list of elements to be turned into a string.
331-
/// @param {String} $glue [''] - A string symbol to join the elements by.
332-
@function implode($list, $glue: '') {
333-
$result: null;
334-
@for $i from 1 through length($list) {
335-
$e: nth($list, $i);
336-
@if type-of($e) == list {
337-
$result: $result#{implode($e, $glue)};
338-
} @else {
339-
$result: if(
340-
$i != length($list),
341-
$result#{$e}#{$glue},
342-
$result#{$e}
343-
);
344-
}
345-
}
346-
@return $result;
347-
}
348-
349329
/// Returns a CSS property value. It could return either css '--var' or
350330
/// a plain string value based on theme configuration.
351331
/// @access public

0 commit comments

Comments
 (0)