{"id":16078178,"url":"https://github.com/ulyanov-programmer/css2html","last_synced_at":"2026-02-09T03:03:18.203Z","repository":{"id":257801309,"uuid":"862298484","full_name":"Ulyanov-programmer/css2html","owner":"Ulyanov-programmer","description":"The library for converting CSS to HTML","archived":false,"fork":false,"pushed_at":"2024-11-18T08:34:40.000Z","size":64,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T04:35:03.533Z","etag":null,"topics":["converter","css","css-to-html","css2html","html","js","library","node"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ulyanov-programmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-09-24T11:20:35.000Z","updated_at":"2024-11-18T08:16:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"16e1fa5a-28c8-4c4f-a9c3-1784a2832488","html_url":"https://github.com/Ulyanov-programmer/css2html","commit_stats":null,"previous_names":["ulyanov-programmer/css-to-html"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ulyanov-programmer%2Fcss2html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ulyanov-programmer%2Fcss2html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ulyanov-programmer%2Fcss2html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ulyanov-programmer%2Fcss2html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ulyanov-programmer","download_url":"https://codeload.github.com/Ulyanov-programmer/css2html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358549,"owners_count":21090401,"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":["converter","css","css-to-html","css2html","html","js","library","node"],"created_at":"2024-10-09T10:08:32.922Z","updated_at":"2026-02-09T03:03:17.403Z","avatar_url":"https://github.com/Ulyanov-programmer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Special thanks to the author of the idea [akopyl](https://github.com/anatolykopyl).\n\n## Installation\n\n\u003e **Attention!** \u003cbr\u003e\n\u003e This library works with the APIs provided by `node.js` .\n\n```shell\nnpm i css2html\n```\n\n```shell\nyarn add css2html\n```\n\n```js\nimport { CssToHtml } from 'css2html';\n\nlet result = new CssToHtml({ css: 'div{}' });\n\nconsole.log(result.outputHTML);\n```\n\n## What is this?\n\nIt converts this:\n\n```css\nsection#some-id {\n  /* {{ This is text inside }} */\n  --attr-title: 'Title';\n\n  background: red;\n  color: aliceblue;\n}\nsection#some-id header[data-attribute='v'] {\n  /* {{ This is the header text }} */\n\n  color: blue;\n}\nsection#some-id span {\n  /* \n    {{ Text of span }} \n    Text after \n  */\n\n  color: peru;\n}\n```\n\nTo this:\n\n```html\n\u003csection id=\"some-id\" title=\"Title\"\u003e\n  This is text inside\n  \u003cheader data-attribute=\"v\"\u003eThis is the header text\u003c/header\u003e\n  \u003cspan\u003eText of span\u003c/span\u003e\n  Text after\n\u003c/section\u003e\n```\n\n## How to use this?\n\n### Elements\n\nYou can create an element via selector:\n\n```css\ndiv.classname#id[attr-1][attr-2='v'] {\n  /* None of the parts of a selector are mandatory */\n  /* But at least something needs to be left */\n}\n```\n\n```html\n\u003c!-- Result --\u003e\n\u003cdiv id=\"id\" class=\"classname\" attr-1 attr-2=\"v\"\u003e\u003c/div\u003e\n```\n\n**Nesting** is supported:\n\n```css\ndiv {\n}\ndiv span {\n}\n```\n\n```html\n\u003cdiv\u003e\n  \u003cspan\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\nIf you want to **add styles** but **not add elements** (that is, so that some selectors are ignored), add one of the following to the selector:\n\n- Pseudo-class\n- Pseudo-element\n- One of these selectors: `*`, `+`, `\u003e`, `||`, `|`, `~`\n- Or wrap it in an [`@at-rule`](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)\n\nExample - these selectors will be **ignored**:\n\n```css\n\u003e div.classname#id[attr-1][attr-2='v'] {\n}\ndiv::before {\n  /* Yes, and this one too */\n}\ndiv:not(:has(span)) {\n  /* And this one too! */\n}\n@container (width \u003e 1440px) {\n  div[data-a='This element will be ignored too'] {\n  }\n}\n```\n\n### Text and attributes\n\nAttributes can be set via a selector (_it can be useful for styling_), or you can use a [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):\n\n```css\n/* In a selector */\na[title='Title!'] {\n  /* Specific attribute */\n  --attr-href: './index.html';\n  --data-attribute: 'Value';\n\n  /* And massively! */\n  --attrs: 'target=\"_self\" rel=\"noopener\"';\n}\n```\n\n```html\n\u003ca\n  title=\"Title!\"\n  data-attribute=\"Value\"\n  href=\"./index.html\"\n  target=\"_self\"\n  rel=\"noopener\"\n\u003e\n\u003c/a\u003e\n```\n\nYou can add text inside the tag using **comments** or **variables**:\n\n```css\n/* The old way is not recommended for use */\ndiv {\n  --text-before: 'The battle ';\n  --text: 'continues';\n  --text-after: ' again';\n}\n/* New way, recommended for use. Curly braces are required! */\nsection {\n  /* \n    The battle\n    {{ continues }}\n    again\n  */\n}\n```\n\n```html\nThe battle \u003cdiv\u003econtinues\u003c/div\u003e again\n\nThe battle\n\u003csection\u003e continues \u003c/section\u003e\nagain\n```\n\n## API\n\nThe very minimum to run looks like this:\n\n```js\n// This code outputs to the terminal/console the result of processing the simplest CSS from the single tag.\nimport { CssToHtml } from 'css2html';\n\nlet result = new CssToHtml({ css: 'div{}' });\n\nconsole.log(result.outputHTML);\n```\n\n### Writing to a file\n\nTo write in a file, add the `write` parameter:\n\u003cbr\u003e\n(_Attention! The entire file will be **overwritten**_)\n\n```js\nnew CssToHtml({\n  ...,\n  write: {\n    in: \"your_path_to_html_file\",\n  },\n})\n```\n\n#### Overwriting a part of a file\n\nUsing the `after` and/or `before` parameters, you will not overwrite the entire file, but **specify the area** to be overwritten.\n\u003cbr\u003e\nYou can omit one of these parameters or not specify them at all.\n\nWithout `after` and `before` parameters:\n\n```js\nnew CssToHtml({\n  ...,\n  write: {\n    in: \"your_path_to_html_file\",\n  },\n})\n```\n\n```html\n\u003csome-html-content\u003e\n  \u003cdiv\u003eYour content from CSS\u003c/div\u003e\n\u003c/some-html-content\u003e\n\n\u003c!-- to... --\u003e\n\n\u003cdiv\u003eYour content from CSS\u003c/div\u003e\n```\n\nWith `after` and `before` parameters:\n\n```js\nnew CssToHtml({\n  ...,\n  write: {\n    ...,\n    after: '\u003csome-html-content\u003e',\n    before: '\u003c/some-html-content\u003e',\n  },\n})\n```\n\n```html\n\u003csome-html-content\u003e\n  \u003cdiv\u003eYour content from CSS\u003c/div\u003e\n\u003c/some-html-content\u003e\n\n\u003c!-- Without changes --\u003e\n\n\u003csome-html-content\u003e\n  \u003cdiv\u003eYour content from CSS\u003c/div\u003e\n\u003c/some-html-content\u003e\n```\n\n#### Formatting\n\nBefore giving you html, it is formatted by the [html-format](https://www.npmjs.com/package/html-format) library.\nYou can either enable or disable formatting:\n\n```js\nnew CssToHtml({\n  format: true, // default value\n});\n```\n\n### If you find a bug, please create an issue [here](https://github.com/Ulyanov-programmer/css2html/issues).\n\n### If this project was useful to you, you can give it a ★ in [repository](https://github.com/Ulyanov-programmer/css2html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fulyanov-programmer%2Fcss2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fulyanov-programmer%2Fcss2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fulyanov-programmer%2Fcss2html/lists"}