PostCSS Inherit Parser

Common errors

• Error: Unknown word (at line X, column Y)

  cause The parser encountered an unrecognized token or custom `inherit` syntax that it could not process, likely because the `inheritParser` was not configured correctly or not applied as the PostCSS parser.
  fix Ensure `postcss-inherit-parser` is correctly passed to the `parser` option of `postcss.process` or `postcss.parse`. Verify that the `propertyRegExp` option is configured to match all custom inheritance keywords used in your CSS (e.g., `inherit`, `extend`).

• TypeError: (0 , _postcssInheritParser.parse) is not a function

  cause This error typically occurs when attempting to use ESM `import { parse } from 'postcss-inherit-parser'` for a package that only provides CommonJS exports, which is the case for this old, unmaintained module. The module is imported, but the `parse` symbol is not found as a named export.
  fix Change your import statement to use CommonJS syntax: `const parse = require('postcss-inherit-parser');`. Ensure your Node.js or bundling environment correctly processes CommonJS modules.

• The 'parse' function must be passed to the PostCSS 'parser' option, not 'plugins'.

  cause You've attempted to pass the `postcss-inherit-parser` function directly into the `postcss` plugin array or `.use()` method, rather than specifying it as the parser for the processing step. Parsers and plugins have distinct roles in PostCSS.
  fix Pass the parser function via the `parser` option in `postcss.process(css, { parser: inheritParser.parse })` or when creating a PostCSS processor: `postcss([yourPlugin], { parser: inheritParser.parse })`.

Warnings

• breaking The package is extremely old (v0.2.0, published 8 years ago) and appears to be unmaintained. There will be no further bug fixes, new features, or compatibility updates for newer Node.js versions, PostCSS versions (current PostCSS is v8+), or evolving CSS specifications. This can lead to unexpected behavior or breakage in modern environments.
  Fix: Consider re-evaluating the need for custom `inherit` syntax or migrating to modern CSS features or actively maintained PostCSS plugins/syntaxes for similar functionality. If absolutely necessary, pin `postcss` to an older, compatible major version and ensure Node.js compatibility.
• gotcha This package is solely a parser; it converts the custom `inherit` syntax into a PostCSS Abstract Syntax Tree (AST). It does not, by itself, apply any inheritance logic to the CSS. To make the inheritance functional, you *must* use it in conjunction with a PostCSS plugin like `postcss-inherit`.
  Fix: Always pair this parser with the `postcss-inherit` plugin (or a custom plugin that processes the generated AST) in your PostCSS pipeline to achieve the desired CSS inheritance behavior.
• gotcha Due to its age, `postcss-inherit-parser` is a CommonJS module. Attempting to use `import { parse } from 'postcss-inherit-parser'` in an ESM environment will likely result in a `TypeError` or similar import error, as it does not explicitly provide an ESM export.
  Fix: Use CommonJS `const parse = require('postcss-inherit-parser');` for importing the module in Node.js environments. If used in a bundled client-side application, ensure your build tool (e.g., Webpack, Rollup) is configured to handle CommonJS modules.
• gotcha The parser relies on the `propertyRegExp` option for flexible `inherit` property naming. If you introduce custom keywords (e.g., `extends`) but do not update `propertyRegExp` correctly, the parser will not recognize them, treating them as standard CSS properties or throwing a syntax error.
  Fix: Always pass a `propertyRegExp` option that matches all desired inheritance keywords when initializing the parser, for example: `{ parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i } }`.

Install

• npm install postcss-inherit-parser npm
• yarn add postcss-inherit-parser yarn
• pnpm add postcss-inherit-parser pnpm

Imports

• parse
  wrong:

  import { parse } from 'postcss-inherit-parser';

  correct:

  const parse = require('postcss-inherit-parser');

  The package is very old (v0.2.0, published 8 years ago) and primarily supports CommonJS `require`. ESM imports are unlikely to work directly without transpilation or a CommonJS wrapper.
• PostCSS with parser
  wrong:

  const postcss = require('postcss');
  const inheritParser = require('postcss-inherit-parser');
  
  const processor = postcss([/* your plugins here */], { parser: inheritParser });
  // or
  const processor = postcss().use(inheritParser);

  correct:

  const postcss = require('postcss');
  const inheritParser = require('postcss-inherit-parser');
  
  const processor = postcss().use(/* your plugins here */);
  const root = await processor.process(cssInput, { parser: inheritParser }).root;

  The parser function should be passed to the `parser` option of `postcss.process` or `postcss.parse`, not directly to `postcss.use` or the plugins array.

Quickstart

This quickstart demonstrates how to use `postcss-inherit-parser` to parse CSS containing custom `inherit` or `extend` declarations, and then how to process it with the `postcss-inherit` plugin to apply the inheritance logic, including customizing the property name regex.

const postcss = require('postcss');
const inheritParser = require('postcss-inherit-parser');

async function processCssWithInherit() {
  const cssInput = `
    .b:before {
      content: "";
      color: blue;
    }
    .a {
      inherit: .b:before;
      font-size: 16px;
    }
    .c {
      extend: .a;
      border: 1px solid black;
    }
  `;

  // Use the parser with custom propertyRegExp
  const root = await postcss().process(cssInput, {
    from: undefined,
    parser: inheritParser.parse,
    parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i }
  }).root;

  console.log('Parsed AST (first rule selector):', root.nodes[0].selector); // .b:before
  console.log('Parsed AST (second rule inherit property):', root.nodes[1].nodes[0].prop); // inherit
  console.log('Parsed AST (third rule extend property):', root.nodes[2].nodes[0].prop); // extend

  // To apply the actual inheritance, you would typically use postcss-inherit as a plugin:
  const postcssInherit = require('postcss-inherit');
  const result = await postcss([postcssInherit()]).process(cssInput, {
    from: undefined,
    parser: inheritParser.parse,
    parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i }
  });
  console.log('\nCSS after processing with postcss-inherit:\n', result.css);
}

processCssWithInherit();