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');
const reporter = require('postcss-reporter');
const scss = require('postcss-scss');
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
......@@ -26,6 +28,8 @@ module.exports = class Css extends Task {
this._runQa();
} else if(_subTask === 'compile') {
this._runCompile();
} else if(_subTask === 'svg') {
this._svg();
} else {
this._logTaskNotDefined(`css:${_subTask}`);
}
......@@ -39,6 +43,7 @@ module.exports = class Css extends Task {
* Kicks off the compile task
*/
async _runCompile() {
await this._svg();
const files = await globby([
`${this._path}/${this._config.directories.sass}/*.scss`,
'!**/_*.scss'
......@@ -92,37 +97,7 @@ module.exports = class Css extends Task {
async _compile(_input, _output) {
this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
const render = util.promisify(sass.render);
// let result;
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({
file: _input,
......@@ -148,8 +123,13 @@ module.exports = class Css extends Task {
await this._writeFile(_output, postProcessedCss.css);
await this._writeFile(sourceMapPath, postProcessedCss.map);
// this._logger.success(`Written ${chalk.white(path.basename(_output))}`)
// this._logger.success(`Written ${chalk.white(path.basename(sourceMapPath))}`)
const outFileName = path.basename(_output);
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 {
});
}
/**
* 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 {
*/
async _watchCss() {
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));
files.forEach(file => {
......
......@@ -16,7 +16,6 @@ ${{{name}}}: "{{{inline}}}" {{width}} {{height}};
@if ($color) {
$color: str-replace($color + '', '#', '');
background: transparent url(str-replace(nth($name, 1), '%23FFF', '%23' + $color)) no-repeat 50% 50%;
color: $color;
} @else {
background: transparent url(nth($name, 1)) no-repeat 50% 50%;
}
......
......@@ -1683,6 +1683,17 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz",
"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": {
"version": "0.8.4",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
......@@ -8239,6 +8250,11 @@
"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": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
......@@ -13973,6 +13989,11 @@
"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": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
......@@ -14485,6 +14506,14 @@
"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": {
"version": "1.5.5",
"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