Skip to content
Snippets Groups Projects

Feature split dependencies

Merged Feature split dependencies
feature_splitDependencies into feature_sgc5
Merged Michael Kessler requested to merge feature_splitDependencies into feature_sgc5
Compare
and
10 files
+ 1127
− 974
Compare changes
  • Side-by-side
  • Inline
Files
10
core/tasks/css.js
+ 63
− 63
const hirestime = require('hirestime');
const Task = require('../task');
const sass = require('sass-embedded');
const fs = require('fs');
const path = require('path');
const globby = require('globby');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const {pathToFileURL} = require('url');
const { pathToFileURL } = require('url');
const chalk = require('chalk');
const browserSync = require('browser-sync');
const InlineSvg = require('@sgalinski/inline-svg');
const ImageDimensions = require('@sgalinski/image-dimensions');
const {inlineSource} = require('inline-source');
const {argv} = require('yargs');
const { inlineSource } = require('inline-source');
const { argv } = require('yargs');
const Task = require('../task');
/**
* The CSS task takes care of compiling Sass and running the CSS QA tasks
*/
module.exports = class Css extends Task {
/**
* Start the build process
*
@@ -53,22 +51,18 @@ module.exports = class Css extends Task {
* Kicks off the compile task
*/
async _runCompile() {
let dependentTasks = [
this._svg()
];
let dependentTasks = [this._svg()];
await Promise.all(dependentTasks);
const files = await globby([
`${this._path}/${this._config.directories.sass}/*.scss`,
'!**/_*.scss'
'!**/_*.scss',
]);
const compilations = [];
files.forEach(file => {
files.forEach((file) => {
compilations.push(this._compile(file, this._getOutputPath(file)));
});
await Promise.all(compilations);
dependentTasks = [
this._abovethefold()
];
dependentTasks = [this._abovethefold()];
await Promise.all(dependentTasks);
}
@@ -86,12 +80,10 @@ module.exports = class Css extends Task {
* @param {String} _fileName The name of the input file
*/
_getOutputPath(_fileName) {
let newSuffix = this._config.cssPipeline.renameToDotMin
? '.min.css'
: '.css';
let fileName = path.basename(_fileName).replace('.scss', newSuffix);
const newSuffix = this._config.cssPipeline.renameToDotMin ? '.min.css' : '.css';
const fileName = path.basename(_fileName).replace('.scss', newSuffix);
let distDirectory = this._getFullPath(this._config.directories.css);
const distDirectory = this._getFullPath(this._config.directories.css);
return `${distDirectory}/${fileName}`;
}
@@ -102,9 +94,9 @@ module.exports = class Css extends Task {
* @param {String} _fileName The name of the CSS-file the sourceMap is associated with
*/
_getSourceMapsPath(_fileName) {
let fileName = path.basename(_fileName).replace('.css', '.css.map');
const fileName = path.basename(_fileName).replace('.css', '.css.map');
let sourceMapDirectory = this._getFullPath(this._config.directories.cssSourceMaps);
const sourceMapDirectory = this._getFullPath(this._config.directories.cssSourceMaps);
return `${sourceMapDirectory}/${fileName}`;
}
@@ -116,16 +108,17 @@ module.exports = class Css extends Task {
* @param {String} _output The path to the output file
*/
async _compile(_input, _output) {
this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
if (!this._isProduction()) {
this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
}
const sourceMapPath = this._getSourceMapsPath(_output);
const outFileName = path.basename(_output);
const mapFileName = path.basename(sourceMapPath);
const sassSettings = {
outFile: _output,
style: this._isProduction()
? 'compressed'
: 'expanded',
style: this._isProduction() ? 'compressed' : 'expanded',
sourceMap: this._config.cssPipeline.sourceMaps,
sourceMapIncludeSources: this._config.cssPipeline.sourceMaps,
importers: [
@@ -135,10 +128,10 @@ module.exports = class Css extends Task {
return new URL(pathToFileURL(url));
}
return null;
}
}
},
},
],
verbose: argv.v || argv.verbose
verbose: argv.v || argv.verbose,
};
if (argv.q || argv.quiet) {
@@ -149,12 +142,14 @@ module.exports = class Css extends Task {
try {
compiledSass = await sass.compileAsync(_input, sassSettings);
} catch (_error) {
this._handleError(`${_error.message} in ${_error.file} on line ${_error.line}:${_error.column}`);
this._handleError(
`${_error.message} in ${_error.file} on line ${_error.line}:${_error.column}`,
);
}
let cssString = this._imageDimensions(compiledSass.css.toString());
const cssString = this._imageDimensions(compiledSass.css.toString());
let postCssPlugins = [autoprefixer];
const postCssPlugins = [autoprefixer];
let postProcessedCss;
@@ -164,11 +159,11 @@ module.exports = class Css extends Task {
to: _output,
map: this._config.cssPipeline.sourceMaps
? {
annotation: sourceMapPath.replace(/^web/, ''),
inline: false,
prev: compiledSass.sourceMap
}
: false
annotation: sourceMapPath.replace(/^web/, ''),
inline: false,
prev: compiledSass.sourceMap,
}
: false,
});
} catch (_error) {
this._handleError(`${_error.message}`);
@@ -180,7 +175,7 @@ module.exports = class Css extends Task {
}
if (!this._isProduction()) {
browserSync.reload([outFileName, mapFileName]);
require('browser-sync').reload([outFileName, mapFileName]);
}
this._logger.success(`Written ${chalk.white(outFileName)}`);
@@ -195,19 +190,20 @@ module.exports = class Css extends Task {
async _svg() {
const svgFolderPath = this._getFullPath(this._config.directories.svg);
if (fs.existsSync(svgFolderPath)) {
const svgPartial = await new InlineSvg(
path.join(svgFolderPath, '**'),
{
template: 'sgc-core/inline-svg-template.mustache',
interceptor: svgData => Object.assign(svgData, {
const svgPartial = await new InlineSvg(path.join(svgFolderPath, '**'), {
template: 'sgc-core/inline-svg-template.mustache',
interceptor: (svgData) =>
Object.assign(svgData, {
variableName: svgData.name.toLowerCase(),
prefix: this._config.css.svgIconPrefix
? this._config.css.svgIconPrefix
: ''
})
}
: '',
}),
});
const partialFilePath = path.join(
this._getFullPath(this._config.directories.sass),
'_svg.scss',
);
const partialFilePath = path.join(this._getFullPath(this._config.directories.sass), '_svg.scss');
this._logger.success(`Written ${chalk.white(path.basename(partialFilePath))}`);
await this._writeFile(partialFilePath, svgPartial);
}
@@ -220,7 +216,7 @@ module.exports = class Css extends Task {
*/
_imageDimensions(_source) {
return new ImageDimensions(_source, {
imageBasePath: this._getFullPath(this._config.directories.images)
imageBasePath: this._getFullPath(this._config.directories.images),
}).process();
}
@@ -237,23 +233,27 @@ module.exports = class Css extends Task {
} else {
configs = [this._config.abovethefold];
}
await Promise.all(configs.map(config => async () => {
const filename = path.basename(config.template);
try {
let html = await inlineSource(config.template, {
compress: false
});
await Promise.all(
configs.map((config) => async () => {
const filename = path.basename(config.template);
try {
const html = await inlineSource(config.template, {
compress: false,
});
let distDirectory = config.dest;
await this._writeFile(path.join(distDirectory, filename), html);
} catch (_error) {
if (_error.message.indexOf('ENOENT: no such file') >= 0) {
this._logger.info(`Could not find abovethefold assets for ${this.extensionName}. Skip task.`);
} else {
this._handleError(_error.message);
const distDirectory = config.dest;
await this._writeFile(path.join(distDirectory, filename), html);
} catch (_error) {
if (_error.message.indexOf('ENOENT: no such file') >= 0) {
this._logger.info(
`Could not find abovethefold assets for ${this.extensionName}. Skip task.`,
);
} else {
this._handleError(_error.message);
}
}
}
this._logger.success(`Written ${chalk.white(path.basename(filename))}`);
}));
this._logger.success(`Written ${chalk.white(path.basename(filename))}`);
}),
);
}
};