node-sass-filter-importer

Filter certain elements from SCSS code.

Usage

1const sass = require('node-sass');
2const filterImporter = require('node-sass-filter-importer');
3
4sass.render({
5  ...
6  importer: filterImporter()
7  ...
8});

1// Example:
2@import '[variables, mixins] from style.scss';

1// style.scss:
2$variable1: 'value';
3$variable2: 'value';
4.selector { }
5@mixin mixin() { }
6
7// Result:
8$variable1: 'value';
9$variable2: 'value';
10@mixin mixin() { }

Filters

• at-rules: @media, @supports, @mixin,...
• functions: @function
• mixins: @mixin
• rules: .class-selector, #id-selector,...
• silent: Extract only nodes that do not compile to CSS code (mixins, placeholder selectors, variables,...)
• variables: $variable
• make-your-own: Define custom filters

Options

In the example below you can see the default configuration options.

• customFilters: Define custom node filters.

1const sass = require('node-sass');
2const filterImporter = require('node-sass-filter-importer');
3
4const options = {
5  customFilters: {
6    // Add a node filter for a specific min-width media query.
7    customMediaWidth: [
8      [
9        { property: 'type', value: 'atrule' },
10        { property: 'name', value: 'media' },
11        { property: 'params', value:'(min-width: 42em)' }
12      ]
13    ],
14    // Add a node filter for print media queries.
15    customMediaPrint: [
16      [
17        { property: 'type', value: 'atrule' },
18        { property: 'name', value: 'media' },
19        { property: 'params', value: 'print' }
20      ]
21    ]
22  }
23};
24
25sass.render({
26  ...
27  importer: filterImporter(options)
28  ...
29});

1// Sass file which implements filter importing.
2@import '[custom-media-width, custom-media-print] from file/with/at/rules';

1// file/with/at/_rules.scss
2@media (min-width: 42em) {
3  .custom-1-mq {
4    content: 'Custom 1 mq';
5  }
6}
7
8@media (min-width: 43em) {
9  .custom-2-mq {
10    content: 'Custom 1 mq';
11  }
12}
13
14@media print {
15  .custom-print-mq {
16    content: 'Custom print mq';
17  }
18}

1// CSS output – the `min-width: 43em` media query gets not imported.
2@media (min-width: 42em) {
3  .custom-1-mq {
4    content: 'Custom 1 mq';
5  }
6}
7
8@media print {
9  .custom-print-mq {
10    content: 'Custom print mq';
11  }
12}

webpack

1// webpack.config.js
2const filterImporter = require('node-sass-filter-importer');
3const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4
5module.exports = {
6  module: {
7    rules: [
8      {
9        test: /\.scss$/,
10        use: [
11          {
12            loader: MiniCssExtractPlugin.loader,
13          },
14          {
15            loader: 'css-loader'
16          },
17          {
18            loader: 'sass-loader',
19            options: {
20              sassOptions: {
21                importer: filterImporter()
22              }
23            }
24          }
25        ]
26      }
27    ]
28  },
29  plugins: [
30    new MiniCssExtractPlugin({
31      filename: 'style.css'
32    })
33  ]
34}

CLI

1node-sass --importer node_modules/node-sass-filter-importer/dist/cli.js -o dist src/index.scss

Upgrade from 1.x.x to 5.x.x

It is not possible anymore to set the includePaths option when initializing the importer. Use the node-sass includePaths option instead.

Why is there no 2.x, 3.x or 4.x version?

This module is maintained in one repository together with multiple other node-sass custom importers. The node-sass-magic-importer repository is using a monorepo approach with fixed versions for all packages. The projects maintained in the node-sass-magic-importer monorepo started out as separate repositories with separate versioning, so when they were integrated into the monorepo, the versions of all projects were raised to 5.0.0 and are in sync since then.

node-sass-magic-importer

This module is powered by node-sass-magic-importer.

Known issues

Multi level filtering

Filtering goes only one level deep. This means, if you're importing a file with filtering which is importing other files, those files are not filtered but imported as is. On a technical level, there is no good solution for this problem. One possibility would be to just pass the filters to all imports in the line but this carries the risk of filtering nodes on which one of the imported files might depend and therefore break the import. I might add this as an optional feature (which can be activated on demand) in the future – let me know if you're interested in multi level filter imports.

About

Author

Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner

License

MIT