hast-util-is-css-style

Common errors

• ERR_REQUIRE_ESM

  cause Attempting to import `hast-util-is-css-style` using CommonJS `require()` in a Node.js environment where it is exclusively an ESM package.
  fix Change `const {isCssStyle} = require('hast-util-is-css-style')` to `import {isCssStyle} from 'hast-util-is-css-style'` and ensure your Node.js environment supports ESM (e.g., by using `"type": "module"` in `package.json` or by using `.mjs` file extensions).

• TypeError: isCssStyle is not a function

  cause This typically happens in a CommonJS context when `require()` is used on an ESM-only package that exports named exports, or when `require()` is used on a mixed module that's interpreted incorrectly.
  fix As `hast-util-is-css-style` is ESM-only, ensure you are using `import {isCssStyle} from 'hast-util-is-css-style'` within an ESM context.

• ReferenceError: require is not defined

  cause You are trying to use `require` in an ESM module context (e.g., in a file with `"type": "module"` or `.mjs` extension) where `require` is not globally available.
  fix Refactor your code to use `import` statements instead of `require` for all module dependencies. If you need to load CommonJS modules from ESM, consider `import pkg from 'some-cjs-package';` or `const cjsModule = await import('some-cjs-package');`.

Warnings

• breaking Version 3 of `hast-util-is-css-style` is an ECMAScript Module (ESM) only package. Attempting to `require()` it in CommonJS environments will result in an error.
  Fix: Ensure your project is configured for ESM, or use dynamic `import()` if you must load it from a CommonJS module. Upgrade to Node.js 16+.
• breaking This package, and the broader `unified` ecosystem, requires Node.js version 16 or newer for compatibility. Older Node.js versions are not supported.
  Fix: Upgrade your Node.js runtime to version 16 or higher.
• breaking Due to the adoption of the `exports` field in `package.json` across the `rehypejs` monorepo (e.g., in `7.0.0` for related packages), direct imports to internal paths (e.g., `hast-util-is-css-style/lib/foo.js`) are no longer supported. Only documented public APIs should be imported.
  Fix: Only use public import paths like `hast-util-is-css-style` for module imports.
• gotcha Working with HAST and HTML can introduce security vulnerabilities, specifically Cross-Site Scripting (XSS), if not handled carefully. `hast-util-is-css-style` itself is a utility for inspection and does not inherently mitigate these risks.
  Fix: When processing untrusted HTML, always use a sanitizer like `rehype-sanitize` in your processing pipeline to ensure the generated output is safe.

Install

• npm install hast-util-is-css-style npm
• yarn add hast-util-is-css-style yarn
• pnpm add hast-util-is-css-style pnpm

Imports

• isCssStyle
  wrong:

  const {isCssStyle} = require('hast-util-is-css-style')

  correct:

  import {isCssStyle} from 'hast-util-is-css-style'

  This package is ESM-only since version 3. CommonJS `require()` is not supported.
• Node

  import type {Node} from 'hast'

  While `isCssStyle` operates on `Node` from `unist` directly, `hast` provides a more specific type definition for HTML AST nodes which is commonly used in this ecosystem.
• h
  wrong:

  import h from 'hastscript'

  correct:

  import {h} from 'hastscript'

  Used for creating HAST nodes in examples and tests; `hastscript` uses named exports.

Quickstart

This example demonstrates how to use `isCssStyle` to identify HTML `<style>` elements containing CSS, handling various `type` attribute scenarios and non-style elements.

import {h} from 'hastscript';
import {isCssStyle} from 'hast-util-is-css-style';

// Create various HAST nodes to test
const styleNodeWithoutType = h('style', 'body { color: red; }');
const styleNodeWithCssType = h('style', {type: 'text/css'}, 'p { font-size: 16px; }');
const styleNodeWithMixedCaseCssType = h('style', {type: ' TEXT/CSS '}, 'a { text-decoration: none; }');
const styleNodeWithNonCssType = h('style', {type: 'text/foo'}, '.foo { display: block; }');
const scriptNode = h('script', 'console.log("hello");');
const divNode = h('div', 'Some content');

// Check if each node is considered a CSS style element
console.log('Is <style> (no type) CSS style?', isCssStyle(styleNodeWithoutType)); // Expected: true
console.log('Is <style type="text/css"> CSS style?', isCssStyle(styleNodeWithCssType)); // Expected: true
console.log('Is <style type=" TEXT/CSS "> CSS style?', isCssStyle(styleNodeWithMixedCaseCssType)); // Expected: true
console.log('Is <style type="text/foo"> CSS style?', isCssStyle(styleNodeWithNonCssType)); // Expected: false
console.log('Is <script> CSS style?', isCssStyle(scriptNode)); // Expected: false
console.log('Is <div> CSS style?', isCssStyle(divNode)); // Expected: false