@thenja/concat-scss

Concat Scss

Concatenate scss / css files into one file

Features

• Base64 encode asset urls inline into the scss file
• Option available to copy assets to destination directory instead of base64 encoding them directly into the scss file
• Option to compile scss to css using node-sass
• Option to ignore certain @import statements or ignore whole chunks of scss code using start and end ignore comment tags

How to use

Installation

npm install @thenja/concat-scss --save-dev

Basic Usage

const ConcatScss = require('@thenja/concat-scss');

const concatScss = new ConcatScss();
const options = {
  src: './scss/index.scss',
  dest: './dist/scss/index.scss'
};
concatScss.concat(options)
.then((result) => {
  // the file contents output is also returned
  console.log(result.output);
}).catch((err) => {
  throw err;
});

Options

Option	Required	Description
src	required	The filepath to the source file
dest	required	The filepath to the output destination file
rootDir	optional	The root directory of the project, basically where the node_modules folder is found. By default, concat-scss will use process.cwd() to find the root directory, if by any chance this is wrong, you can manully pass it in
removeImports	optional	Remove / Ignore any imports you do not want in the output file (example below)
outputCss	optional	Default value: false. Use node-sass to compile the scss into css
copyAssetsToDest	optional	Default value: false. By default, all asset urls are base64 encoded inline in the scss files, however, if you want, you can copy the assets to the output directory (Refer to the detailed example below).
addAutoGeneratedComment	optional	Add a comment at the top of the file that states the code was auto generated and should not be modified

Examples

Remove / Ignore @import statements example

Scss file

@import "_variables";
@import "~bootstrap/scss/bootstrap.scss";

$testVar: #000;
.test {
  color: $testVar;
}

Concat-scss script

const ConcatScss = require('@thenja/concat-scss');

const concatScss = new ConcatScss();
const options = {
  src: './scss/index.scss',
  dest: './dist/scss/index.scss',
  removeImports: [ '~bootstrap/scss/bootstrap.scss' ]
};
concatScss.concat(options)
.then((result) => {
  // the file contents output is also returned
  console.log(result.output);
}).catch((err) => {
  throw err;
});

Copy assets to output directory example

The copyAssetsToDest option can either be a boolean value or an array of asset urls that you want to copy to the destination directory. If set to true, all assets will be copied to the destination directory.

In the example below, we will only copy the font asset icomoon.svg to the output destination directory, where as the fake-logo.png asset will still be base64 encoded inline.

Scss file

$color-primary: #000;
.logo {
  color: $color-primary;
  background-image: url("./fake-logo.png");
}

@font-face {
  font-family: 'icomoon';
  src:
    url('icomoon/fonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Concat-scss script

const ConcatScss = require('@thenja/concat-scss');

const concatScss = new ConcatScss();
const options = {
  src: './scss/index.scss',
  dest: './dist/scss/index.scss',
  copyAssetsToDest: [ 'icomoon/fonts/icomoon.svg' ],
  // copyAssetsToDest: true (all assets will be copied if set to true)
};
concatScss.concat(options)
.then((result) => {
  // the file contents output is also returned
  console.log(result.output);
}).catch((err) => {
  throw err;
});

Ignore chunks of scss code example

In your scss code, add the following comments, anything in between these comments will be excluded from the output

// concat-scss-ignore-start
$variableThatWillBeExcluded: #ccc;
// concat-scss-ignore-end

Development

npm run init - Setup the app for development (run once after cloning)

npm run dev - Run this command when you want to work on this app. It will compile typescript, run tests and watch for file changes.

Distribution

npm run build -- -v <version> - Create a distribution build of the app.

-v (version) - [Optional] Either "patch", "minor" or "major". Increase the version number in the package.json file.

The build command creates a /compiled directory which has all the javascript compiled code and typescript definitions. As well, a /dist directory is created that contains a minified javascript file.

Testing

Tests are automatically ran when you do a build.

npm run test - Run the tests. The tests will be ran in a nodejs environment. You can run the tests in a browser environment by opening the file /spec/in-browser/SpecRunner.html.

License

MIT © Nathan Anderson