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