fscss 1.1.18 → 1.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +137 -71
  2. package/bin/fscss.js +0 -0
  3. package/example.fscss +3 -2
  4. package/lib/functions/all.js +1 -1
  5. package/package.json +5 -5
package/README.md CHANGED
@@ -1,128 +1,194 @@
1
1
  # FSCSS
2
- FSCSS (Figured Shorthand CSS) is a CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
3
2
 
3
+ **FSCSS (Figured Shorthand Cascading Style Sheets)** is a powerful CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
4
+
5
+ It is designed to make styling faster, reusable, and expressive — without losing standard CSS compatibility.
4
6
 
5
7
  ---
6
8
 
9
+ ## Core Features
7
10
 
11
+ ### FSCSS works in both:
8
12
 
9
- ## Features
13
+ - Browser (via CDN)
14
+ - Node.js (CLI / build tools)
10
15
 
11
- Works in browser and backend (Node.js)
16
+ ---
12
17
 
13
- Supports:
18
+ **Reusable Logic**
14
19
 
15
- - Reusable block → @define name(x,y){...} - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_%40define_method.md
16
-
17
- - Variables ($var, str()) → define reusable values, str(boxBased, "..."), $var:...;
18
-
19
- - Array Methods (@arr) → define array - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_array_method.md
20
-
21
- - Style Replacement (%n()) → shorthand repeated properties. %2(width, height[: 200px;])
22
-
23
- - Repeat Function (rpt()) → repeat values quickly
20
+ - `@define` → reusable blocks
21
+ - `@fun` → function-style reusable properties
22
+ - `@obj` → structured reusable style objects
23
+ ```css
24
+ @define center(elem){`
25
+ @use(elem){
26
+ display:flex;
27
+ justify-content:center;
28
+ align-items:center;
29
+ }
30
+ `}
24
31
 
25
- - Copy Function (copy()) → copy parts of values
32
+ @center(.box)
33
+ ```
34
+ ---
26
35
 
27
- - String Extractor (@ext()) → extract substrings from values.
36
+ **Variables & Dynamic Values**
28
37
 
29
- - Drops / Shared Properties → reuse style groups.
38
+ - `$var` → standard variables
39
+ - `str()` → inline expandable text variables
40
+ - fallback operator → `$ / var || fallback`
41
+ ```css
42
+ $color: red;
30
43
 
31
- - Attribute Selectors → dynamic selectors. $(attribute:value){...}
44
+ .box{
45
+ color: $color!;
46
+ }
47
+ ```
48
+ ---
32
49
 
33
- - Keyframes ($(@keyframes …)) → generate animations easily
50
+ **Arrays/list & Data Handling**
34
51
 
35
- - Vendor Prefixing (-*) → auto add prefixes. -\*-webkit-text-stroke:...
52
+ - `@arr` → define arrays
53
+ - `.list`, `.join`, `.randint`
54
+ - loop generation
55
+ - with random
56
+ ```css
57
+ @arr colors[#1E2783, #8C29B2, #C41348]
36
58
 
37
- - Function-based (@fun) → reusable function-like blocks. @fun(name){...}
59
+ .box{
60
+ background: @random(@arr.colors);
61
+ }
62
+ ```
63
+ ---
64
+
65
+ **Shorthand & Utilities**
38
66
 
39
- - Random Function (@random()) → random values at runtime. @random([.,.,...]) or using array!.randint instead
67
+ - `%n()` → apply multiple properties
68
+ - `rpt()` → repeat values
69
+ - `copy()` → reuse values
70
+ - `@ext()` → extract strings
71
+
72
+ `%2(width, height [: 200px;])`
73
+
74
+ ---
40
75
 
41
- - Number Calculation (num()) → evaluate math expressions. num(4+5)
76
+ **Dynamic & Smart Functions**
42
77
 
43
- - Import (@import) → include external FSCSS files. @import((*) from "location..."). https://github.com/fscss-ttr/fscss-modules/
78
+ - `@random()` → dynamic values
79
+ - `num()` → math evaluation
80
+ - `count()` → number ranges
44
81
 
45
- - @event → event-based styling logic
82
+ `width: num(89+11/4)px;`
46
83
 
47
- - exec() → debugging and runtime helpers. exec(_log, "...")
48
-
49
- - Variable fallback chain (property: $/var || fallback;)
84
+ ---
50
85
 
86
+ **Animations & Selectors**
51
87
 
52
- ### Example
88
+ - Keyframes shorthand
89
+ - Attribute selectors
90
+ - Vendor prefixing
91
+ -
53
92
  ```css
54
- /* FSCSS, Animation compact */
55
- $(@keyframes trans, .box, .card &[3s ase-in infinite]) {
56
- from {
57
- %2(width, height [: 0;])
58
- background: red;
59
- }
60
- to {
61
- %2(width, height [: 200px;])
62
- background: blue;
63
- }
93
+ $(@keyframes trans, .box &[3s ease-in infinite]){
94
+ from{ width:0; }
95
+ to{ width:200px; }
64
96
  }
65
97
  ```
66
- ### Example
98
+ ---
99
+
100
+ **Imports & Modularity**
101
+
102
+ - Local & remote imports
103
+ - Alias support
104
+ - Wildcard import
105
+ ```css
106
+ @import((*) from "mymodules/style.fscss")
107
+ ```
108
+ Modules:
109
+ https://github.com/fscss-ttr/fscss-modules/
110
+
111
+ ---
112
+
113
+ **Logic System**
114
+
115
+ - `@event` → conditional styling
116
+ - `exec()` → debugging tools
117
+
118
+ `exec(_log, "message")`
119
+
120
+ ---
121
+
122
+ ## Example
123
+
67
124
  ```css
68
- @import((*) from "mymodules/style.fscss")
69
- @import((
70
- flex-x,
71
- flex-wrap-center as fx-wc,
72
- flex-responsive as fx-r
73
- ) from flex-control/fscss)
125
+ @import((flex-x) from flex-control/fscss)
74
126
 
75
127
  @arr colors[#1E2783, #8C29B2, #C41348]
76
- .container{
77
- @fx-wc()
78
- background: @random(@arr.colors);
79
- }
80
- .container .card{
81
- @flex-x()
82
- background: linear-gradient(40deg, @arr.colors!.list);
83
- }
84
128
 
129
+ .container{
130
+ @flex-x()
131
+ background: @random(@arr.colors);
132
+ }
85
133
  ```
86
- ### Installation
87
-
88
- `npm install -g fscss`
134
+ ---
89
135
 
90
- Or locally to your project:
136
+ ## Installation
91
137
 
92
- `npm install fscss`
138
+ **Global**
139
+ ```bash
140
+ npm install -g fscss
141
+ ```
142
+ **Local**
143
+ ```bash
144
+ npm install fscss
145
+ ```
146
+ ---
93
147
 
94
- **Browser CDN**
148
+ ** Browser Usage**
95
149
  ```html
96
- <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.18/exec.min.js" defer></script>
150
+ <script src="https://cdn.jsdelivr.net/npm/fscss@latest/exec.min.js" defer></script>
97
151
  ```
98
- Usage
99
-
100
- Link FSCSS files directly:
152
+ **Use directly:**
101
153
  ```html
102
154
  <link type="text/fscss" href="style.fscss">
103
155
  ```
104
- Or import inside a style block:
156
+ **Or:**
105
157
  ```html
106
158
  <style>
107
159
  @import(exec(style.fscss))
108
160
  </style>
109
161
  ```
110
- **Async or defer is required for script loading.**
111
-
162
+ > Use "defer" or "async" when loading the script.
112
163
 
113
164
  ---
114
165
 
166
+ ## What FSCSS Does
167
+
168
+ FSCSS transforms shorthand syntax into valid CSS, making your styles:
169
+
170
+ - shorter
171
+ - reusable
172
+ - dynamic
173
+ - easier to maintain
115
174
 
116
- Transform shorthand syntax into valid CSS
175
+ ---
176
+
177
+ ## Ecosystem
117
178
 
118
- Extensible with plugins
179
+ - VS Code Extension (syntax + snippets)
180
+ - FSCSS Modules
181
+ - CLI Compiler
182
+ - Browser Runtime
119
183
 
120
184
  ---
121
185
 
122
- ### https://fscss.devtem.org/
186
+ Learn More
187
+
188
+ https://fscss.devtem.org/
123
189
 
124
190
  ---
125
191
 
126
- 📜 License
192
+ License
127
193
 
128
- MIT © Figsh—FSCSS
194
+ MIT *© Figsh — FSCSS*
package/bin/fscss.js CHANGED
File without changes
package/example.fscss CHANGED
@@ -4,7 +4,7 @@ flex-x,
4
4
  flex-wrap-center as fx-wc,
5
5
  flex-responsive as fx-r
6
6
  ) from flex-control/fscss)
7
- @arr colors[ #1E2783, #8C29B2, #C41348]
7
+ @arr colors[#1E2783, #8C29B2, #C41348]
8
8
  .container{
9
9
  @fx-wc()
10
10
  background: @random(@arr.colors);
@@ -12,4 +12,5 @@ flex-responsive as fx-r
12
12
  .container .card{
13
13
  @flex-x()
14
14
  background: linear-gradient(40deg, @arr.colors!.list);
15
- }
15
+ }
16
+
package/lib/functions/all.js CHANGED
@@ -3,7 +3,7 @@ function procCntInit(ntc,stc){
3
3
  return `${nu}`;
4
4
  }
5
5
  function procCnt(text){
6
- const reg=/count\((\d+)(?:,(\d+)?)?\)/g;
6
+ const reg=/count\((\d+)(?:(?:\s+)?,(?:\s+)?(\d+)?)?\)/g;
7
7
  text = text.replace(reg, (March, num, step)=>{
8
8
  if(step===null)step=1;
9
9
  return procCntInit(parseInt(num), parseInt(step?step:1));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "fscss",
3
3
  "description": "Figured Shorthand Cascading Style Sheet",
4
- "version": "1.1.18",
4
+ "version": "1.1.20",
5
5
  "type": "module",
6
6
  "main": "lib/index.js",
7
7
  "bin": {
@@ -31,12 +31,12 @@
31
31
  },
32
32
  "homepage": "https://github.com/Figsh/xfscss#readme",
33
33
  "dependencies": {
34
- "dotenv": "^16.0.3",
35
- "express": "^4.18.2"
34
+ "express": "^4.18.2",
35
+ "dotenv": "^16.0.3"
36
36
  },
37
37
  "devDependencies": {
38
- "chai": "^4.3.4",
39
- "mocha": "^10.0.0"
38
+ "mocha": "^10.0.0",
39
+ "chai": "^4.3.4"
40
40
  },
41
41
  "directories": {
42
42
  "lib": "lib"