{"id":15765,"library":"postcss-inherit-parser","title":"PostCSS Inherit Parser","description":"postcss-inherit-parser is a specialized parser for PostCSS, designed to interpret a custom CSS syntax that facilitates \"inherit\" declarations, specifically in conjunction with the `postcss-inherit` plugin. This parser enables the processing of CSS where rules can leverage inheritance from other selectors, including those with pseudo-classes, as exemplified by syntax like `.a { inherit: .b:before; }`. The package, currently at version 0.2.0, was last published approximately 8 years ago, suggesting it is no longer actively maintained. Its core functionality is to provide the Abstract Syntax Tree (AST) representation for this non-standard inheritance syntax, allowing subsequent PostCSS plugins to apply transformation logic. A key feature is the configurable `propertyRegExp` option, which allows consumers to define custom keywords for inheritance, such as `extend` instead of `inherit`. Given its age and low version, developers should be aware of potential compatibility issues with newer Node.js or PostCSS versions.","status":"abandoned","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/GarthDB/postcss-inherit-parser","tags":["javascript","postcss-syntax","parser","css","postcss"],"install":[{"cmd":"npm install postcss-inherit-parser","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-inherit-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-inherit-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a PostCSS parser and requires PostCSS to integrate into a processing pipeline. It should be treated as an implicit peer dependency to ensure AST compatibility.","package":"postcss","optional":false}],"imports":[{"note":"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.","wrong":"import { parse } from 'postcss-inherit-parser';","symbol":"parse","correct":"const parse = require('postcss-inherit-parser');"},{"note":"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.","wrong":"const postcss = require('postcss');\nconst inheritParser = require('postcss-inherit-parser');\n\nconst processor = postcss([/* your plugins here */], { parser: inheritParser });\n// or\nconst processor = postcss().use(inheritParser);","symbol":"PostCSS with parser","correct":"const postcss = require('postcss');\nconst inheritParser = require('postcss-inherit-parser');\n\nconst processor = postcss().use(/* your plugins here */);\nconst root = await processor.process(cssInput, { parser: inheritParser }).root;"}],"quickstart":{"code":"const postcss = require('postcss');\nconst inheritParser = require('postcss-inherit-parser');\n\nasync function processCssWithInherit() {\n  const cssInput = `\n    .b:before {\n      content: \"\";\n      color: blue;\n    }\n    .a {\n      inherit: .b:before;\n      font-size: 16px;\n    }\n    .c {\n      extend: .a;\n      border: 1px solid black;\n    }\n  `;\n\n  // Use the parser with custom propertyRegExp\n  const root = await postcss().process(cssInput, {\n    from: undefined,\n    parser: inheritParser.parse,\n    parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i }\n  }).root;\n\n  console.log('Parsed AST (first rule selector):', root.nodes[0].selector); // .b:before\n  console.log('Parsed AST (second rule inherit property):', root.nodes[1].nodes[0].prop); // inherit\n  console.log('Parsed AST (third rule extend property):', root.nodes[2].nodes[0].prop); // extend\n\n  // To apply the actual inheritance, you would typically use postcss-inherit as a plugin:\n  const postcssInherit = require('postcss-inherit');\n  const result = await postcss([postcssInherit()]).process(cssInput, {\n    from: undefined,\n    parser: inheritParser.parse,\n    parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i }\n  });\n  console.log('\\nCSS after processing with postcss-inherit:\\n', result.css);\n}\n\nprocessCssWithInherit();","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"0.2.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":"0.2.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"0.2.0"},{"fix":"Always pass a `propertyRegExp` option that matches all desired inheritance keywords when initializing the parser, for example: `{ parserOptions: { propertyRegExp: /^(inherit|extend)s?$/i } }`.","message":"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.","severity":"gotcha","affected_versions":"0.2.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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`).","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.","error":"Error: Unknown word (at line X, column Y)"},{"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.","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.","error":"TypeError: (0 , _postcssInheritParser.parse) is not a function"},{"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 })`.","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.","error":"The 'parse' function must be passed to the PostCSS 'parser' option, not 'plugins'."}],"ecosystem":"npm"}