Tool for sorting CSS file declarations.
Project description
sort_css_declarations
Sorts CSS declarations.
Installation
pip install sort_css_declarations
Console scripts
Consult sort-css-declarations --help for the full set of options.
sort-css-declarations takes filenames as positional arguments.
Common options:
-h, --helpshow this help message and exit--by_html BY_HTMLOrder CSS declarations by HTML's order.-i, --in_placeEdits file in-place.
Usage examples
Result directly goes to stdout.
sort-css-declarations test_dir/test_css.css
File will be edited in-place with the result.
sort-css-declarations -i test_dir/test_css.css
Redirect the stdout to a new file.
sort-css-declarations test_dir/test_css.css > test_dir/cleaned_css.css
Result reordered by html directly goes to stdout.
sort-css-declarations test_dir/test_css.css
Reorder by html and redirect the stdout to a new file.
sort-css-declarations test_dir/test_css.css --by_html test_dir/test_html.html > test_dir/cleaned_css.css
What does it do?
Without --by_html flag.
Separates block of grouped declarations and reorders them alphabetically the following way.
- General tags, like
<body>, <div>, <h1>, etc...goes to the top of the file ordered alphabetically. - Followed by the general tags, come the id or class specified declarations.
CSS before-after diff
1c1,6
- /*FORM GENERAL*/
---
+
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
3,9c8,9
- .form-container,
- .form-wrapper,
- .form-wrapper form,
- .form-wrapper form div {
- display: grid;
- align-items: center;
- justify-content: center;
---
+ h1 {
+ color: red;
12,17c12,16
- .form-wrapper {
- width: fit-content;
- padding: 1rem;
- border: 1px solid lightgrey;
- border-radius: 5px;
- background: linear-gradient(109.6deg, rgb(248,248,248) 30.1%, rgb(144,144,144) 100.2%);
---
+ /* ====================== */
+ .form-container {
+ align-items: center;
+ display: grid;
+ justify-content: center;
20,21c19,28
- .form-wrapper form {
- gap: 1rem;
---
+ /* ====================== */
+ .form-wrapper {
+ align-items: center;
+ background: linear-gradient(109.6deg, rgb(248, 248, 248) 30.1%, rgb(144, 144, 144) 100.2%);
+ border-radius: 5px;
+ border: 1px solid lightgrey;
+ display: grid;
+ justify-content: center;
+ padding: 1rem;
+ width: fit-content;
24,26c31,36
- body {
- margin: 0;
- padding: 0;
---
+ /* ====================== */
+ .form-wrapper form {
+ align-items: center;
+ display: grid;
+ gap: 1rem;
+ justify-content: center;
28a39
+ /* ====================== */
30c41,44
- gap: 0.5rem;
---
+ align-items: center;
+ display: grid;
+ gap: 0.5rem;
+ justify-content: center;
34,35c48,49
- text-align: center;
- font-weight: 450;
---
+ font-weight: 450;
+ text-align: center;
38,39c52,53
- .form-wrapper form label+input {
- font-size: 16px;
---
+ .form-wrapper form label + input {
+ font-size: 16px;
41,42d54
- /* ====================== */
-
44,46d55
- h1 {
- color: red;
- }
With --by_html flag followed by the html template filename.
Separates block of grouped declarations and reorders them in the same order as in the html, increasing by the specification.
HTML sample
<div class="form-container">
<div class="form-wrapper">
<form action="login.php" method="post">
<div class="username-input">
<label for="username"><u>Username</u></label>
<input id="username" name="username" type="text"
placeholder="Username.." value="username"/>
</div>
<div class="password-input">
<label for="password"><u>Password</u></label>
<input id="password" name="password" type="password" placeholder="Password.."/>
</div>
<div class="submit-btn-wrapper">
<button class="button" id="submit-btn" name="submit" type="submit">Log in</button>
</div>
</form>
</div>
</div>
CSS before-after diff
1c1
- /*FORM GENERAL*/
---
+
3,9c3,6
- .form-container,
- .form-wrapper,
- .form-wrapper form,
- .form-wrapper form div {
- display: grid;
- align-items: center;
- justify-content: center;
---
+ .form-container {
+ align-items: center;
+ display: grid;
+ justify-content: center;
11a9
+ /* ====================== */
13,17c11,18
- width: fit-content;
- padding: 1rem;
- border: 1px solid lightgrey;
- border-radius: 5px;
- background: linear-gradient(109.6deg, rgb(248,248,248) 30.1%, rgb(144,144,144) 100.2%);
---
+ align-items: center;
+ background: linear-gradient(109.6deg, rgb(248, 248, 248) 30.1%, rgb(144, 144, 144) 100.2%);
+ border-radius: 5px;
+ border: 1px solid lightgrey;
+ display: grid;
+ justify-content: center;
+ padding: 1rem;
+ width: fit-content;
19a21
+ /* ====================== */
21,26c23,26
- gap: 1rem;
- }
-
- body {
- margin: 0;
- padding: 0;
---
+ align-items: center;
+ display: grid;
+ gap: 1rem;
+ justify-content: center;
28a29
+ /* ====================== */
30c31,34
- gap: 0.5rem;
---
+ align-items: center;
+ display: grid;
+ gap: 0.5rem;
+ justify-content: center;
34,35c38,39
- text-align: center;
- font-weight: 450;
---
+ font-weight: 450;
+ text-align: center;
38,39c42,43
- .form-wrapper form label+input {
- font-size: 16px;
---
+ .form-wrapper form label + input {
+ font-size: 16px;
41d44
- /* ====================== */
43,46d45
-
- h1 {
- color: red;
- }
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file sort_css_declarations-1.0.2.tar.gz.
File metadata
- Download URL: sort_css_declarations-1.0.2.tar.gz
- Upload date:
- Size: 9.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.1 CPython/3.10.6
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
50693abd06cb3679283a0eae9d7126acc77fc5b70122c5baf92754e56dd3b48f
|
|
| MD5 |
cbc3dde8a8b97e95bc0e311d90d50c76
|
|
| BLAKE2b-256 |
9607509f3d7d643f56f905a2dfce3779cfd152747ce62dc13be4cbd9c64c59d9
|
File details
Details for the file sort_css_declarations-1.0.2-py2.py3-none-any.whl.
File metadata
- Download URL: sort_css_declarations-1.0.2-py2.py3-none-any.whl
- Upload date:
- Size: 8.5 kB
- Tags: Python 2, Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.1 CPython/3.10.6
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
b8d8171cd52720230783a71eace8696898732a1cbdc48ee82f30a16c1cb9cf4d
|
|
| MD5 |
41719f0de17e38e3d27f368ea0427908
|
|
| BLAKE2b-256 |
2a992371bde66b3ec7913ff1b997ce53e1f00c220a41c94fb66eaf7b9b1eacb3
|
