Ignore Styles

5.0.1 · active · verified Wed Apr 22

ignore-styles is a utility that provides a Node.js `require` hook to prevent style and asset imports (like CSS, SASS, images, videos) from causing `SyntaxError` crashes when running JavaScript code directly in Node.js, typically during testing environments (e.g., Mocha) that don't process these file types. It is currently at version 5.0.1 and primarily sees updates to extend the list of default ignored file extensions, with major version increments reflecting these additions. A key differentiator is its specific purpose for Node.js execution *outside* of a Webpack build process, contrasting with Webpack-specific loaders like `ignore-loader`. It offers flexibility through a customizable list of file extensions to ignore and an optional custom handler function for more advanced scenarios, such as returning mock data for `react-css-modules`.

Common errors

```
SyntaxError: /path/to/component/style.css: Unexpected token (1:0)
```
cause Node.js encountered a CSS or other asset file that it doesn't know how to parse during a `require` or `import` operation.

fix Ensure `ignore-styles` is loaded before your application code, typically via `mocha --require ignore-styles` or `node -r ignore-styles your-script.js`.
```
TypeError: (0 , _ignoreStyles2.default) is not a function
```
cause Attempting to customize `ignore-styles` in a CommonJS module by directly calling the `require('ignore-styles')` result, instead of accessing the `.default` property.

fix Change `require('ignore-styles')([extensions]);` to `require('ignore-styles').default([extensions]);`

Warnings

gotcha This package is specifically designed for Node.js environments (e.g., testing with Mocha) where style/asset imports are not processed. It is NOT for use inside Webpack configurations; use a Webpack loader like `ignore-loader` for that purpose.
Fix: Ensure `ignore-styles` is only used in Node.js runtime environments outside of your build process. For Webpack, consider `ignore-loader` or `null-loader`.
gotcha When customizing the ignored extensions or providing a custom handler in CommonJS (Node.js `require`), the `register` function is accessible via the `.default` property of the module export. Direct invocation `require('ignore-styles')([extensions])` will fail.
Fix: Use `require('ignore-styles').default([extensions], handler)` for customization in CommonJS.
gotcha Major version updates (v2, v3, v4, v5) primarily add new default file extensions to be ignored. While these additions are generally non-breaking, they might subtly change behavior if your environment relies on a specific set of ignored files.
Fix: Review the release notes for each major version update to understand any new default extensions. If specific control is needed, explicitly pass your desired array of extensions to the `register` function.

Install

npm install ignore-styles npm
yarn add ignore-styles yarn
pnpm add ignore-styles pnpm

Imports

Basic Hook (ESM)
```
import 'ignore-styles'
```
Initializes the Node.js require hook with default ignored extensions.
Basic Hook (CommonJS)
wrong:
```
const ignoreStyles = require('ignore-styles');
```
correct:
```
require('ignore-styles')
```
The primary use is to activate the hook as a side effect, not to capture a return value for basic setup.
Customize (ESM)
wrong:
```
import { register } from 'ignore-styles';
```
correct:
```
import register from 'ignore-styles'; register(['.css', '.scss']);
```
The `register` function is the default export in ESM for customization. Named import is incorrect.
Customize (CommonJS)
wrong:
```
require('ignore-styles')(['.css', '.scss']);
```
correct:
```
require('ignore-styles').default(['.css', '.scss']);
```
When using `require` in CommonJS, the customization function is available on the `.default` property of the module export.

Quickstart

Demonstrates how to import and register `ignore-styles` with a custom list of extensions and a handler function to mock image and style imports for Node.js environments.

import register from 'ignore-styles';
import path from 'path';

// Register with custom extensions and a handler for images
register(['.css', '.scss', '.sass', '.png', '.jpg'], (module, filename) => {
  const ext = path.extname(filename);
  if (['.png', '.jpg'].includes(ext)) {
    // For image files, return just the basename
    module.exports = path.basename(filename);
  } else {
    // For style files, return an empty object or a mock for CSS Modules
    module.exports = {}; // or { className: 'mocked_class' } for react-css-modules
  }
});

// Example usage in a test file (assuming a component 'MyComponent' imports styles and images)
// import styles from './MyComponent.module.css';
// import logo from './logo.png';

console.log('ignore-styles hook registered.');
console.log('This setup will prevent Node.js from throwing SyntaxErrors for .css, .scss, .sass, .png, and .jpg imports.');
console.log('Image imports will resolve to their basename; style imports to an empty object.');

view raw JSON →