ignore-styles

library5.0.1jsnpmunverified

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`.

testing

npm install ignore-styles

github ↗package ↗

INSTALL

IMPORT

SIG · IGNORE-STYLES

ignore-styles

testingjavascriptv5.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Basic Hook (ESM)

✓ import 'ignore-styles'

Initializes the Node.js require hook with default ignored extensions.

Basic Hook (CommonJS)

✓ require('ignore-styles')

✗ const ignoreStyles = 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)

✓ import register from 'ignore-styles'; register(['.css', '.scss']);

✗ import { register } from 'ignore-styles';

The `register` function is the default export in ESM for customization. Named import is incorrect.

Customize (CommonJS)

✓ require('ignore-styles').default(['.css', '.scss']);

✗ require('ignore-styles')(['.css', '.scss']);

When using `require` in CommonJS, the customization function is available on the `.default` property of the module export.

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.');

Debug

Known issues

gotchaThis 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`.

affects: >=1.0.0

gotchaWhen 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.

affects: >=1.2.0

gotchaMajor 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.

affects: >=2.0.0

Errors

Common errors & fixes

SyntaxError: /path/to/component/style.css: Unexpected token (1:0)

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

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]);`

Upgrade

Version history

5.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/bkonkle/ignore-styles ↗

packagehttps://www.npmjs.com/package/ignore-styles ↗