Commit bc02a66b authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] integrate inline-svg again and trigger live reloading

parent 2cb0db22
...@@ -11,6 +11,8 @@ const stylelint = require('stylelint'); ...@@ -11,6 +11,8 @@ const stylelint = require('stylelint');
const reporter = require('postcss-reporter'); const reporter = require('postcss-reporter');
const scss = require('postcss-scss'); const scss = require('postcss-scss');
const postcssSass = require('@csstools/postcss-sass'); const postcssSass = require('@csstools/postcss-sass');
const browserSync = require('browser-sync');
const InlineSvg = require('@sgalinski/inline-svg');
/** /**
* The CSS task takes care of compiling Sass and running the CSS QA tasks * The CSS task takes care of compiling Sass and running the CSS QA tasks
...@@ -26,6 +28,8 @@ module.exports = class Css extends Task { ...@@ -26,6 +28,8 @@ module.exports = class Css extends Task {
this._runQa(); this._runQa();
} else if(_subTask === 'compile') { } else if(_subTask === 'compile') {
this._runCompile(); this._runCompile();
} else if(_subTask === 'svg') {
this._svg();
} else { } else {
this._logTaskNotDefined(`css:${_subTask}`); this._logTaskNotDefined(`css:${_subTask}`);
} }
...@@ -39,6 +43,7 @@ module.exports = class Css extends Task { ...@@ -39,6 +43,7 @@ module.exports = class Css extends Task {
* Kicks off the compile task * Kicks off the compile task
*/ */
async _runCompile() { async _runCompile() {
await this._svg();
const files = await globby([ const files = await globby([
`${this._path}/${this._config.directories.sass}/*.scss`, `${this._path}/${this._config.directories.sass}/*.scss`,
'!**/_*.scss' '!**/_*.scss'
...@@ -92,38 +97,8 @@ module.exports = class Css extends Task { ...@@ -92,38 +97,8 @@ module.exports = class Css extends Task {
async _compile(_input, _output) { async _compile(_input, _output) {
this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...'); this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
const render = util.promisify(sass.render); const render = util.promisify(sass.render);
// let result;
const sourceMapPath = this._getSourceMapsPath(_output); const sourceMapPath = this._getSourceMapsPath(_output);
// try {
// result = await render({
// file: _input,
// outFile: _output,
// outputStyle: 'expanded',
// sourceMap: true,
// sourceMapEmbed: true,
// precision: 8
// });
// } catch(_error) {
// this._logger.error(_error.stack);
// }
// let css = await postcss([
// require('@csstools/postcss-sass')(/* node-sass options */)
// ], {
// syntax: scss
// }).process(
// fs.readFileSync(_input, 'utf-8')
// );
// let css = result;
// try {
// await this._writeFile(_output, css.css);
// await this._writeFile(sourceMapPath, css.map);
// } catch (_error) {
// return this._logger.error(_error.stack);
// }
let compiledSass = await render({ let compiledSass = await render({
file: _input, file: _input,
outFile: _output, outFile: _output,
...@@ -148,8 +123,13 @@ module.exports = class Css extends Task { ...@@ -148,8 +123,13 @@ module.exports = class Css extends Task {
await this._writeFile(_output, postProcessedCss.css); await this._writeFile(_output, postProcessedCss.css);
await this._writeFile(sourceMapPath, postProcessedCss.map); await this._writeFile(sourceMapPath, postProcessedCss.map);
// this._logger.success(`Written ${chalk.white(path.basename(_output))}`) const outFileName = path.basename(_output);
// this._logger.success(`Written ${chalk.white(path.basename(sourceMapPath))}`) const mapFileName = path.basename(sourceMapPath);
browserSync.reload([outFileName, mapFileName]);
this._logger.success(`Written ${chalk.white(outFileName)}`)
this._logger.success(`Written ${chalk.white(mapFileName)}`)
} }
/** /**
...@@ -174,4 +154,19 @@ module.exports = class Css extends Task { ...@@ -174,4 +154,19 @@ module.exports = class Css extends Task {
}); });
} }
/**
* Creates the inline-svg partial
*/
async _svg() {
const svgPartial = await new InlineSvg(
this._getFullPath(this._config.directories.svg),
{
template: 'sgc-core/inline-svg-template.mustache'
}
);
const partialFilePath = path.join(this._getFullPath(this._config.directories.sass), '_svg.scss');
this._logger.success(`Ẁritten ${partialFilePath}`);
return this._writeFile(partialFilePath, svgPartial);
}
} }
...@@ -20,7 +20,8 @@ module.exports = class Watch extends Task { ...@@ -20,7 +20,8 @@ module.exports = class Watch extends Task {
*/ */
async _watchCss() { async _watchCss() {
const files = await globby([ const files = await globby([
`${this._path}/${this._config.directories.sass}/**/*.scss` `${this._path}/${this._config.directories.sass}/**/*.scss`,
'!**/*_svg.scss'
].concat(this._config.css.excludeFromQa)); ].concat(this._config.css.excludeFromQa));
files.forEach(file => { files.forEach(file => {
......
...@@ -16,7 +16,6 @@ ${{{name}}}: "{{{inline}}}" {{width}} {{height}}; ...@@ -16,7 +16,6 @@ ${{{name}}}: "{{{inline}}}" {{width}} {{height}};
@if ($color) { @if ($color) {
$color: str-replace($color + '', '#', ''); $color: str-replace($color + '', '#', '');
background: transparent url(str-replace(nth($name, 1), '%23FFF', '%23' + $color)) no-repeat 50% 50%; background: transparent url(str-replace(nth($name, 1), '%23FFF', '%23' + $color)) no-repeat 50% 50%;
color: $color;
} @else { } @else {
background: transparent url(nth($name, 1)) no-repeat 50% 50%; background: transparent url(nth($name, 1)) no-repeat 50% 50%;
} }
......
...@@ -1683,6 +1683,17 @@ ...@@ -1683,6 +1683,17 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz",
"integrity": "sha512-KU/VDjC5RwtDUZiz3d+DHXJF2lp5hB9dn552TXIyptj8SH1vXmR40mG0JgGq03IlYsOgGfcv8xrLpSQ0YUMQdA==" "integrity": "sha512-KU/VDjC5RwtDUZiz3d+DHXJF2lp5hB9dn552TXIyptj8SH1vXmR40mG0JgGq03IlYsOgGfcv8xrLpSQ0YUMQdA=="
}, },
"@sgalinski/inline-svg": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@sgalinski/inline-svg/-/inline-svg-1.0.2.tgz",
"integrity": "sha512-8wyj+Vs5rlAhggilD8UQ6Pf9biYBMZ8lVHyyHNiQBZYzyQ1LwOdgyjna13m1GklhRyY/OJhP3Albf4+vJaCT8g==",
"requires": {
"globby": "^8.0.1",
"mustache": "^2.3.2",
"underscore": "^1.9.1",
"xml2js-parser": "^1.1.1"
}
},
"JSONStream": { "JSONStream": {
"version": "0.8.4", "version": "0.8.4",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz", "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
...@@ -8239,6 +8250,11 @@ ...@@ -8239,6 +8250,11 @@
"duplexer2": "0.0.2" "duplexer2": "0.0.2"
} }
}, },
"mustache": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.2.tgz",
"integrity": "sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ=="
},
"mute-stream": { "mute-stream": {
"version": "0.0.7", "version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
...@@ -13973,6 +13989,11 @@ ...@@ -13973,6 +13989,11 @@
"xtend": "^4.0.1" "xtend": "^4.0.1"
} }
}, },
"underscore": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz",
"integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg=="
},
"unherit": { "unherit": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
...@@ -14485,6 +14506,14 @@ ...@@ -14485,6 +14506,14 @@
"sax": ">=0.1.1" "sax": ">=0.1.1"
} }
}, },
"xml2js-parser": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/xml2js-parser/-/xml2js-parser-1.1.1.tgz",
"integrity": "sha1-kNw5+dhNA2rhD0Hm52apFVBETUQ=",
"requires": {
"sax": "^1.2.1"
}
},
"xmlhttprequest-ssl": { "xmlhttprequest-ssl": {
"version": "1.5.5", "version": "1.5.5",
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment