{"id":15580,"library":"css-font-parser-papandreou","title":"CSS Font Value Parser","description":"The `css-font-parser-papandreou` package provides a lightweight, dedicated parser for CSS font shorthand property values. It transforms a CSS font string, such as `15px/18px \"Neue Helvetica\", Helvetica, sans-serif`, into a structured JavaScript object, extracting components like `font-family` (as an array), `font-size`, and `line-height`. The current stable version, `0.2.3-patch1`, signifies a pre-1.0 development stage, and as a fork of the original `css-font-parser`, it suggests a maintenance-oriented release cadence by Andreas Papandreou. This library differentiates itself through its singular focus on parsing this specific CSS property, offering a minimal footprint solution for environments where a full CSS parser is overkill. It's particularly useful for applications that need to programmatically inspect or manipulate font declarations from user input or dynamic styles.","status":"maintenance","version":"0.2.3-patch1","language":"javascript","source_language":"en","source_url":"https://github.com/bramstein/css-font-parser","tags":["javascript","css","font","parser"],"install":[{"cmd":"npm install css-font-parser-papandreou","lang":"bash","label":"npm"},{"cmd":"yarn add css-font-parser-papandreou","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-font-parser-papandreou","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package primarily exposes a CommonJS module where the `parse` function is the module's default export. Direct ESM import using `import parse from '...'` will result in a runtime error in Node.js or unexpected behavior with some bundlers.","wrong":"import parse from 'css-font-parser-papandreou';","symbol":"parse","correct":"const parse = require('css-font-parser-papandreou');"},{"note":"The `parse` function is the default (and only primary) export of this CommonJS module. Attempting to destructure it as a named export like `import { parse } from '...'` will result in `undefined` or a `TypeError`.","wrong":"import { parse } from 'css-font-parser-papandreou';","symbol":"parse","correct":"const parse = require('css-font-parser-papandreou');"}],"quickstart":{"code":"const parse = require('css-font-parser-papandreou');\n\n// Parse a simple font value\nconst simpleFont = parse('15px sans-serif');\nconsole.log('Simple Font:', simpleFont);\n/* Expected output:\n{\n  'font-family': ['sans-serif'],\n  'font-size': '15px'\n}\n*/\n\n// Parse a more complex font value with line-height and multiple font families\nconst complexFont = parse('15px/18px \"Neue Helvetica\", Helvetica, sans-serif');\nconsole.log('Complex Font:', complexFont);\n/* Expected output:\n{\n  'font-family': ['Neue Helvetica', 'Helvetica', 'sans-serif'],\n  'font-size': '15px',\n  'line-height': '18px'\n}\n*/\n\n// Example with a different font style (assuming it's supported by the parser)\nconst italicFont = parse('italic bold 16px/24px Arial, sans-serif');\nconsole.log('Italic Font:', italicFont);\n/* Expected structure (actual parsed values depend on parser's full capabilities):\n{\n  'font-style': 'italic',\n  'font-weight': 'bold',\n  'font-size': '16px',\n  'line-height': '24px',\n  'font-family': ['Arial', 'sans-serif']\n}\n*/","lang":"javascript","description":"Demonstrates how to import and use the `parse` function to extract font properties from various CSS font shorthand strings."},"warnings":[{"fix":"Use `const parse = require('css-font-parser-papandreou');` for Node.js environments. For ESM compatibility, consider using a bundler like Webpack or Rollup, or dynamic `import()` if available and suitable.","message":"This package is primarily a CommonJS module. Direct ESM imports (e.g., `import ... from '...'`) may not work as expected in pure ESM environments without a bundler or specific Node.js configuration, leading to `require is not defined` errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin the exact version (`\"css-font-parser-papandreou\": \"0.2.3-patch1\"`) in your `package.json` to ensure consistent behavior and thoroughly test after any updates.","message":"As a pre-1.0 version (`0.2.3-patch1`), the API, while seemingly stable for its primary function, could theoretically have minor breaking changes in parsing behavior or output structure in future patch or minor releases, though less likely for such a focused utility.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pre-validate input strings to ensure they adhere to the CSS font shorthand syntax. Implement robust error handling or fallback logic for cases where `parse()` might return incomplete or unexpected results.","message":"The parser is specifically designed for CSS font shorthand values. Supplying malformed or unexpected CSS strings (e.g., non-font properties) may result in incomplete parsing, `null` values, or unexpected object structures rather than throwing explicit errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Verify that this specific fork meets your requirements and consider the maintenance status of both the original and this fork if long-term support is critical. Monitor `npm` for further updates to this specific fork.","message":"This package is a fork (`-papandreou`) of an older `css-font-parser` library. While providing ongoing maintenance, it might diverge in behavior or feature set from the original or other community forks. Be aware of the specific fork being used.","severity":"gotcha","affected_versions":">=0.2.3-patch1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your project is configured for CommonJS, or use a bundler to resolve CommonJS modules in an ESM project. If in Node.js ESM, consider dynamic `import('css-font-parser-papandreou').then(mod => mod.default)`.","cause":"Attempting to use `require()` in an ECMAScript Module (ESM) context without proper configuration or a bundler.","error":"ReferenceError: require is not defined"},{"fix":"For CommonJS, use `const parse = require('css-font-parser-papandreou');`. If attempting ESM, `import parse from 'css-font-parser-papandreou';` might be the correct syntax if your bundler handles CJS interoperability, but `require()` is the canonical way.","cause":"Incorrectly importing the `parse` function. This typically happens when using `import { parse } from '...'` on a CommonJS module that exports the function as `module.exports = parseFunction` (a default export pattern).","error":"TypeError: parse is not a function"},{"fix":"Double-check the input string against CSS font shorthand syntax rules. Test with simpler inputs first. If certain properties are consistently missed, the parser may not support them, and manual extraction or a different library might be needed.","cause":"The input CSS font value might be malformed, contain unsupported keywords, or the parser might not recognize all possible CSS font shorthand variations or complex values.","error":"Parse result does not include expected font properties (e.g., 'font-weight', 'font-style')."}],"ecosystem":"npm"}