Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ulyanov-programmer/css2html
The library for converting CSS to HTML
https://github.com/ulyanov-programmer/css2html
converter css css-to-html css2html html js library node
Last synced: 16 days ago
JSON representation
The library for converting CSS to HTML
- Host: GitHub
- URL: https://github.com/ulyanov-programmer/css2html
- Owner: Ulyanov-programmer
- Created: 2024-09-24T11:20:35.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T08:56:29.000Z (23 days ago)
- Last Synced: 2024-10-25T05:46:39.046Z (22 days ago)
- Topics: converter, css, css-to-html, css2html, html, js, library, node
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Special thanks to the author of the idea [akopyl](https://github.com/anatolykopyl).
## Installation
> **Attention!**
> This library works with the APIs provided by `node.js` .
```shell
npm i css2html
```
```shell
yarn add css2html
```
```js
import { CssToHtml } from 'css2html';
let result = new CssToHtml({ css: 'div{}' });
console.log(result.outputHTML);
```
## What is this?
It converts this:
```css
section#some-id {
--text: 'This is text!';
--attr-title: 'Title';
background: red;
color: aliceblue;
}
section#some-id header[data-attribute='v'] {
--text: 'This is the header text';
color: blue;
}
section#some-id span {
--text: 'Text of span';
--text-after: 'Text after';
color: peru;
}
```
To this:
```html
This is text!
This is the header text
Text of span Text after
```
## How to use this?
### Elements
You can create an element via selector:
```css
div.classname#id[attr-1][attr-2='v'] {
/* None of the parts of a selector are mandatory */
/* But at least something needs to be left */
}
```
```html
```
**Nesting** is supported:
```css
div {
}
div span {
}
```
```html
```
If 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:
- Pseudo-class
- Pseudo-element
- One of these selectors: `*`, `+`, `>`, `||`, `|`, `~`
- Or wrap it in an [`@at-rule`](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)
Example - these selectors will be **ignored**:
```css
> div.classname#id[attr-1][attr-2='v'] {
}
div::before {
/* Yes, and this one too */
}
div:not(:has(span)) {
/* And this one too! */
}
@container (width > 1440px) {
div[data-a='This element will be ignored too'] {
}
}
```
### Text and attributes
Attributes 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/--*):
```css
/* In a selector */
a[title='Title!'] {
/* Specific attribute */
--attr-href: './index.html';
--data-attribute: 'Value';
/* And massively! */
--attrs: 'target="_self" rel="noopener"';
}
```
You can also add **text** to the tag via `--text` property:
```css
div {
--text: 'The battle continues again';
}
```
```html
The battle continues again
```
In order to insert a tag _between the text_, you will definitely need special properties that allow you to enter text before and after the tag: `--text-before` and `--text-after`
```css
div {
--text: 'The text inside the div';
}
div span {
--text: ' The text inside span';
--text-before: '| before';
--text-after: ' after';
}
```
```html
The text inside the div | before The text inside span after
```
## API
The very minimum to run looks like this:
```js
// This code outputs to the terminal/console the result of processing the simplest CSS from the single tag.
import { CssToHtml } from 'css2html';
let result = new CssToHtml({ css: 'div{}' });
console.log(result.outputHTML);
```
### Writing to a file
To write in a file, add the `write` parameter:
(_Attention! The entire file will be **overwritten**_)
```js
new CssToHtml({
...,
write: {
in: "your_path_to_html_file",
},
})
```
#### Overwriting a part of a file
Using the `after` and/or `before` parameters, you will not overwrite the entire file, but **specify the area** to be overwritten.
You can omit one of these parameters or not specify them at all.
Without `after` and `before` parameters:
```js
new CssToHtml({
...,
write: {
in: "your_path_to_html_file",
},
})
```
```html
Your content from CSS
Your content from CSS
```
With `after` and `before` parameters:
```js
new CssToHtml({
...,
write: {
...,
after: '',
before: '',
},
})
```
```html
Your content from CSS
Your content from CSS
```
#### Formatting
Before giving you html, it is formatted by the [html-format](https://www.npmjs.com/package/html-format) library.
You can either enable or disable formatting:
```js
new CssToHtml({
format: true, // default value
});
```
### If you find a bug, please create an issue [here](https://github.com/Ulyanov-programmer/css2html/issues).
### If this project was useful to you, you can give it a ★ in [repository](https://github.com/Ulyanov-programmer/css2html).