{"id":17242590,"url":"https://github.com/robinweser/bredon","last_synced_at":"2025-04-14T03:25:15.677Z","repository":{"id":57327829,"uuid":"80502093","full_name":"robinweser/bredon","owner":"robinweser","description":"A modern CSS value compiler in JavaScript","archived":false,"fork":false,"pushed_at":"2017-12-08T19:17:43.000Z","size":423,"stargazers_count":40,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T18:08:44.491Z","etag":null,"topics":["ast","compiler","css","css-in-js","generator","lexer","parser","tokenizer","traverser"],"latest_commit_sha":null,"homepage":"","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/robinweser.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-31T08:10:53.000Z","updated_at":"2023-10-12T05:43:45.000Z","dependencies_parsed_at":"2022-09-17T11:21:20.551Z","dependency_job_id":null,"html_url":"https://github.com/robinweser/bredon","commit_stats":null,"previous_names":["rofrischmann/bredon"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fbredon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fbredon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fbredon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fbredon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinweser","download_url":"https://codeload.github.com/robinweser/bredon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248062888,"owners_count":21041670,"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":["ast","compiler","css","css-in-js","generator","lexer","parser","tokenizer","traverser"],"created_at":"2024-10-15T06:13:36.163Z","updated_at":"2025-04-14T03:25:15.650Z","avatar_url":"https://github.com/robinweser.png","language":"JavaScript","funding_links":["https://www.patreon.com/rofrischmann","https://opencollective.com/fela","https://opencollective.com/fela/backer/0/website?requireActive=false","https://opencollective.com/fela/backer/1/website?requireActive=false","https://opencollective.com/fela/backer/2/website?requireActive=false","https://opencollective.com/fela/backer/3/website?requireActive=false","https://opencollective.com/fela/backer/4/website?requireActive=false","https://opencollective.com/fela/backer/5/website?requireActive=false","https://opencollective.com/fela/backer/6/website?requireActive=false","https://opencollective.com/fela/backer/7/website?requireActive=false","https://opencollective.com/fela/backer/8/website?requireActive=false","https://opencollective.com/fela/backer/9/website?requireActive=false"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Bredon\n\nBredon is a modern, specification-driven CSS value compiler in JavaScript.\u003cbr\u003e\nIt's parser uses very detailed nodes and provides as much information as possible.\u003cbr\u003e\nThe generated AST ([Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree)) is simple and readable which allows efficient and straight-forward transormation. It automatically outputs formatted CSS values.\n\n\u003cimg alt=\"TravisCI\" src=\"https://travis-ci.org/rofrischmann/bredon.svg?branch=master\"\u003e \u003ca href=\"https://codeclimate.com/github/rofrischmann/bredon/coverage\"\u003e\u003cimg alt=\"Test Coverage\" src=\"https://codeclimate.com/github/rofrischmann/bredon/badges/coverage.svg\"\u003e\u003c/a\u003e \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/bredon.svg\"\u003e \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-4.4kb-brightgreen.svg\"\u003e \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon.svg\"\u003e \u003ca href=\"https://gitter.im/rofrischmann/bredon\"\u003e\u003cimg alt=\"Gitter\" src=\"https://img.shields.io/gitter/room/rofrischmann/bredon.svg\"\u003e\u003c/a\u003e\n\n\n## Support Us\nSupport Robin Frischmann's work on [Fela](https://github.com/rofrischmann/fela) and its ecosystem (Bredon) directly via [**Patreon**](https://www.patreon.com/rofrischmann).\n\nOr support us on [**Open Collective**](https://opencollective.com/fela) to fund community work. This also includes Bredon as well.\u003cbr\u003e\nThank you to all our backers!\n\n\u003ca href=\"https://opencollective.com/fela/backer/0/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/0/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/1/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/1/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/2/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/2/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/3/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/3/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/4/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/4/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/5/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/5/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/6/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/6/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/7/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/7/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/8/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/8/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/fela/backer/9/website?requireActive=false\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/fela/backer/9/avatar.svg?requireActive=false\"\u003e\u003c/a\u003e\n\n## Installation\n```sh\nyarn add bredon\n```\nAlternatively use `npm i --save bredon`.\n\n## Why?\nI am heavily involved in the whole CSS in JS movement with [Fela](https://github.com/rofrischmann/fela) and [Elodin](https://github.com/rofrischmann/elodin) as well as [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer). While writing Elodin, a plugin-based style object linter, I struggled to do complex value validation and value transformation. As CSS values are just plain strings, we do not have any meaningful types.\u003cbr\u003e\nBut, in order to perform efficient validation and transformation, we have to parse CSS values into useful type-aware components. That's where Bredon joins the game. It uses a specification-driven value parser that provides the required degree of accuracy and detail.\n\n\u003e Bredon also serves as a personal project to learn and understand how compilers work.\n\n## How?\nI heavily used [James Kyle](https://github.com/thejameskyle)'s [the-super-tiny-compiler](https://github.com/thejameskyle/the-super-tiny-compiler) to build Bredon. It follows the exact same steps as any other compiler does:\n\n1. First of all we read the input, one by one, and generate tokens\n2. Then we parse these tokens into syntactic nodes, also know as AST\n3. *(optional)* We may now traverse the AST and transform nodes\n4. Finally we generate a new CSS value using the transformed AST\n\n## The Gist\n```javascript\nimport { parse, generate } from 'bredon'\n\nconst input = '10px solid rgba(255, 0, 255, 0.55)'\nconst ast = parse(input)\n\nast === {\n  type: 'ValueList',\n  body: [{\n    type: 'Value',\n    important: false,\n    body: [{\n      type: 'Dimension',\n      unit: 'px',\n      value: {\n        type: 'Integer',\n        negative: false,\n        value: 10\n      }\n    }, {\n      type: 'Identifier',\n      value: 'solid'\n    }, {\n      type: 'FunctionExpression',\n      callee: 'rgba',\n      params: [{\n        type: 'Integer',\n        negative: false,\n        value: 255\n      }, {\n        type: 'Integer',\n        negative: false,\n        value: 0\n      }, {\n        type: 'Integer',\n        negative: true,\n        value: 255\n      }, {\n        type: 'Float',\n        negative: false,\n        fractional: 0.55,\n        integer: 0,\n      }]\n    }]\n  }]\n}\n\nconst output = generate(ast)\n\nconsole.log(output)\n// =\u003e 10px solid rgba(255, 0, 255, 0.55)\n\n// parsing and generation can be combined\nconst output = compile(input)\n```\n\n## Documentation\n* [**API Reference**](docs/API.md)\n  * bredon\n    * [parse](docs/api/bredon/parse.md)\n    * [traverse](docs/api/bredon/traverse.md)\n    * [generate](docs/api/bredon/generate.md)\n    * [compile](docs/api/bredon/compile.md)\n    * [types](docs/api/bredon/types.md)\n  * bredon-types\n    * [Validators](docs/api/bredon-types/Validators.md)\n    * [Builders](docs/api/bredon-types/Builders.md)\n  * bredon-validate\n    * [validate](docs/api/bredon-validate/validate.md)\n  * bredon-minify\n    * [minify](docs/api/bredon-minify/minify.md)\n* [**AST Nodes**](docs/Nodes.md)\n  * [Identifier](docs/ASTNodes.md#identifier)\n  * [Operator](docs/ASTNodes.md#operator)\n  * [HexColor](docs/ASTNodes.md#hexcolor)\n  * [Parenthesis](docs/ASTNodes.md#parenthesis)\n  * [URL](docs/ASTNodes.md#url)\n  * [StringLiteral](docs/ASTNodes.md#stringliteral)\n  * [Assignment](docs/ASTNodes.md#assignment)\n  * [Dimension](docs/ASTNodes.md#dimension)\n  * [Integer](docs/ASTNodes.md#integer)\n  * [Float](docs/ASTNodes.md#float)\n  * [FunctionExpression](docs/ASTNodes.md#functionexpression)\n  * [Expression](docs/ASTNodes.md#expression)\n\n## Plugins\nBredon's most powerful part is its extendable plugin system.\u003cbr\u003e\nPlugins are used to analyze and transform AST nodes.\n\n| Plugin | Version | Size | Description |\n| ------ | ------- | ---- | ----------- |\n| [calc](packages/bredon-plugin-calc) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-calc.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-8.6kb-brightgreen.svg\"\u003e | Precalculate calc() expression as much as possible | \n| [case](packages/bredon-plugin-case) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-case.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-0.31kb-brightgreen.svg\"\u003e | Normalize letter case for all identifiers |\n| [color](packages/bredon-plugin-color) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-color.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-7.9kb-brightgreen.svg\"\u003e | Manipulate, normalize and minify CSS color values | \n| [initial](packages/bredon-plugin-initial) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-initial.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-2.6kb-brightgreen.svg\"\u003e | Replace, normalize and minify initial values | \n| [precision](packages/bredon-plugin-precision) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-precision.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-0.27kb-brightgreen.svg\"\u003e | Normalize decimal number precision |\n| [remove-unit](packages/bredon-plugin-remove-unit) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-remove-unit.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-0.27kb-brightgreen.svg\"\u003e | Remove unnecessary value units |\n| [trim-hex](packages/bredon-plugin-trim-hex) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-trim-hex.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-0.21kb-brightgreen.svg\"\u003e | Minify hex color values if possible |\n| [unit](packages/bredon-plugin-unit) | \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/bredon-plugin-unit.svg\"\u003e | \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/badge/gzipped-0.73kb-brightgreen.svg\"\u003e | Convert, normalize and minify unit values |\n\n## Integrations\nTo use Bredon within your project, you will need to somehow integrate the compiler into your workflow.\u003cbr\u003e\nCurrently, we support to options to do so. You can either use Bredon with your existing CSS codebase using [PostCSS](http://postcss.org).\nFor JavaScript-based styling solutions (CSS in JS), there is [Elodin](https://github.com/rofrischmann/elodin) which can be configured to auto-fix styles.\n\n* [elodin](https://github.com/rofrischmann/elodin)\n* [postcss-bredon](packages/postcss-bredon)\n\n### PostCSS Stand-Alones\nYou can also use [bredon-minify](packages/bredon-minify) and [bredon-validate](packages/bredon-validate) as a stand-alone plugin for PostCSS:\n\n* [postcss-bredon-minify](packages/postcss-bredon-minify)\n* [postcss-bredon-validate](packages/postcss-bredon-validate)\n\n## Support\nJoin us on [Gitter](https://gitter.im/rofrischmann/bredon). \u003cbr\u003e\nWe highly appreciate any contribution.\u003cbr\u003e\nWe also love to get feedback.\n\n## License\nBredon is licensed under the [MIT License](http://opensource.org/licenses/MIT).\u003cbr\u003e\nDocumentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).\u003cbr\u003e\nCreated with ♥ by [@rofrischmann](http://rofrischmann.de).\n\n\u003ca target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/pCQU3wY7qzomx7oGR27YYg5s/rofrischmann/bredon'\u003e  \u003cimg alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/pCQU3wY7qzomx7oGR27YYg5s/rofrischmann/bredon.svg' /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Fbredon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinweser%2Fbredon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Fbredon/lists"}