Skip to content

Commit f6c9c53

Browse files
JimGitFEJimGitFE
authored
Merge pull request #21 from JimGitFE/development
Development
2 parents 828dc5d + abc7156 commit f6c9c53

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+7416
-6546
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
name: NPM Continuous Deployment
22

33
on:
4-
release:
5-
types: [ created ]
6-
workflow_dispatch: # Execute with workflow_dispatch
7-
4+
release:
5+
types: [created]
6+
workflow_dispatch: # Execute with workflow_dispatch
7+
88
jobs:
9-
npm-publish:
10-
runs-on: ubuntu-latest
9+
npm-publish:
10+
runs-on: ubuntu-latest
1111

12-
steps:
13-
- uses: actions/checkout@v2
12+
steps:
13+
- uses: actions/checkout@v2
1414

15-
- name: Use Node.js 20.10
16-
uses: actions/setup-node@v2
17-
with:
18-
node-version: '20.10'
19-
registry-url: "https://registry.npmjs.org"
15+
- name: Use Node.js 20.10
16+
uses: actions/setup-node@v2
17+
with:
18+
node-version: "20.10"
19+
registry-url: "https://registry.npmjs.org"
2020

21-
- name: Install dependencies
22-
run: npm ci
21+
- name: Install dependencies
22+
run: npm ci
2323

24-
- name: Run build
25-
run: npm run build
24+
- name: Run build
25+
run: npm run build
2626

27-
- name: Run tests
28-
run: npm run git-test
27+
- name: Run tests
28+
run: npm run git-test
2929

30-
- name: Remove cuconfig.json
31-
run: npm run rm-config
30+
- name: Remove cuconfig.json
31+
run: npm run rm-config
3232

33-
- name: Publish to NPM
34-
run: npm publish
35-
env:
36-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
33+
- name: Publish to NPM
34+
run: npm publish
35+
env:
36+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.github/workflows/integrate.yml‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
name: Node Countinuous Integration
22

33
on:
4-
push:
5-
branches:
6-
- development
7-
pull_request:
8-
branches:
9-
- main
10-
- development
4+
push:
5+
branches:
6+
- development
7+
pull_request:
8+
branches:
9+
- main
10+
- development
1111

1212
jobs:
13-
test:
14-
runs-on: ubuntu-latest
13+
test:
14+
runs-on: ubuntu-latest
1515

16-
steps:
17-
- uses: actions/checkout@v2
16+
steps:
17+
- uses: actions/checkout@v2
1818

19-
- name: Use Node.js 20.10
20-
uses: actions/setup-node@v2
21-
with:
22-
node-version: '20.10'
19+
- name: Use Node.js 20.10
20+
uses: actions/setup-node@v2
21+
with:
22+
node-version: "20.10"
2323

24-
- name: Install dependencies
25-
run: npm ci
24+
- name: Install dependencies
25+
run: npm ci
2626

27-
- name: Run build
28-
run: npm run build
27+
- name: Run build
28+
run: npm run build
2929

30-
- name: Run tests
31-
run: npm run git-test
30+
- name: Run tests
31+
run: npm run git-test

‎.github/workflows/version.yml‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
name: Create Tag
22

33
on:
4-
pull_request:
5-
types: [closed]
6-
branches: [main]
4+
pull_request:
5+
types: [closed]
6+
branches: [main]
77

88
jobs:
9-
tagging:
10-
runs-on: ubuntu-latest
9+
tagging:
10+
runs-on: ubuntu-latest
1111

12-
steps:
13-
- name: Checkout code
14-
uses: actions/checkout@v2
15-
with:
16-
token: ${{ secrets.GITHUB_TOKEN }}
12+
steps:
13+
- name: Checkout code
14+
uses: actions/checkout@v2
15+
with:
16+
token: ${{ secrets.GITHUB_TOKEN }}
1717

18-
- name: Setup Node.js
19-
uses: actions/setup-node@v2
20-
with:
21-
node-version: '20.10'
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v2
20+
with:
21+
node-version: "20.10"
2222

23-
- name: Install dependencies
24-
run: npm ci
23+
- name: Install dependencies
24+
run: npm ci
2525

26-
- name: get-package-json-version
27-
id: get-version
28-
uses: BeaconBrigade/[email protected]
26+
- name: get-package-json-version
27+
id: get-version
28+
uses: BeaconBrigade/[email protected]
2929

30-
- name: Create Tag
31-
run: |
32-
git config --local user.email "[email protected]"
33-
git config --local user.name "GitHub Action"
34-
git tag "v${{ steps.get-version.outputs.version }}"
35-
git push --tags
30+
- name: Create Tag
31+
run: |
32+
git config --local user.email "[email protected]"
33+
git config --local user.name "GitHub Action"
34+
git tag "v${{ steps.get-version.outputs.version }}"
35+
git push --tags

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,6 @@ yarn-error.log*
1313

1414
# Personal
1515
TO-DO.md
16-
/.example
16+
/.example
17+
18+
cuconfig.json

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"printWidth": 140,
3+
"tabWidth": 4
4+
}

‎README.md‎

Lines changed: 76 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,76 +5,109 @@
55
TypeScript utility package that generates a utilities.css file on demand with shorthand class names for common CSS properties. By using intuitive notations like d-f (display: flex) as values for className attributes inside your jsx, this package streamlines your styling process, making your main CSS structure cleaner, reusable and more maintainable while ensuring consistent, efficient application of styles across your project.
66

77
## Installation & Setup (Auto)
8+
89
First, run css-utils init CLI command, Initializes a css-utilities-creator configuration at your project root ([cuconfig.json](#configuration-file-defaults)) with properties as `writeTo` (generated css directory/fileName) `readFrom` (useful to avoid watching changes on unnecessary directories) and utils excecutable script:
10+
911
```bash
1012
# Automatic installation executable:
1113
> npx css-utils init
1214
```
15+
1316
A css file with on demand generated class utilities from jsx/tsx className attributes, is generated at `writeTo` path, default: ./styles/utilities.css Imported properly at main root project file:
17+
1418
```typescript
15-
import "@/styles/index.scss"
19+
import "@/styles/index.scss";
1620
```
21+
1722
> app/layout.tsx
1823
1924
Run the following command to start generating css utilities on save:
25+
2026
```bash
2127
# Run the following command (generates css utilities on save):
2228
> npm run utils
2329
```
24-
Now the generated css file is imported to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.
30+
31+
Now the generated css file is imported to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.
2532

2633
## Dictionary <small>[source](https://github.com/JimGitFE/css-utilities-generator/blob/main/src/dictionary.ts)</small>
27-
| ░ | Property | Class | CSS Output | ░ | Property | Class | CSS Output |
28-
|---|-------------------------|------------|----------------------------------|----|-------------------------|------------|----------------------------------|
29-
| ▀ | display | .d-f | { display: flex } | ▀ | justify-content | .jc-c | { justify-content: center } |
30-
| ░ | | .d-n | { display: none } | ░ | | .jc-sb | { justify-content: space-between }|
31-
| ░ | | .d-b | { display: block } | ░ | | .jc-sa | { justify-content: space-around } |
32-
| ░ | | .d-g | { display: grid } | ░ | | .jc-fe | { justify-content: flex-end } |
33-
| ▀ | flex-direction | .fd-r | { flex-direction: row } | ▀ | align-items | .ai-c | { align-items: center } |
34-
| ░ | | .fd-c | { flex-direction: column } | ░ | | .ai-s | { align-items: start } |
35-
| ░ | | .fd-rr | { flex-direction: row-reverse } | ░ | | .ai-e | { align-items: end } |
36-
| ░ | | .fd-cr | { flex-direction: column-reverse }| ░ | | .ai-ba | { align-items: baseline } |
37-
| ░ | | .fd-d | { flex-direction: inherit } | ▀ | align-content | .ac-s | { align-content: start } |
38-
| ░ | | .fd-n | { flex-direction: none } | ░ | | .ac-e | { align-content: end } |
39-
| ░ | | .fd-r | { flex-direction: row } | ░ | | .ac-c | { align-content: center } |
40-
| ░ | | .fd-c | { flex-direction: column } | ░ | | .ac-ba | { align-content: baseline } |
41-
| ▀ | grid-template-columns | .gtc-2 | { grid-template-columns: 2 } | ▀ | gap | .gap | { gap: value } |
42-
| ░ | | .gtc-3 | { grid-template-columns: 3 } | ░ | | .gap-40 | { gap: 40px } |
43-
| ░ | | .gtc-4 | { grid-template-columns: 4 } | ░ | | .gap-20vw | { gap: 20vw } |
44-
| ░ | | .gtc-5 | { grid-template-columns: 5 } | ░ | | .gap-80 | { gap: 80px } |
45-
| ▀ | margin | .m | { margin: value } | ▀ | padding | .p | { padding: value } |
46-
| ░ | | .ml-40 | { margin-left: 40px } | ░ | | .pl-40 | { padding-left: 40px } |
47-
| ░ | | .mr-20vw | { margin-right: 20vw } | ░ | | .pr-20vw | { padding-right: 20vw } |
48-
| ░ | | .mt-80 | { margin-top: 80px } | ░ | | .pt-80 | { padding-top: 80px } |
49-
| ░ | | .mb | { margin-bottom: value } | ░ | | .pb | { padding-bottom: value } |
34+
35+
| ░ | Property | Class | CSS Output | ░ | Property | Class | CSS Output |
36+
| --- | --------------------- | -------- | ---------------------------------- | --- | --------------- | --------- | ---------------------------------- |
37+
| ▀ | display | .d-f | { display: flex } | ▀ | justify-content | .jc-c | { justify-content: center } |
38+
| ░ | | .d-n | { display: none } | ░ | | .jc-sb | { justify-content: space-between } |
39+
| ░ | | .d-b | { display: block } | ░ | | .jc-sa | { justify-content: space-around } |
40+
| ░ | | .d-g | { display: grid } | ░ | | .jc-fe | { justify-content: flex-end } |
41+
| ▀ | flex-direction | .fd-r | { flex-direction: row } | ▀ | align-items | .ai-c | { align-items: center } |
42+
| ░ | | .fd-c | { flex-direction: column } | ░ | | .ai-s | { align-items: start } |
43+
| ░ | | .fd-rr | { flex-direction: row-reverse } | ░ | | .ai-e | { align-items: end } |
44+
| ░ | | .fd-cr | { flex-direction: column-reverse } | ░ | | .ai-ba | { align-items: baseline } |
45+
| ░ | | .fd-d | { flex-direction: inherit } | ▀ | align-content | .ac-s | { align-content: start } |
46+
| ░ | | .fd-n | { flex-direction: none } | ░ | | .ac-e | { align-content: end } |
47+
| ░ | | .fd-r | { flex-direction: row } | ░ | | .ac-c | { align-content: center } |
48+
| ░ | | .fd-c | { flex-direction: column } | ░ | | .ac-ba | { align-content: baseline } |
49+
| ▀ | grid-template-columns | .gtc-2 | { grid-template-columns: 2 } | ▀ | gap | .gap | { gap: value } |
50+
| ░ | | .gtc-3 | { grid-template-columns: 3 } | ░ | | .gap-40 | { gap: 40px } |
51+
| ░ | | .gtc-4 | { grid-template-columns: 4 } | ░ | | .gap-20vw | { gap: 20vw } |
52+
| ░ | | .gtc-5 | { grid-template-columns: 5 } | ░ | | .gap-80 | { gap: 80px } |
53+
| ▀ | margin | .m | { margin: value } | ▀ | padding | .p | { padding: value } |
54+
| ░ | | .ml-40 | { margin-left: 40px } | ░ | | .pl-40 | { padding-left: 40px } |
55+
| ░ | | .mr-20vw | { margin-right: 20vw } | ░ | | .pr-20vw | { padding-right: 20vw } |
56+
| ░ | | .mt-80 | { margin-top: 80px } | ░ | | .pt-80 | { padding-top: 80px } |
57+
| ░ | | .mb | { margin-bottom: value } | ░ | | .pb | { padding-bottom: value } |
58+
5059
> [dictionary.ts](https://github.com/JimGitFE/css-utilities-generator/blob/main/src/dictionary.ts)
60+
5161
## Example
62+
5263
```html
53-
<main className="ml-50 mr-50">
54-
<header className="d-f h-64px ai-c jc-sb pos-sticky top-0 z-5">
64+
<main className="ml-50 mr-50">
65+
<header className="d-f h-64px ai-c jc-sb pos-sticky top-0 z-5"></header>
66+
</main>
5567
```
68+
5669
> some-file.tsx
70+
5771
```css
58-
.ml-50 { margin-left: 50px; }
59-
.mr-50 { margin-right: 50px; }
60-
.d-f { display: flex; }
61-
.h-64px { height: 64px; }
62-
.ai-c { align-items: center; }
63-
.jc-sb { justify-content: space-between; }
64-
.pos-sticky { position: sticky; }
65-
.z-5 { z-index: 5; }
72+
.ml-50 {
73+
margin-left: 50px;
74+
}
75+
.mr-50 {
76+
margin-right: 50px;
77+
}
78+
.d-f {
79+
display: flex;
80+
}
81+
.h-64px {
82+
height: 64px;
83+
}
84+
.ai-c {
85+
align-items: center;
86+
}
87+
.jc-sb {
88+
justify-content: space-between;
89+
}
90+
.pos-sticky {
91+
position: sticky;
92+
}
93+
.z-5 {
94+
z-index: 5;
95+
}
6696
```
97+
6798
> utilities.css
6899
69100
## Configuration File (Defaults)
101+
70102
Write your own dictionary with extendKeys, extendValues or acceptAnyVariable: true altogether
103+
71104
```javascript
72105
{
73106
"acceptAnyVariable": true, /* Matching only dictionary or extension properties, Defaults to false */
74107
"acceptAnyKey": false, /* Applies only key */
75108
"acceptAnyValue": true, /* Applies only value */
76109
"units": "rem", /* Defines unit for those css properties with numeric values or others, Defaults to "px" */
77-
"extendKeys": /* Extend default dictionary abbreviations */
110+
"extendKeys": /* Extend default dictionary abbreviations */
78111
{
79112
"fs": {"name": "font-size", "valueExtension": "vw"}, /* Would match for fs className */
80113
"fi": {"name": "filter", "valueExtension": ""} /* Would match for fs className */
@@ -85,18 +118,21 @@ Write your own dictionary with extendKeys, extendValues or acceptAnyVariable: tr
85118
"exclude": ["node_modules", ".git"] /* Exclude directories from having files parsed, traversed ... */
86119
}
87120
```
121+
88122
> /cuconfig.json
89123
90124
## Usage
125+
91126
Example of jsx elements with above configuration set, variables usage and their respective generated classes at utilities.css
92127

93128
```html
94129
<div className="d-f ml-40">
95-
<h1 className="fs-2 c--brand-primary">
96-
Hello World!
97-
...
130+
<h1 className="fs-2 c--brand-primary">Hello World! ...</h1>
131+
</div>
98132
```
133+
99134
> /src/some-file.tsx
135+
100136
```css
101137
...
102138
.d-f {display: flex}
@@ -105,6 +141,7 @@ Example of jsx elements with above configuration set, variables usage and their
105141
.c--brand-primary {color: var(--brand-primary)}
106142
...
107143
```
144+
108145
> src/styles/utilities.css
109146

110147
# Contributions

0 commit comments

Comments
 (0)