@bookklik/senangstart-css 0.2.9 → 0.2.12

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 (69) hide show
  1. package/.agent/skills/add-utility/SKILL.md +65 -0
  2. package/.agent/workflows/add-utility.md +2 -0
  3. package/.agent/workflows/build.md +2 -0
  4. package/.agent/workflows/dev.md +2 -0
  5. package/AGENTS.md +30 -0
  6. package/dist/senangstart-css.js +607 -180
  7. package/dist/senangstart-css.min.js +234 -195
  8. package/dist/senangstart-tw.js +274 -8
  9. package/dist/senangstart-tw.min.js +1 -1
  10. package/docs/SYNTAX-REFERENCE.md +1731 -1590
  11. package/docs/guide/preflight.md +20 -1
  12. package/docs/ms/guide/preflight.md +19 -0
  13. package/docs/ms/reference/breakpoints.md +14 -0
  14. package/docs/ms/reference/visual/border-radius.md +50 -10
  15. package/docs/ms/reference/visual/contain.md +57 -0
  16. package/docs/ms/reference/visual/content-visibility.md +53 -0
  17. package/docs/ms/reference/visual/placeholder-color.md +92 -0
  18. package/docs/ms/reference/visual/ring-color.md +2 -2
  19. package/docs/ms/reference/visual/ring-offset.md +3 -3
  20. package/docs/ms/reference/visual/ring.md +5 -5
  21. package/docs/ms/reference/visual/writing-mode.md +53 -0
  22. package/docs/ms/reference/visual.md +6 -0
  23. package/docs/public/assets/senangstart-css.min.js +234 -195
  24. package/docs/public/llms.txt +45 -12
  25. package/docs/reference/breakpoints.md +14 -0
  26. package/docs/reference/visual/border-radius.md +50 -10
  27. package/docs/reference/visual/contain.md +57 -0
  28. package/docs/reference/visual/content-visibility.md +53 -0
  29. package/docs/reference/visual/placeholder-color.md +92 -0
  30. package/docs/reference/visual/ring-color.md +2 -2
  31. package/docs/reference/visual/ring-offset.md +3 -3
  32. package/docs/reference/visual/ring.md +5 -5
  33. package/docs/reference/visual/writing-mode.md +53 -0
  34. package/docs/reference/visual.md +7 -0
  35. package/docs/syntax-reference.json +2185 -2009
  36. package/package.json +1 -1
  37. package/scripts/convert-tailwind.js +300 -26
  38. package/scripts/generate-docs.js +403 -403
  39. package/src/cdn/senangstart-engine.js +5 -5
  40. package/src/cdn/tw-conversion-engine.js +305 -8
  41. package/src/cli/commands/build.js +51 -13
  42. package/src/cli/commands/dev.js +157 -93
  43. package/src/compiler/generators/css.js +467 -208
  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 +13 -6
  48. package/src/compiler/tokenizer.js +25 -23
  49. package/src/config/defaults.js +3 -0
  50. package/src/core/tokenizer-core.js +46 -19
  51. package/src/definitions/index.js +4 -1
  52. package/src/definitions/visual-borders.js +10 -10
  53. package/src/definitions/visual-performance.js +126 -0
  54. package/src/definitions/visual.js +25 -9
  55. package/src/utils/common.js +456 -27
  56. package/src/utils/node-io.js +82 -0
  57. package/tests/integration/dev-recovery.test.js +231 -0
  58. package/tests/unit/cli/memory-limits.test.js +169 -0
  59. package/tests/unit/compiler/css-generation-error-handling.test.js +204 -0
  60. package/tests/unit/compiler/generators/css-errors.test.js +102 -0
  61. package/tests/unit/compiler/generators/css.test.js +102 -5
  62. package/tests/unit/convert-tailwind.test.js +518 -431
  63. package/tests/unit/utils/common.test.js +376 -26
  64. package/tests/unit/utils/file-timeout.test.js +154 -0
  65. package/tests/unit/utils/theme-validation.test.js +181 -0
  66. package/tests/unit/compiler/generators/css.coverage.test.js +0 -833
  67. package/tests/unit/convert-tailwind.cli.test.js +0 -95
  68. package/tests/unit/security.test.js +0 -206
  69. /package/tests/unit/{convert-tailwind.coverage.test.js → convert-tailwind-edgecases.test.js} +0 -0
package/tests/unit/compiler/generators/css.test.js CHANGED
@@ -547,6 +547,96 @@ describe('CSS Generator', () => {
547
547
  assert.ok(css.includes('border-radius: var(--r-full)'));
548
548
  });
549
549
 
550
+ it('generates rounded-t', () => {
551
+ const token = { property: 'rounded-t', value: 'medium', attrType: 'visual', raw: 'rounded-t:medium' };
552
+ const config = createTestConfig();
553
+ const css = generateCSS([token], config);
554
+
555
+ assert.ok(css.includes('border-top-left-radius: var(--r-medium)'));
556
+ assert.ok(css.includes('border-top-right-radius: var(--r-medium)'));
557
+ });
558
+
559
+ it('generates rounded-b', () => {
560
+ const token = { property: 'rounded-b', value: 'big', attrType: 'visual', raw: 'rounded-b:big' };
561
+ const config = createTestConfig();
562
+ const css = generateCSS([token], config);
563
+
564
+ assert.ok(css.includes('border-bottom-left-radius: var(--r-big)'));
565
+ assert.ok(css.includes('border-bottom-right-radius: var(--r-big)'));
566
+ });
567
+
568
+ it('generates rounded-l', () => {
569
+ const token = { property: 'rounded-l', value: 'small', attrType: 'visual', raw: 'rounded-l:small' };
570
+ const config = createTestConfig();
571
+ const css = generateCSS([token], config);
572
+
573
+ assert.ok(css.includes('border-top-left-radius: var(--r-small)'));
574
+ assert.ok(css.includes('border-bottom-left-radius: var(--r-small)'));
575
+ });
576
+
577
+ it('generates rounded-r', () => {
578
+ const token = { property: 'rounded-r', value: 'round', attrType: 'visual', raw: 'rounded-r:round' };
579
+ const config = createTestConfig();
580
+ const css = generateCSS([token], config);
581
+
582
+ assert.ok(css.includes('border-top-right-radius: var(--r-round)'));
583
+ assert.ok(css.includes('border-bottom-right-radius: var(--r-round)'));
584
+ });
585
+
586
+ it('generates rounded-tl', () => {
587
+ const token = { property: 'rounded-tl', value: 'medium', attrType: 'visual', raw: 'rounded-tl:medium' };
588
+ const config = createTestConfig();
589
+ const css = generateCSS([token], config);
590
+
591
+ assert.ok(css.includes('border-top-left-radius: var(--r-medium)'));
592
+ assert.ok(!css.includes('border-top-right-radius'));
593
+ });
594
+
595
+ it('generates rounded-tr', () => {
596
+ const token = { property: 'rounded-tr', value: 'big', attrType: 'visual', raw: 'rounded-tr:big' };
597
+ const config = createTestConfig();
598
+ const css = generateCSS([token], config);
599
+
600
+ assert.ok(css.includes('border-top-right-radius: var(--r-big)'));
601
+ assert.ok(!css.includes('border-top-left-radius'));
602
+ });
603
+
604
+ it('generates rounded-bl', () => {
605
+ const token = { property: 'rounded-bl', value: 'small', attrType: 'visual', raw: 'rounded-bl:small' };
606
+ const config = createTestConfig();
607
+ const css = generateCSS([token], config);
608
+
609
+ assert.ok(css.includes('border-bottom-left-radius: var(--r-small)'));
610
+ assert.ok(!css.includes('border-bottom-right-radius'));
611
+ });
612
+
613
+ it('generates rounded-br', () => {
614
+ const token = { property: 'rounded-br', value: 'round', attrType: 'visual', raw: 'rounded-br:round' };
615
+ const config = createTestConfig();
616
+ const css = generateCSS([token], config);
617
+
618
+ assert.ok(css.includes('border-bottom-right-radius: var(--r-round)'));
619
+ assert.ok(!css.includes('border-bottom-left-radius'));
620
+ });
621
+
622
+ it('generates rounded-t with arbitrary value', () => {
623
+ const token = { property: 'rounded-t', value: '12px', attrType: 'visual', raw: 'rounded-t:[12px]', isArbitrary: true };
624
+ const config = createTestConfig();
625
+ const css = generateCSS([token], config);
626
+
627
+ assert.ok(css.includes('border-top-left-radius: 12px'));
628
+ assert.ok(css.includes('border-top-right-radius: 12px'));
629
+ });
630
+
631
+ it('generates rounded-tl with arbitrary value', () => {
632
+ const token = { property: 'rounded-tl', value: '8px', attrType: 'visual', raw: 'rounded-tl:[8px]', isArbitrary: true };
633
+ const config = createTestConfig();
634
+ const css = generateCSS([token], config);
635
+
636
+ assert.ok(css.includes('border-top-left-radius: 8px'));
637
+ assert.ok(!css.includes('border-top-right-radius'));
638
+ });
639
+
550
640
  });
551
641
 
552
642
  describe('Shadow', () => {
@@ -581,6 +671,8 @@ describe('CSS Generator', () => {
581
671
  assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
582
672
  assert.ok(css.includes('border-left-color: var(--c-gray-300)'));
583
673
  assert.ok(css.includes('border-right-color: var(--c-gray-300)'));
674
+ assert.ok(css.includes('border-left-style: solid'));
675
+ assert.ok(css.includes('border-right-style: solid'));
584
676
  });
585
677
 
586
678
  it('generates divide-y', () => {
@@ -591,6 +683,8 @@ describe('CSS Generator', () => {
591
683
  assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
592
684
  assert.ok(css.includes('border-top-color: var(--c-danger)'));
593
685
  assert.ok(css.includes('border-bottom-color: var(--c-danger)'));
686
+ assert.ok(css.includes('border-top-style: solid'));
687
+ assert.ok(css.includes('border-bottom-style: solid'));
594
688
  });
595
689
 
596
690
  it('generates divide width', () => {
@@ -599,7 +693,10 @@ describe('CSS Generator', () => {
599
693
  const css = generateCSS([token], config);
600
694
 
601
695
  assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
602
- assert.ok(css.includes('border-width: var(--s-thin)'));
696
+ assert.ok(css.includes('border-top-width: calc(var(--s-thin) * (1 - var(--ss-divide-y-reverse)))'));
697
+ assert.ok(css.includes('border-bottom-width: calc(var(--s-thin) * var(--ss-divide-y-reverse))'));
698
+ assert.ok(css.includes('border-left-width: calc(var(--s-thin) * (1 - var(--ss-divide-x-reverse)))'));
699
+ assert.ok(css.includes('border-right-width: calc(var(--s-thin) * var(--ss-divide-x-reverse))'));
603
700
  });
604
701
 
605
702
  it('generates divide-x-w', () => {
@@ -608,8 +705,8 @@ describe('CSS Generator', () => {
608
705
  const css = generateCSS([token], config);
609
706
 
610
707
  assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
611
- assert.ok(css.includes('border-left-width: var(--s-regular)'));
612
- assert.ok(css.includes('border-right-width: var(--s-regular)'));
708
+ assert.ok(css.includes('border-right-width: calc(var(--s-regular) * var(--ss-divide-x-reverse))'));
709
+ assert.ok(css.includes('border-left-width: calc(var(--s-regular) * (1 - var(--ss-divide-x-reverse)))'));
613
710
  });
614
711
 
615
712
  it('generates divide-y-w', () => {
@@ -618,8 +715,8 @@ describe('CSS Generator', () => {
618
715
  const css = generateCSS([token], config);
619
716
 
620
717
  assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
621
- assert.ok(css.includes('border-top-width: var(--s-thick)'));
622
- assert.ok(css.includes('border-bottom-width: var(--s-thick)'));
718
+ assert.ok(css.includes('border-bottom-width: calc(var(--s-thick) * var(--ss-divide-y-reverse))'));
719
+ assert.ok(css.includes('border-top-width: calc(var(--s-thick) * (1 - var(--ss-divide-y-reverse)))'));
623
720
  });
624
721
 
625
722
  it('generates divide style', () => {