{"id":15062854,"url":"https://github.com/valtlai/postcss-value-parser-deno","last_synced_at":"2025-10-04T22:31:35.375Z","repository":{"id":65928074,"uuid":"355017262","full_name":"valtlai/postcss-value-parser-deno","owner":"valtlai","description":"Transforms CSS values and at-rule params into a tree — 🦕 Deno port — ❌ Deprecated: use the `npm:` specifier instead","archived":true,"fork":false,"pushed_at":"2023-04-13T19:11:54.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T04:30:37.346Z","etag":null,"topics":["deno"],"latest_commit_sha":null,"homepage":"https://deno.land/x/postcss_value_parser","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/valtlai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-06T01:10:31.000Z","updated_at":"2024-07-09T18:08:37.000Z","dependencies_parsed_at":"2024-11-19T14:46:15.596Z","dependency_job_id":null,"html_url":"https://github.com/valtlai/postcss-value-parser-deno","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valtlai%2Fpostcss-value-parser-deno","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valtlai%2Fpostcss-value-parser-deno/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valtlai%2Fpostcss-value-parser-deno/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valtlai%2Fpostcss-value-parser-deno/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valtlai","download_url":"https://codeload.github.com/valtlai/postcss-value-parser-deno/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235321035,"owners_count":18971231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno"],"created_at":"2024-09-24T23:47:30.365Z","updated_at":"2025-10-04T22:31:29.841Z","avatar_url":"https://github.com/valtlai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Value Parser for Deno\n\n[![Test](https://github.com/valtlai/postcss-value-parser-deno/actions/workflows/test.yml/badge.svg)](https://github.com/valtlai/postcss-value-parser-deno/actions/workflows/test.yml)\n\nTransforms CSS declaration values and at-rule parameters into a tree of nodes,\nand provides a simple traversal API.\n\n🦕 This is a port of\n[postcss-value-parser](https://github.com/TrySound/postcss-value-parser) for\nDeno.\n\n## Deprecated\n\n❌ This module is deprecated. Please use the following instead:\n\n```js\nimport valueParser from \"npm:postcss-value-parser@VERSION_NUMBER\";\n```\n\n## Usage\n\n```js\nimport valueParser from \"https://deno.land/x/postcss_value_parser@4.2.0-1/mod.js\";\nconst cssBackgroundValue = \"url(foo.png) no-repeat 40px 73%\";\nconst parsedValue = valueParser(cssBackgroundValue);\n// parsedValue exposes an API described below,\n// e.g. parsedValue.walk(..), parsedValue.toString(), etc.\n```\n\nFor example, parsing the value `rgba(233, 45, 66, .5)` will return the\nfollowing:\n\n```js\n{\n  nodes: [\n    {\n      type: \"function\",\n      value: \"rgba\",\n      before: \"\",\n      after: \"\",\n      nodes: [\n        { type: \"word\", value: \"233\" },\n        { type: \"div\", value: \",\", before: \"\", after: \" \" },\n        { type: \"word\", value: \"45\" },\n        { type: \"div\", value: \",\", before: \"\", after: \" \" },\n        { type: \"word\", value: \"66\" },\n        { type: \"div\", value: \",\", before: \" \", after: \"\" },\n        { type: \"word\", value: \".5\" },\n      ],\n    },\n  ],\n};\n```\n\nIf you wanted to convert each `rgba()` value in `sourceCSS` to a hex value, you\ncould do so like this:\n\n```js\nimport valueParser from \"https://deno.land/x/postcss_value_parser@4.2.0-1/mod.js\";\n\nconst parsed = valueParser(sourceCSS);\n\n// walk() will visit all the of the nodes in the tree,\n// invoking the callback for each.\nparsed.walk(function (node) {\n  // Since we only want to transform rgba() values,\n  // we can ignore anything else.\n  if (node.type !== \"function\" \u0026\u0026 node.value !== \"rgba\") return;\n\n  // We can make an array of the rgba() arguments to feed to a\n  // convertToHex() function\n  const color = node.nodes.filter(function (node) {\n    return node.type === \"word\";\n  }).map(function (node) {\n    return Number(node.value);\n  }); // [233, 45, 66, .5]\n\n  // Now we will transform the existing rgba() function node\n  // into a word node with the hex value\n  node.type = \"word\";\n  node.value = convertToHex(color);\n});\n\nparsed.toString(); // #E92D42\n```\n\n## Nodes\n\nEach node is an object with these common properties:\n\n- **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or\n  `function`). Each type is documented below.\n- **value**: Each node has a `value` property; but what exactly `value` means is\n  specific to the node type. Details are documented for each type below.\n- **sourceIndex**: The starting index of the node within the original source\n  string. For example, given the source string `10px 20px`, the `word` node\n  whose value is `20px` will have a `sourceIndex` of `5`.\n\n### word\n\nThe catch-all node type that includes keywords (e.g. `no-repeat`), quantities\n(e.g. `20px`, `75%`, `1.5`), and hex colors (e.g. `#e6e6e6`).\n\nNode-specific properties:\n\n- **value**: The \"word\" itself.\n\n### string\n\nA quoted string value, e.g. `\"something\"` in `content: \"something\";`.\n\nNode-specific properties:\n\n- **value**: The text content of the string.\n- **quote**: The quotation mark surrounding the string, either `\"` or `'`.\n- **unclosed**: `true` if the string was not closed properly. e.g.\n  `\"unclosed string`.\n\n### div\n\nA divider, for example\n\n- `,` in `animation-duration: 1s, 2s, 3s`\n- `/` in `border-radius: 10px / 23px`\n- `:` in `(min-width: 700px)`\n\nNode-specific properties:\n\n- **value**: The divider character. Either `,`, `/`, or `:` (see examples\n  above).\n- **before**: Whitespace before the divider.\n- **after**: Whitespace after the divider.\n\n### space\n\nWhitespace used as a separator, e.g. `` occurring twice in\n`border: 1px solid black;`.\n\nNode-specific properties:\n\n- **value**: The whitespace itself.\n\n### comment\n\nA CSS comment starts with `/*` and ends with `*/`\n\nNode-specific properties:\n\n- **value**: The comment value without `/*` and `*/`\n- **unclosed**: `true` if the comment was not closed properly. e.g.\n  `/* comment without an end`.\n\n### function\n\nA CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`.\n\nFunction nodes have nodes nested within them: the function arguments.\n\nAdditional properties:\n\n- **value**: The name of the function, e.g. `rgb` in `rgb(0,0,0)`.\n- **before**: Whitespace after the opening parenthesis and before the first\n  argument, e.g. `` in `rgb(  0,0,0)`.\n- **after**: Whitespace before the closing parenthesis and after the last\n  argument, e.g. `` in `rgb(0,0,0  )`.\n- **nodes**: More nodes representing the arguments to the function.\n- **unclosed**: `true` if the parentheses was not closed properly. e.g.\n  `( unclosed-function`.\n\nMedia features surrounded by parentheses are considered functions with an empty\nvalue. For example, `(min-width: 700px)` parses to these nodes:\n\n```js\n[\n  {\n    type: \"function\",\n    value: \"\",\n    before: \"\",\n    after: \"\",\n    nodes: [\n      { type: \"word\", value: \"min-width\" },\n      { type: \"div\", value: \":\", before: \"\", after: \" \" },\n      { type: \"word\", value: \"700px\" },\n    ],\n  },\n];\n```\n\n`url()` functions can be parsed a little bit differently depending on whether\nthe first character in the argument is a quotation mark.\n\n`url( /gfx/img/bg.jpg )` parses to:\n\n```js\n{\n  type: \"function\",\n  sourceIndex: 0,\n  value: \"url\",\n  before: \" \",\n  after: \" \",\n  nodes: [\n    { type: \"word\", sourceIndex: 5, value: \"/gfx/img/bg.jpg\" },\n  ],\n};\n```\n\n`url( \"/gfx/img/bg.jpg\" )`, on the other hand, parses to:\n\n```js\n{\n  type: \"function\",\n  sourceIndex: 0,\n  value: \"url\",\n  before: \" \",\n  after: \" \",\n  nodes: [\n    { type: \"string\", sourceIndex: 5, quote: '\"', value: \"/gfx/img/bg.jpg\" },\n  ],\n};\n```\n\n### unicode-range\n\nThe unicode-range CSS descriptor sets the specific range of characters to be\nused from a font defined by @font-face and made available for use on the current\npage (`unicode-range: U+0025-00FF`).\n\nNode-specific properties:\n\n- **value**: The \"unicode-range\" itself.\n\n## API\n\n```js\nimport valueParser from \"https://deno.land/x/postcss_value_parser@4.2.0-1/mod.js\";\n```\n\n### valueParser.unit(quantity)\n\nParses `quantity`, distinguishing the number from the unit. Returns an object\nlike the following:\n\n```js\n// Given 2rem\n{\n  number: \"2\",\n  unit: \"rem\",\n};\n```\n\nIf the `quantity` argument cannot be parsed as a number, returns `false`.\n\n_This function does not parse complete values_: you cannot pass it\n`1px solid black` and expect `px` as the unit. Instead, you should pass it\nsingle quantities only. Parse `1px solid black`, then pass it the stringified\n`1px` node (a `word` node) to parse the number and unit.\n\n### valueParser.stringify(nodes[, custom])\n\nStringifies a node or array of nodes.\n\nThe `custom` function is called for each `node`; return a string to override the\ndefault behaviour.\n\n### valueParser.walk(nodes, callback[, bubble])\n\nWalks each provided node, recursively walking all descendent nodes within\nfunctions.\n\nReturning `false` in the `callback` will prevent traversal of descendent nodes\n(within functions). You can use this feature to for shallow iteration, walking\nover only the _immediate_ children. _Note: This only applies if `bubble` is\n`false` (which is the default)._\n\nBy default, the tree is walked from the outermost node inwards. To reverse the\ndirection, pass `true` for the `bubble` argument.\n\nThe `callback` is invoked with three arguments: `callback(node, index, nodes)`.\n\n- `node`: The current node.\n- `index`: The index of the current node.\n- `nodes`: The complete nodes array passed to `walk()`.\n\nReturns the `valueParser` instance.\n\n### const parsed = valueParser(value)\n\nReturns the parsed node tree.\n\n### parsed.nodes\n\nThe array of nodes.\n\n### parsed.toString()\n\nStringifies the node tree.\n\n### parsed.walk(callback[, bubble])\n\nWalks each node inside `parsed.nodes`. See the documentation for\n`valueParser.walk()` above.\n\n## License\n\nMIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaltlai%2Fpostcss-value-parser-deno","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaltlai%2Fpostcss-value-parser-deno","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaltlai%2Fpostcss-value-parser-deno/lists"}