{"id":16835,"library":"ignore-styles","title":"Ignore Styles","description":"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`.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/bkonkle/ignore-styles","tags":["javascript","webpack","css","testing"],"install":[{"cmd":"npm install ignore-styles","lang":"bash","label":"npm"},{"cmd":"yarn add ignore-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add ignore-styles","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Initializes the Node.js require hook with default ignored extensions.","symbol":"Basic Hook (ESM)","correct":"import 'ignore-styles'"},{"note":"The primary use is to activate the hook as a side effect, not to capture a return value for basic setup.","wrong":"const ignoreStyles = require('ignore-styles');","symbol":"Basic Hook (CommonJS)","correct":"require('ignore-styles')"},{"note":"The `register` function is the default export in ESM for customization. Named import is incorrect.","wrong":"import { register } from 'ignore-styles';","symbol":"Customize (ESM)","correct":"import register from 'ignore-styles'; register(['.css', '.scss']);"},{"note":"When using `require` in CommonJS, the customization function is available on the `.default` property of the module export.","wrong":"require('ignore-styles')(['.css', '.scss']);","symbol":"Customize (CommonJS)","correct":"require('ignore-styles').default(['.css', '.scss']);"}],"quickstart":{"code":"import register from 'ignore-styles';\nimport path from 'path';\n\n// Register with custom extensions and a handler for images\nregister(['.css', '.scss', '.sass', '.png', '.jpg'], (module, filename) => {\n  const ext = path.extname(filename);\n  if (['.png', '.jpg'].includes(ext)) {\n    // For image files, return just the basename\n    module.exports = path.basename(filename);\n  } else {\n    // For style files, return an empty object or a mock for CSS Modules\n    module.exports = {}; // or { className: 'mocked_class' } for react-css-modules\n  }\n});\n\n// Example usage in a test file (assuming a component 'MyComponent' imports styles and images)\n// import styles from './MyComponent.module.css';\n// import logo from './logo.png';\n\nconsole.log('ignore-styles hook registered.');\nconsole.log('This setup will prevent Node.js from throwing SyntaxErrors for .css, .scss, .sass, .png, and .jpg imports.');\nconsole.log('Image imports will resolve to their basename; style imports to an empty object.');","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `require('ignore-styles').default([extensions], handler)` for customization in CommonJS.","message":"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.","severity":"gotcha","affected_versions":">=1.2.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `ignore-styles` is loaded before your application code, typically via `mocha --require ignore-styles` or `node -r ignore-styles your-script.js`.","cause":"Node.js encountered a CSS or other asset file that it doesn't know how to parse during a `require` or `import` operation.","error":"SyntaxError: /path/to/component/style.css: Unexpected token (1:0)"},{"fix":"Change `require('ignore-styles')([extensions]);` to `require('ignore-styles').default([extensions]);`","cause":"Attempting to customize `ignore-styles` in a CommonJS module by directly calling the `require('ignore-styles')` result, instead of accessing the `.default` property.","error":"TypeError: (0 , _ignoreStyles2.default) is not a function"}],"ecosystem":"npm","meta_description":null}