earshinov / extract-scss-variables

Extract SCSS variables, functions and mixins into a separate file.

@earshinov/extract-scss-variables

Extract SCSS variables, functions and mixins into a separate file.

Motivation

LESS provides reference imports to only import things like variables and mixins from the given file without affecting the compiled CSS: @import (reference) "foo.less".

In SCSS the same effect can be achieved by using node-sass custom importers like node-sass-filter-importer with its @import '[variables, mixins] from style.scss';.

Even so, it seems hard to setup, especially if node-sass is being used as part of Webpack or @angular/cli build process. In many cases you will find it more convenient to extract variables, functions etc. from the file you are interested in into a separate file and import that file normally. That’s what this little tool is for.

Usage

• yarn install --dev @earshinov/extract-scss-variables

• yarn run extract-scss-variables index.scss variables.scss

The last command will extract variables, functions and mixins from index.scss and its imported files into variables.scss.

Example input:

index.scss

@mixin defaultFont() {
    font-family: Rubik;
    font-weight: normal;
}

@import './button';

button.scss

$buttonBackgroundColor: #e0e0e0;
$buttonColor: black;
$buttonBorderRadius: 4px;

button, input[type=button], input[type=submit] {
    @include defaultFont;
    appearance: none;
    background-color: $buttonBackgroundColor;
    color: $buttonColor;
    border-radius: $buttonBorderRadius;
}

Example output:

index.scss:

@import './variables';

@import './button';

button.scss:

@import './variables';

button, input[type=button], input[type=submit] {
    @include defaultFont;
    appearance: none;
    background-color: $buttonBackgroundColor;
    color: $buttonColor;
    border-radius: $buttonBorderRadius;
}

variables.scss:

@mixin defaultFont() {
    font-family: Rubik;
    font-weight: normal;
}

$buttonBackgroundColor: #e0e0e0;
$buttonColor: black;
$buttonBorderRadius: 4px;

Development

• To install dependencies and run commands, use Yarn rather than npm

• To lint the code with ESLint, run yarn run lint

• To test the code with Jest, run yarn run test

• To build NPM package, run yarn run build

• To publish NPM package, run yarn run publish --access public. It is important to use yarn run publish instead of yarn publish to lint, test and build the code before publication. If you are wondering why the prepublish script is not used for this purpose, here is the reason.

Useful Links

Inspired by

• node-sass-filter-importer

• css-node-extract

SCSS manipulation is implemented using PostCSS:

• API documentation

• AST explorer (In the top menu, select CSS and postcss. In postcss options, select scss parser.)