This project provides a command-line tool (CLI) for converting CSS files to equivalent YAML representations.
- Converts CSS syntax to a well-structured YAML format
- Maintains readability and clarity of the original styles
- Simplifies configuration management for certain use cases
Prerequisites:
- Node.js and npm (or yarn) installed on your system.
Installation:
- Clone this repository:
git clone https://github.com/neon-x-hub/css-to-yaml.git
- Navigate to the project directory:
cd css-to-yaml
- Install dependencies:
npm install
The project includes a CLI tool named cssyaml
.
Basic Conversion:
cssyaml input.css output.yaml
This command converts the input.css
file to a YAML representation saved as output.yaml
.
CSS:
/* Basic CSS Example */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 24px;
text-align: center;
}
p {
color: #666;
font-size: 14px;
line-height: 1.5;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.button {
background-color: #008CBA;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-color: #005f73;
}
#tst {
color: red;
}
YAML:
body:
margin: "0"
padding: "0"
font-family: Arial, sans-serif
h1:
color: "#333"
font-size: 24px
text-align: center
p:
color: "#666"
font-size: 14px
line-height: "1.5"
.container:
width: 80%
margin: 0 auto
padding: 20px
.button:
background-color: "#008CBA"
border: none
color: white
padding: 10px 20px
text-align: center
text-decoration: none
display: inline-block
font-size: 16px
margin: 4px 2px
cursor: pointer
.button:hover:
background-color: "#005f73"
"#tst":
color: red
We welcome contributions to this project! Please refer to the CONTRIBUTING.md
file for details on how to submit pull requests and report issues.
This project is licensed under the MIT License. See the LICENSE
file for more information.