node-sass-selector-importer

node-sass-selector-importer

With selector importing, it is possible to import only certain CSS selectors form a file. This is especially useful if you want to import only a few CSS classes from a huge library or framework.

Usage

const sass = require('node-sass');
const selectorImporter = require('node-sass-selector-importer');

sass.render({
  ...
  importer: selectorImporter()
  ...
});

// Example:
@import '{ .btn, .btn-alert } from style.scss';

// Result:
.btn { }
.btn-alert { }

Transform imported selectors

// Example:
@import '{ .btn as .button, .btn-alert as .button--alert } from style.scss';

// Result:
.button { }
.button--alert { } // Transformed to match BEM syntax.

RegEx

// Example:
@import '{ /^\..+-alert/ } from style.scss';

// Result:
.box-alert { }
.btn-alert { }

// Example:
@import '{ /^\.btn(.*)/ as .button$1 } from style.scss';

// Result:
.button { }
.button-alert { }

Usage with Bootstrap

Bootstrap is a mighty and robust framework but most of the time you use only certain parts of it. There is the possibility to customize Bootstrap to your needs but this can be annoying and you still end up with more code than you need. Also you might want to use just some specific parts of Bootstrap but your project uses the BEM syntax for writing class names.

// This example uses the v4 dev version of the Bootstrap `alert` component:
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_alert.scss
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/border-radius';
@import 'bootstrap/scss/mixins/alert';
@import '{
  .alert,
  .alert-dismissible as .alert--dismissible,
  .close as .alert__close
} from bootstrap/scss/alert';

// Result:
.alert {
  padding: 15px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert--dismissible {
  padding-right: 35px;
}

.alert--dismissible .alert__close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

webpack

// webpack.config.js
const selectorImporter = require('node-sass-selector-importer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                importer: selectorImporter()
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
}

CLI

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

Upgrade from 4.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.

node-sass-magic-importer

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

Known issues

Multi level filtering

Selector filtering goes only one level deep. This means, if you're importing a file with selector 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 selectors 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