@bookklik/senangstart-css 0.2.8 → 0.2.10

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 (72) hide show
  1. package/dist/senangstart-css.js +2751 -1952
  2. package/dist/senangstart-css.min.js +266 -225
  3. package/dist/senangstart-tw.js +440 -77
  4. package/dist/senangstart-tw.min.js +1 -1
  5. package/docs/SYNTAX-REFERENCE.md +1731 -1590
  6. package/docs/guide/configuration.md +2 -2
  7. package/docs/guide/preflight.md +20 -1
  8. package/docs/guide/states.md +60 -0
  9. package/docs/ms/guide/configuration.md +2 -2
  10. package/docs/ms/guide/preflight.md +19 -0
  11. package/docs/ms/guide/states.md +60 -0
  12. package/docs/ms/reference/breakpoints.md +14 -0
  13. package/docs/ms/reference/colors.md +2 -2
  14. package/docs/ms/reference/space/height.md +10 -10
  15. package/docs/ms/reference/space/width.md +12 -12
  16. package/docs/ms/reference/visual/border-radius.md +50 -10
  17. package/docs/ms/reference/visual/contain.md +57 -0
  18. package/docs/ms/reference/visual/content-visibility.md +53 -0
  19. package/docs/ms/reference/visual/placeholder-color.md +92 -0
  20. package/docs/ms/reference/visual/writing-mode.md +53 -0
  21. package/docs/ms/reference/visual.md +6 -0
  22. package/docs/public/assets/senangstart-css.min.js +266 -225
  23. package/docs/public/llms.txt +63 -2
  24. package/docs/reference/breakpoints.md +14 -0
  25. package/docs/reference/colors.md +2 -2
  26. package/docs/reference/space/height.md +10 -10
  27. package/docs/reference/space/width.md +12 -12
  28. package/docs/reference/visual/border-radius.md +50 -10
  29. package/docs/reference/visual/contain.md +57 -0
  30. package/docs/reference/visual/content-visibility.md +53 -0
  31. package/docs/reference/visual/placeholder-color.md +92 -0
  32. package/docs/reference/visual/writing-mode.md +53 -0
  33. package/docs/reference/visual.md +7 -0
  34. package/docs/syntax-reference.json +2185 -2009
  35. package/package.json +1 -1
  36. package/public/senangstart.css +1 -1
  37. package/scripts/convert-tailwind.js +486 -89
  38. package/scripts/generate-docs.js +403 -403
  39. package/scripts/generate-llms-txt.js +28 -0
  40. package/src/cdn/senangstart-engine.js +37 -1927
  41. package/src/cdn/tw-conversion-engine.js +504 -78
  42. package/src/cli/commands/build.js +10 -0
  43. package/src/compiler/generators/css.js +400 -67
  44. package/src/compiler/generators/preflight.js +26 -13
  45. package/src/compiler/generators/typescript.js +3 -1
  46. package/src/compiler/index.js +27 -3
  47. package/src/compiler/parser.js +24 -7
  48. package/src/config/defaults.js +4 -1
  49. package/src/core/constants.js +5 -3
  50. package/src/definitions/index.js +7 -3
  51. package/src/definitions/layout.js +2 -2
  52. package/src/definitions/space.js +45 -19
  53. package/src/definitions/visual-performance.js +126 -0
  54. package/src/definitions/visual.js +25 -9
  55. package/src/index.js +47 -0
  56. package/src/utils/common.js +17 -5
  57. package/templates/senangstart.config.js +1 -1
  58. package/tests/helpers/test-utils.js +1 -1
  59. package/tests/integration/compiler.test.js +12 -1
  60. package/tests/unit/compiler/generators/css.coverage.test.js +833 -0
  61. package/tests/unit/compiler/generators/css.test.js +1520 -6
  62. package/tests/unit/compiler/generators/preflight.test.js +31 -0
  63. package/tests/unit/compiler/parser.test.js +26 -0
  64. package/tests/unit/config/defaults.test.js +2 -2
  65. package/tests/unit/convert-tailwind.cli.test.js +95 -0
  66. package/tests/unit/convert-tailwind.coverage.test.js +225 -0
  67. package/tests/unit/convert-tailwind.test.js +61 -21
  68. package/tests/unit/core/tokenizer-core.test.js +102 -0
  69. package/tests/unit/definitions/index.test.js +108 -0
  70. package/tests/unit/definitions/layout_definitions.test.js +40 -0
  71. package/tests/unit/utils/common.test.js +26 -0
  72. package/scripts/bundle-jit.js +0 -45
package/docs/ms/reference/visual/placeholder-color.md ADDED
@@ -0,0 +1,92 @@
1
+ # Warna Placeholder
2
+
3
+ Tetapkan warna teks placeholder dalam input borang
4
+
5
+ ## Sintaks
6
+
7
+ Warna placeholder dikonfigurasikan melalui penyesuaian tema dalam `senangstart.config.js`:
8
+
9
+ ```javascript
10
+ theme: {
11
+ placeholder: '#9ca3af' // Warna kelabu lalai
12
+ }
13
+ ```
14
+
15
+ ## Konfigurasi Tema
16
+
17
+ Tetapkan warna placeholder tersuai:
18
+
19
+ ```javascript
20
+ // senangstart.config.js
21
+ export default {
22
+ theme: {
23
+ placeholder: '#94a3b8' // Kelabu slate tersuai
24
+ }
25
+ }
26
+ ```
27
+
28
+ ## Contoh
29
+
30
+ ```html
31
+ <input type="text" placeholder="Masukkan nama anda">
32
+ <input type="email" placeholder="anda@contoh.com">
33
+ <textarea placeholder="Mesej anda..."></textarea>
34
+ ```
35
+
36
+ ## Pratonton
37
+
38
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
39
+
40
+ ### Warna Placeholder
41
+
42
+ <div layout="flex col" space="g:medium">
43
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm">Warna teks placeholder digunakan secara automatik melalui Preflight</p>
44
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <input type="text" placeholder="Masukkan nama anda" space="p:small border:neutral-300 border-w:thin rounded:small">
46
+ <input type="email" placeholder="anda@contoh.com" space="p:small border:neutral-300 border-w:thin rounded:small">
47
+ <textarea placeholder="Mesej anda..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
48
+ </div>
49
+ </div>
50
+
51
+ <details>
52
+ <summary>Lihat Kod</summary>
53
+
54
+ ```html
55
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
56
+ <input type="text" placeholder="Masukkan nama anda" space="p:small border:neutral-300 border-w:thin rounded:small">
57
+ <input type="email" placeholder="anda@contoh.com" space="p:small border:neutral-300 border-w:thin rounded:small">
58
+ <textarea placeholder="Mesej anda..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
59
+ </div>
60
+ ```
61
+
62
+ </details>
63
+
64
+ </div>
65
+
66
+ ## Sokongan Mod Gelap
67
+
68
+ Warna placeholder menyesuai secara automatik dengan mod gelap:
69
+
70
+ ```javascript
71
+ theme: {
72
+ placeholder: '#9ca3af', // Mod cerah
73
+ colors: {
74
+ 'neutral-400': '#9ca3af' // Digunakan dalam mod gelap
75
+ }
76
+ }
77
+ ```
78
+
79
+ ## Sokongan Pelayar
80
+
81
+ Pseudo-elemen `::placeholder` disokong dalam:
82
+ - Chrome 57+
83
+ - Firefox 51+
84
+ - Safari 10.1+
85
+ - Edge 12+
86
+
87
+ ## Nota
88
+
89
+ - Warna placeholder digunakan secara global melalui CSS Preflight
90
+ - Anda boleh menyesuaikan warna dalam konfigurasi tema anda
91
+ - Gunakan nada neutral untuk keterbacaan yang lebih baik
92
+ - Elakkan menggunakan putih atau hitam kerana isu kontras
package/docs/ms/reference/visual/writing-mode.md ADDED
@@ -0,0 +1,53 @@
1
+ # Writing Mode
2
+
3
+ Tetapkan arah penulisan untuk teks RTL/menegak
4
+
5
+ ## Sintaks
6
+ ```
7
+ visual="writing-mode:[value]"
8
+ ```
9
+
10
+ ## Nilai
11
+
12
+ | Nilai | CSS Output | Huraian |
13
+ |-------|------------|-------------|
14
+ | `horizontal-tb` | `writing-mode: horizontal-tb` | Kiri ke kanan |
15
+ | `vertical-rl` | `writing-mode: vertical-rl` | Atas ke bawah RTL |
16
+ | `vertical-lr` | `writing-mode: vertical-lr` | Atas ke bawah LTR |
17
+ | `sideways-rl` | `writing-mode: sideways-rl` | Menyerong RTL |
18
+ | `sideways-lr` | `writing-mode: sideways-lr` | Menyerong LTR |
19
+
20
+ ## Contoh
21
+
22
+ ```html
23
+ <div visual="writing-mode:vertical-rl">Vertical text</div>
24
+ <div visual="writing-mode:horizontal-tb">Horizontal text</div>
25
+ ```
26
+
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Mod Penulisan
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="writing-mode:vertical-rl"</code> - Kawal arah dan orientasi teks</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
43
+
44
+ ```html
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
48
+ </div>
49
+ ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual.md CHANGED
@@ -148,6 +148,12 @@ Atribut `visual` mengawal warna, tekstur, tipografi, dan penampilan.
148
148
 
149
149
  - [Penyesuaian Warna Paksa](./visual/forced-color-adjust) - `forced-color-adjust:none`, `forced-color-adjust:auto`
150
150
 
151
+ ## Prestasi
152
+
153
+ - [Ketampakan Kandungan](./visual/content-visibility) - `content-visibility:auto`, `content-visibility:hidden`
154
+ - [Mengandung](./visual/contain) - `contain:strict`, `contain:content`, `contain:size`
155
+ - [Mod Penulisan](./visual/writing-mode) - `writing-mode:horizontal-tb`, `writing-mode:vertical-rl`
156
+
151
157
  ## Contoh Pantas
152
158
 
153
159
  ```html