jasmincss 1.0.6 → 1.0.7

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 (16) hide show
  1. package/JASMINCSS-GUIDE.md +2 -2
  2. package/dist/index.js +74 -76
  3. package/dist/index.mjs +74 -76
  4. package/dist/jasmin.css +3984 -3984
  5. package/dist/jasmin.min.css +1 -1
  6. package/dist/plugins/jasmin-loader.js +74 -76
  7. package/dist/plugins/jasmin-loader.mjs +74 -76
  8. package/dist/plugins/nextjs.js +74 -76
  9. package/dist/plugins/nextjs.mjs +74 -76
  10. package/dist/plugins/vite.js +74 -76
  11. package/dist/plugins/vite.mjs +74 -76
  12. package/package.json +1 -1
  13. package/src/core/utilities/index.js +8 -6
  14. package/src/core/utilities/layout.js +27 -27
  15. package/src/core/utilities/spacing.js +33 -33
  16. package/src/core/utilities/transforms.js +8 -8
package/JASMINCSS-GUIDE.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  > **Complete reference of all available utility classes and components**
4
4
  >
5
- > Generated automatically from JasminCSS v1.0.6
5
+ > Generated automatically from JasminCSS v1.0.7
6
6
 
7
7
  ## Table of Contents
8
8
 
@@ -387,7 +387,7 @@
387
387
  | `aspect-auto` | `aspect-ratio: auto;` |
388
388
  | `aspect-square` | `aspect-ratio: 1 / 1;` |
389
389
  | `aspect-video` | `aspect-ratio: 16 / 9;` |
390
- | `aspect-4\/3` | `aspect-ratio: 4 / 3;` |
390
+ | `aspect-4/3` | `aspect-ratio: 4 / 3;` |
391
391
  | `visible` | `visibility: visible;` |
392
392
  | `invisible` | `visibility: hidden;` |
393
393
  | `collapse` | `visibility: collapse;` |
package/dist/index.js CHANGED
@@ -498,10 +498,10 @@ function generateLayoutUtilities(config) {
498
498
  });
499
499
  const spacing = config.spacing || {};
500
500
  Object.entries(spacing).forEach(([key, value]) => {
501
- const safeName = key.replace(".", "\\.");
502
- classes.push({ name: `gap-${safeName}`, css: `.gap-${safeName} { gap: ${value}; }` });
503
- classes.push({ name: `gap-x-${safeName}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
504
- classes.push({ name: `gap-y-${safeName}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
501
+ const safeName = key.replace(/\./g, "\\.");
502
+ classes.push({ name: `gap-${key}`, css: `.gap-${safeName} { gap: ${value}; }` });
503
+ classes.push({ name: `gap-x-${key}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
504
+ classes.push({ name: `gap-y-${key}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
505
505
  });
506
506
  for (let i = 1; i <= 12; i++) {
507
507
  classes.push({
@@ -555,20 +555,20 @@ function generateLayoutUtilities(config) {
555
555
  });
556
556
  const insetValues = { "0": "0", "auto": "auto", "full": "100%", "1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%", "1/4": "25%", "3/4": "75%" };
557
557
  Object.entries({ ...spacing, ...insetValues }).forEach(([key, value]) => {
558
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
559
- classes.push({ name: `inset-${safeName}`, css: `.inset-${safeName} { inset: ${value}; }` });
560
- classes.push({ name: `inset-x-${safeName}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
561
- classes.push({ name: `inset-y-${safeName}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
562
- classes.push({ name: `top-${safeName}`, css: `.top-${safeName} { top: ${value}; }` });
563
- classes.push({ name: `right-${safeName}`, css: `.right-${safeName} { right: ${value}; }` });
564
- classes.push({ name: `bottom-${safeName}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
565
- classes.push({ name: `left-${safeName}`, css: `.left-${safeName} { left: ${value}; }` });
558
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
559
+ classes.push({ name: `inset-${key}`, css: `.inset-${safeName} { inset: ${value}; }` });
560
+ classes.push({ name: `inset-x-${key}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
561
+ classes.push({ name: `inset-y-${key}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
562
+ classes.push({ name: `top-${key}`, css: `.top-${safeName} { top: ${value}; }` });
563
+ classes.push({ name: `right-${key}`, css: `.right-${safeName} { right: ${value}; }` });
564
+ classes.push({ name: `bottom-${key}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
565
+ classes.push({ name: `left-${key}`, css: `.left-${safeName} { left: ${value}; }` });
566
566
  if (key !== "auto" && key !== "full" && !key.includes("/")) {
567
- classes.push({ name: `-inset-${safeName}`, css: `.-inset-${safeName} { inset: -${value}; }` });
568
- classes.push({ name: `-top-${safeName}`, css: `.-top-${safeName} { top: -${value}; }` });
569
- classes.push({ name: `-right-${safeName}`, css: `.-right-${safeName} { right: -${value}; }` });
570
- classes.push({ name: `-bottom-${safeName}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
571
- classes.push({ name: `-left-${safeName}`, css: `.-left-${safeName} { left: -${value}; }` });
567
+ classes.push({ name: `-inset-${key}`, css: `.-inset-${safeName} { inset: -${value}; }` });
568
+ classes.push({ name: `-top-${key}`, css: `.-top-${safeName} { top: -${value}; }` });
569
+ classes.push({ name: `-right-${key}`, css: `.-right-${safeName} { right: -${value}; }` });
570
+ classes.push({ name: `-bottom-${key}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
571
+ classes.push({ name: `-left-${key}`, css: `.-left-${safeName} { left: -${value}; }` });
572
572
  }
573
573
  });
574
574
  ["auto", "0", "10", "20", "30", "40", "50"].forEach((z) => {
@@ -619,8 +619,8 @@ function generateLayoutUtilities(config) {
619
619
  "11/12": "91.666667%"
620
620
  };
621
621
  Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
622
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
623
- classes.push({ name: `w-${safeName}`, css: `.w-${safeName} { width: ${value}; }` });
622
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
623
+ classes.push({ name: `w-${key}`, css: `.w-${safeName} { width: ${value}; }` });
624
624
  });
625
625
  const heightSizes = {
626
626
  "0": "0",
@@ -648,8 +648,8 @@ function generateLayoutUtilities(config) {
648
648
  "5/6": "83.333333%"
649
649
  };
650
650
  Object.entries({ ...spacing, ...heightSizes }).forEach(([key, value]) => {
651
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
652
- classes.push({ name: `h-${safeName}`, css: `.h-${safeName} { height: ${value}; }` });
651
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
652
+ classes.push({ name: `h-${key}`, css: `.h-${safeName} { height: ${value}; }` });
653
653
  });
654
654
  const minMaxWidths = { "0": "0", "none": "none", "xs": "20rem", "sm": "24rem", "md": "28rem", "lg": "32rem", "xl": "36rem", "2xl": "42rem", "3xl": "48rem", "4xl": "56rem", "5xl": "64rem", "6xl": "72rem", "7xl": "80rem", "full": "100%", "min": "min-content", "max": "max-content", "fit": "fit-content", "prose": "65ch", "screen-sm": "640px", "screen-md": "768px", "screen-lg": "1024px", "screen-xl": "1280px", "screen-2xl": "1536px" };
655
655
  Object.entries(minMaxWidths).forEach(([key, value]) => {
@@ -662,14 +662,14 @@ function generateLayoutUtilities(config) {
662
662
  classes.push({ name: `max-h-${key}`, css: `.max-h-${key} { max-height: ${value}; }` });
663
663
  });
664
664
  Object.entries(spacing).forEach(([key, value]) => {
665
- const safeName = key.replace(".", "\\.");
666
- classes.push({ name: `min-h-${safeName}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
667
- classes.push({ name: `max-h-${safeName}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
665
+ const safeName = key.replace(/\./g, "\\.");
666
+ classes.push({ name: `min-h-${key}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
667
+ classes.push({ name: `max-h-${key}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
668
668
  });
669
669
  Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
670
670
  if (key !== "screen" && key !== "svw" && key !== "lvw" && key !== "dvw") {
671
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
672
- classes.push({ name: `size-${safeName}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
671
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
672
+ classes.push({ name: `size-${key}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
673
673
  }
674
674
  });
675
675
  ["auto", "hidden", "clip", "visible", "scroll"].forEach((o) => {
@@ -686,7 +686,7 @@ function generateLayoutUtilities(config) {
686
686
  classes.push({ name: "aspect-auto", css: ".aspect-auto { aspect-ratio: auto; }" });
687
687
  classes.push({ name: "aspect-square", css: ".aspect-square { aspect-ratio: 1 / 1; }" });
688
688
  classes.push({ name: "aspect-video", css: ".aspect-video { aspect-ratio: 16 / 9; }" });
689
- classes.push({ name: "aspect-4\\/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
689
+ classes.push({ name: "aspect-4/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
690
690
  classes.push({ name: "visible", css: ".visible { visibility: visible; }" });
691
691
  classes.push({ name: "invisible", css: ".invisible { visibility: hidden; }" });
692
692
  classes.push({ name: "collapse", css: ".collapse { visibility: collapse; }" });
@@ -814,28 +814,28 @@ function generateSpacingUtilities(config, options = {}) {
814
814
  const spacing = config.spacing || {};
815
815
  const { usedClasses } = options;
816
816
  Object.entries(spacing).forEach(([key, value]) => {
817
- const safeName = key.replace(".", "\\.");
818
- classes.push({ name: `p-${safeName}`, css: `.p-${safeName} { padding: ${value}; }` });
819
- classes.push({ name: `pt-${safeName}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
820
- classes.push({ name: `pr-${safeName}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
821
- classes.push({ name: `pb-${safeName}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
822
- classes.push({ name: `pl-${safeName}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
823
- classes.push({ name: `px-${safeName}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
824
- classes.push({ name: `py-${safeName}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
825
- classes.push({ name: `ps-${safeName}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
826
- classes.push({ name: `pe-${safeName}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
817
+ const safeName = key.replace(/\./g, "\\.");
818
+ classes.push({ name: `p-${key}`, css: `.p-${safeName} { padding: ${value}; }` });
819
+ classes.push({ name: `pt-${key}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
820
+ classes.push({ name: `pr-${key}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
821
+ classes.push({ name: `pb-${key}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
822
+ classes.push({ name: `pl-${key}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
823
+ classes.push({ name: `px-${key}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
824
+ classes.push({ name: `py-${key}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
825
+ classes.push({ name: `ps-${key}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
826
+ classes.push({ name: `pe-${key}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
827
827
  });
828
828
  Object.entries(spacing).forEach(([key, value]) => {
829
- const safeName = key.replace(".", "\\.");
830
- classes.push({ name: `m-${safeName}`, css: `.m-${safeName} { margin: ${value}; }` });
831
- classes.push({ name: `mt-${safeName}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
832
- classes.push({ name: `mr-${safeName}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
833
- classes.push({ name: `mb-${safeName}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
834
- classes.push({ name: `ml-${safeName}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
835
- classes.push({ name: `mx-${safeName}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
836
- classes.push({ name: `my-${safeName}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
837
- classes.push({ name: `ms-${safeName}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
838
- classes.push({ name: `me-${safeName}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
829
+ const safeName = key.replace(/\./g, "\\.");
830
+ classes.push({ name: `m-${key}`, css: `.m-${safeName} { margin: ${value}; }` });
831
+ classes.push({ name: `mt-${key}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
832
+ classes.push({ name: `mr-${key}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
833
+ classes.push({ name: `mb-${key}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
834
+ classes.push({ name: `ml-${key}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
835
+ classes.push({ name: `mx-${key}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
836
+ classes.push({ name: `my-${key}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
837
+ classes.push({ name: `ms-${key}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
838
+ classes.push({ name: `me-${key}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
839
839
  });
840
840
  classes.push({ name: "m-auto", css: ".m-auto { margin: auto; }" });
841
841
  classes.push({ name: "mx-auto", css: ".mx-auto { margin-left: auto; margin-right: auto; }" });
@@ -849,32 +849,32 @@ function generateSpacingUtilities(config, options = {}) {
849
849
  Object.entries(spacing).forEach(([key, value]) => {
850
850
  if (key === "0" || key === "px")
851
851
  return;
852
- const safeName = key.replace(".", "\\.");
853
- classes.push({ name: `-m-${safeName}`, css: `.-m-${safeName} { margin: -${value}; }` });
854
- classes.push({ name: `-mt-${safeName}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
855
- classes.push({ name: `-mr-${safeName}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
856
- classes.push({ name: `-mb-${safeName}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
857
- classes.push({ name: `-ml-${safeName}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
858
- classes.push({ name: `-mx-${safeName}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
859
- classes.push({ name: `-my-${safeName}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
852
+ const safeName = key.replace(/\./g, "\\.");
853
+ classes.push({ name: `-m-${key}`, css: `.-m-${safeName} { margin: -${value}; }` });
854
+ classes.push({ name: `-mt-${key}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
855
+ classes.push({ name: `-mr-${key}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
856
+ classes.push({ name: `-mb-${key}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
857
+ classes.push({ name: `-ml-${key}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
858
+ classes.push({ name: `-mx-${key}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
859
+ classes.push({ name: `-my-${key}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
860
860
  });
861
861
  Object.entries(spacing).forEach(([key, value]) => {
862
- const safeName = key.replace(".", "\\.");
862
+ const safeName = key.replace(/\./g, "\\.");
863
863
  classes.push({
864
- name: `space-x-${safeName}`,
864
+ name: `space-x-${key}`,
865
865
  css: `.space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: ${value}; }`
866
866
  });
867
867
  classes.push({
868
- name: `space-y-${safeName}`,
868
+ name: `space-y-${key}`,
869
869
  css: `.space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: ${value}; }`
870
870
  });
871
871
  if (key !== "0" && key !== "px") {
872
872
  classes.push({
873
- name: `-space-x-${safeName}`,
873
+ name: `-space-x-${key}`,
874
874
  css: `.-space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: -${value}; }`
875
875
  });
876
876
  classes.push({
877
- name: `-space-y-${safeName}`,
877
+ name: `-space-y-${key}`,
878
878
  css: `.-space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: -${value}; }`
879
879
  });
880
880
  }
@@ -1723,19 +1723,19 @@ function generateTransformUtilities(config) {
1723
1723
  "full": "100%"
1724
1724
  };
1725
1725
  Object.entries(translateValues).forEach(([key, value]) => {
1726
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
1727
- classes.push({ name: `translate-x-${safeName}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
1728
- classes.push({ name: `translate-y-${safeName}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
1726
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
1727
+ classes.push({ name: `translate-x-${key}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
1728
+ classes.push({ name: `translate-y-${key}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
1729
1729
  if (!key.includes("/")) {
1730
- classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1731
- classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1730
+ classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1731
+ classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1732
1732
  }
1733
1733
  });
1734
1734
  ["1/2", "1/3", "2/3", "1/4", "3/4", "full"].forEach((key) => {
1735
1735
  const value = translateValues[key];
1736
- const safeName = key.replace("/", "\\/");
1737
- classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1738
- classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1736
+ const safeName = key.replace(/\//g, "\\/");
1737
+ classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1738
+ classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1739
1739
  });
1740
1740
  const skews = [0, 1, 2, 3, 6, 12];
1741
1741
  skews.forEach((s) => {
@@ -3540,12 +3540,13 @@ function generateResponsiveUtilities(config, selectedUtilities, usedClasses, inc
3540
3540
  const { classes } = generator(config);
3541
3541
  for (const cls of classes) {
3542
3542
  const escapedBp = escapeCssSelector(bp);
3543
- const escapedName = cls.name.replace(/\./g, "\\.");
3543
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3544
3544
  const responsiveClassName = `${escapedBp}\\:${escapedName}`;
3545
3545
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${bp}:${cls.name}`);
3546
3546
  if (shouldInclude) {
3547
+ const regexSafeName = escapedName.replace(/\\/g, "\\\\");
3547
3548
  bpClasses.push(cls.css.replace(
3548
- new RegExp(`\\.${escapeRegex(cls.name)}`, "g"),
3549
+ new RegExp(`\\.${regexSafeName}(?=[^-\\w])`, "g"),
3549
3550
  `.${responsiveClassName}`
3550
3551
  ));
3551
3552
  }
@@ -3584,7 +3585,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3584
3585
  for (const cls of classes) {
3585
3586
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3586
3587
  continue;
3587
- const escapedName = cls.name.replace(/\./g, "\\.");
3588
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3588
3589
  const stateClassName = `${state}\\:${escapedName}`;
3589
3590
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${state}:${cls.name}`);
3590
3591
  if (shouldInclude) {
@@ -3611,7 +3612,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3611
3612
  for (const cls of classes) {
3612
3613
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3613
3614
  continue;
3614
- const escapedName = cls.name.replace(/\./g, "\\.");
3615
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3615
3616
  const stateClassName = `group-hover\\:${escapedName}`;
3616
3617
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`group-hover:${cls.name}`);
3617
3618
  if (shouldInclude) {
@@ -3636,7 +3637,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3636
3637
  for (const cls of classes) {
3637
3638
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3638
3639
  continue;
3639
- const escapedName = cls.name.replace(/\./g, "\\.");
3640
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3640
3641
  const darkClassName = `dark\\:${escapedName}`;
3641
3642
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`dark:${cls.name}`);
3642
3643
  if (shouldInclude) {
@@ -3653,9 +3654,6 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3653
3654
  }
3654
3655
  return parts.join("\n");
3655
3656
  }
3656
- function escapeRegex(string) {
3657
- return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3658
- }
3659
3657
  function escapeCssSelector(name) {
3660
3658
  if (/^\d/.test(name)) {
3661
3659
  const firstChar = name.charCodeAt(0).toString(16);
package/dist/index.mjs CHANGED
@@ -455,10 +455,10 @@ function generateLayoutUtilities(config) {
455
455
  });
456
456
  const spacing = config.spacing || {};
457
457
  Object.entries(spacing).forEach(([key, value]) => {
458
- const safeName = key.replace(".", "\\.");
459
- classes.push({ name: `gap-${safeName}`, css: `.gap-${safeName} { gap: ${value}; }` });
460
- classes.push({ name: `gap-x-${safeName}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
461
- classes.push({ name: `gap-y-${safeName}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
458
+ const safeName = key.replace(/\./g, "\\.");
459
+ classes.push({ name: `gap-${key}`, css: `.gap-${safeName} { gap: ${value}; }` });
460
+ classes.push({ name: `gap-x-${key}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
461
+ classes.push({ name: `gap-y-${key}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
462
462
  });
463
463
  for (let i = 1; i <= 12; i++) {
464
464
  classes.push({
@@ -512,20 +512,20 @@ function generateLayoutUtilities(config) {
512
512
  });
513
513
  const insetValues = { "0": "0", "auto": "auto", "full": "100%", "1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%", "1/4": "25%", "3/4": "75%" };
514
514
  Object.entries({ ...spacing, ...insetValues }).forEach(([key, value]) => {
515
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
516
- classes.push({ name: `inset-${safeName}`, css: `.inset-${safeName} { inset: ${value}; }` });
517
- classes.push({ name: `inset-x-${safeName}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
518
- classes.push({ name: `inset-y-${safeName}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
519
- classes.push({ name: `top-${safeName}`, css: `.top-${safeName} { top: ${value}; }` });
520
- classes.push({ name: `right-${safeName}`, css: `.right-${safeName} { right: ${value}; }` });
521
- classes.push({ name: `bottom-${safeName}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
522
- classes.push({ name: `left-${safeName}`, css: `.left-${safeName} { left: ${value}; }` });
515
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
516
+ classes.push({ name: `inset-${key}`, css: `.inset-${safeName} { inset: ${value}; }` });
517
+ classes.push({ name: `inset-x-${key}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
518
+ classes.push({ name: `inset-y-${key}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
519
+ classes.push({ name: `top-${key}`, css: `.top-${safeName} { top: ${value}; }` });
520
+ classes.push({ name: `right-${key}`, css: `.right-${safeName} { right: ${value}; }` });
521
+ classes.push({ name: `bottom-${key}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
522
+ classes.push({ name: `left-${key}`, css: `.left-${safeName} { left: ${value}; }` });
523
523
  if (key !== "auto" && key !== "full" && !key.includes("/")) {
524
- classes.push({ name: `-inset-${safeName}`, css: `.-inset-${safeName} { inset: -${value}; }` });
525
- classes.push({ name: `-top-${safeName}`, css: `.-top-${safeName} { top: -${value}; }` });
526
- classes.push({ name: `-right-${safeName}`, css: `.-right-${safeName} { right: -${value}; }` });
527
- classes.push({ name: `-bottom-${safeName}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
528
- classes.push({ name: `-left-${safeName}`, css: `.-left-${safeName} { left: -${value}; }` });
524
+ classes.push({ name: `-inset-${key}`, css: `.-inset-${safeName} { inset: -${value}; }` });
525
+ classes.push({ name: `-top-${key}`, css: `.-top-${safeName} { top: -${value}; }` });
526
+ classes.push({ name: `-right-${key}`, css: `.-right-${safeName} { right: -${value}; }` });
527
+ classes.push({ name: `-bottom-${key}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
528
+ classes.push({ name: `-left-${key}`, css: `.-left-${safeName} { left: -${value}; }` });
529
529
  }
530
530
  });
531
531
  ["auto", "0", "10", "20", "30", "40", "50"].forEach((z) => {
@@ -576,8 +576,8 @@ function generateLayoutUtilities(config) {
576
576
  "11/12": "91.666667%"
577
577
  };
578
578
  Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
579
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
580
- classes.push({ name: `w-${safeName}`, css: `.w-${safeName} { width: ${value}; }` });
579
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
580
+ classes.push({ name: `w-${key}`, css: `.w-${safeName} { width: ${value}; }` });
581
581
  });
582
582
  const heightSizes = {
583
583
  "0": "0",
@@ -605,8 +605,8 @@ function generateLayoutUtilities(config) {
605
605
  "5/6": "83.333333%"
606
606
  };
607
607
  Object.entries({ ...spacing, ...heightSizes }).forEach(([key, value]) => {
608
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
609
- classes.push({ name: `h-${safeName}`, css: `.h-${safeName} { height: ${value}; }` });
608
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
609
+ classes.push({ name: `h-${key}`, css: `.h-${safeName} { height: ${value}; }` });
610
610
  });
611
611
  const minMaxWidths = { "0": "0", "none": "none", "xs": "20rem", "sm": "24rem", "md": "28rem", "lg": "32rem", "xl": "36rem", "2xl": "42rem", "3xl": "48rem", "4xl": "56rem", "5xl": "64rem", "6xl": "72rem", "7xl": "80rem", "full": "100%", "min": "min-content", "max": "max-content", "fit": "fit-content", "prose": "65ch", "screen-sm": "640px", "screen-md": "768px", "screen-lg": "1024px", "screen-xl": "1280px", "screen-2xl": "1536px" };
612
612
  Object.entries(minMaxWidths).forEach(([key, value]) => {
@@ -619,14 +619,14 @@ function generateLayoutUtilities(config) {
619
619
  classes.push({ name: `max-h-${key}`, css: `.max-h-${key} { max-height: ${value}; }` });
620
620
  });
621
621
  Object.entries(spacing).forEach(([key, value]) => {
622
- const safeName = key.replace(".", "\\.");
623
- classes.push({ name: `min-h-${safeName}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
624
- classes.push({ name: `max-h-${safeName}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
622
+ const safeName = key.replace(/\./g, "\\.");
623
+ classes.push({ name: `min-h-${key}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
624
+ classes.push({ name: `max-h-${key}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
625
625
  });
626
626
  Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
627
627
  if (key !== "screen" && key !== "svw" && key !== "lvw" && key !== "dvw") {
628
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
629
- classes.push({ name: `size-${safeName}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
628
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
629
+ classes.push({ name: `size-${key}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
630
630
  }
631
631
  });
632
632
  ["auto", "hidden", "clip", "visible", "scroll"].forEach((o) => {
@@ -643,7 +643,7 @@ function generateLayoutUtilities(config) {
643
643
  classes.push({ name: "aspect-auto", css: ".aspect-auto { aspect-ratio: auto; }" });
644
644
  classes.push({ name: "aspect-square", css: ".aspect-square { aspect-ratio: 1 / 1; }" });
645
645
  classes.push({ name: "aspect-video", css: ".aspect-video { aspect-ratio: 16 / 9; }" });
646
- classes.push({ name: "aspect-4\\/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
646
+ classes.push({ name: "aspect-4/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
647
647
  classes.push({ name: "visible", css: ".visible { visibility: visible; }" });
648
648
  classes.push({ name: "invisible", css: ".invisible { visibility: hidden; }" });
649
649
  classes.push({ name: "collapse", css: ".collapse { visibility: collapse; }" });
@@ -771,28 +771,28 @@ function generateSpacingUtilities(config, options = {}) {
771
771
  const spacing = config.spacing || {};
772
772
  const { usedClasses } = options;
773
773
  Object.entries(spacing).forEach(([key, value]) => {
774
- const safeName = key.replace(".", "\\.");
775
- classes.push({ name: `p-${safeName}`, css: `.p-${safeName} { padding: ${value}; }` });
776
- classes.push({ name: `pt-${safeName}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
777
- classes.push({ name: `pr-${safeName}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
778
- classes.push({ name: `pb-${safeName}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
779
- classes.push({ name: `pl-${safeName}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
780
- classes.push({ name: `px-${safeName}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
781
- classes.push({ name: `py-${safeName}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
782
- classes.push({ name: `ps-${safeName}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
783
- classes.push({ name: `pe-${safeName}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
774
+ const safeName = key.replace(/\./g, "\\.");
775
+ classes.push({ name: `p-${key}`, css: `.p-${safeName} { padding: ${value}; }` });
776
+ classes.push({ name: `pt-${key}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
777
+ classes.push({ name: `pr-${key}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
778
+ classes.push({ name: `pb-${key}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
779
+ classes.push({ name: `pl-${key}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
780
+ classes.push({ name: `px-${key}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
781
+ classes.push({ name: `py-${key}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
782
+ classes.push({ name: `ps-${key}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
783
+ classes.push({ name: `pe-${key}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
784
784
  });
785
785
  Object.entries(spacing).forEach(([key, value]) => {
786
- const safeName = key.replace(".", "\\.");
787
- classes.push({ name: `m-${safeName}`, css: `.m-${safeName} { margin: ${value}; }` });
788
- classes.push({ name: `mt-${safeName}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
789
- classes.push({ name: `mr-${safeName}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
790
- classes.push({ name: `mb-${safeName}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
791
- classes.push({ name: `ml-${safeName}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
792
- classes.push({ name: `mx-${safeName}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
793
- classes.push({ name: `my-${safeName}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
794
- classes.push({ name: `ms-${safeName}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
795
- classes.push({ name: `me-${safeName}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
786
+ const safeName = key.replace(/\./g, "\\.");
787
+ classes.push({ name: `m-${key}`, css: `.m-${safeName} { margin: ${value}; }` });
788
+ classes.push({ name: `mt-${key}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
789
+ classes.push({ name: `mr-${key}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
790
+ classes.push({ name: `mb-${key}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
791
+ classes.push({ name: `ml-${key}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
792
+ classes.push({ name: `mx-${key}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
793
+ classes.push({ name: `my-${key}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
794
+ classes.push({ name: `ms-${key}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
795
+ classes.push({ name: `me-${key}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
796
796
  });
797
797
  classes.push({ name: "m-auto", css: ".m-auto { margin: auto; }" });
798
798
  classes.push({ name: "mx-auto", css: ".mx-auto { margin-left: auto; margin-right: auto; }" });
@@ -806,32 +806,32 @@ function generateSpacingUtilities(config, options = {}) {
806
806
  Object.entries(spacing).forEach(([key, value]) => {
807
807
  if (key === "0" || key === "px")
808
808
  return;
809
- const safeName = key.replace(".", "\\.");
810
- classes.push({ name: `-m-${safeName}`, css: `.-m-${safeName} { margin: -${value}; }` });
811
- classes.push({ name: `-mt-${safeName}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
812
- classes.push({ name: `-mr-${safeName}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
813
- classes.push({ name: `-mb-${safeName}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
814
- classes.push({ name: `-ml-${safeName}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
815
- classes.push({ name: `-mx-${safeName}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
816
- classes.push({ name: `-my-${safeName}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
809
+ const safeName = key.replace(/\./g, "\\.");
810
+ classes.push({ name: `-m-${key}`, css: `.-m-${safeName} { margin: -${value}; }` });
811
+ classes.push({ name: `-mt-${key}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
812
+ classes.push({ name: `-mr-${key}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
813
+ classes.push({ name: `-mb-${key}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
814
+ classes.push({ name: `-ml-${key}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
815
+ classes.push({ name: `-mx-${key}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
816
+ classes.push({ name: `-my-${key}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
817
817
  });
818
818
  Object.entries(spacing).forEach(([key, value]) => {
819
- const safeName = key.replace(".", "\\.");
819
+ const safeName = key.replace(/\./g, "\\.");
820
820
  classes.push({
821
- name: `space-x-${safeName}`,
821
+ name: `space-x-${key}`,
822
822
  css: `.space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: ${value}; }`
823
823
  });
824
824
  classes.push({
825
- name: `space-y-${safeName}`,
825
+ name: `space-y-${key}`,
826
826
  css: `.space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: ${value}; }`
827
827
  });
828
828
  if (key !== "0" && key !== "px") {
829
829
  classes.push({
830
- name: `-space-x-${safeName}`,
830
+ name: `-space-x-${key}`,
831
831
  css: `.-space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: -${value}; }`
832
832
  });
833
833
  classes.push({
834
- name: `-space-y-${safeName}`,
834
+ name: `-space-y-${key}`,
835
835
  css: `.-space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: -${value}; }`
836
836
  });
837
837
  }
@@ -1680,19 +1680,19 @@ function generateTransformUtilities(config) {
1680
1680
  "full": "100%"
1681
1681
  };
1682
1682
  Object.entries(translateValues).forEach(([key, value]) => {
1683
- const safeName = key.replace("/", "\\/").replace(".", "\\.");
1684
- classes.push({ name: `translate-x-${safeName}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
1685
- classes.push({ name: `translate-y-${safeName}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
1683
+ const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
1684
+ classes.push({ name: `translate-x-${key}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
1685
+ classes.push({ name: `translate-y-${key}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
1686
1686
  if (!key.includes("/")) {
1687
- classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1688
- classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1687
+ classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1688
+ classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1689
1689
  }
1690
1690
  });
1691
1691
  ["1/2", "1/3", "2/3", "1/4", "3/4", "full"].forEach((key) => {
1692
1692
  const value = translateValues[key];
1693
- const safeName = key.replace("/", "\\/");
1694
- classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1695
- classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1693
+ const safeName = key.replace(/\//g, "\\/");
1694
+ classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
1695
+ classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
1696
1696
  });
1697
1697
  const skews = [0, 1, 2, 3, 6, 12];
1698
1698
  skews.forEach((s) => {
@@ -3497,12 +3497,13 @@ function generateResponsiveUtilities(config, selectedUtilities, usedClasses, inc
3497
3497
  const { classes } = generator(config);
3498
3498
  for (const cls of classes) {
3499
3499
  const escapedBp = escapeCssSelector(bp);
3500
- const escapedName = cls.name.replace(/\./g, "\\.");
3500
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3501
3501
  const responsiveClassName = `${escapedBp}\\:${escapedName}`;
3502
3502
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${bp}:${cls.name}`);
3503
3503
  if (shouldInclude) {
3504
+ const regexSafeName = escapedName.replace(/\\/g, "\\\\");
3504
3505
  bpClasses.push(cls.css.replace(
3505
- new RegExp(`\\.${escapeRegex(cls.name)}`, "g"),
3506
+ new RegExp(`\\.${regexSafeName}(?=[^-\\w])`, "g"),
3506
3507
  `.${responsiveClassName}`
3507
3508
  ));
3508
3509
  }
@@ -3541,7 +3542,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3541
3542
  for (const cls of classes) {
3542
3543
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3543
3544
  continue;
3544
- const escapedName = cls.name.replace(/\./g, "\\.");
3545
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3545
3546
  const stateClassName = `${state}\\:${escapedName}`;
3546
3547
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${state}:${cls.name}`);
3547
3548
  if (shouldInclude) {
@@ -3568,7 +3569,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3568
3569
  for (const cls of classes) {
3569
3570
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3570
3571
  continue;
3571
- const escapedName = cls.name.replace(/\./g, "\\.");
3572
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3572
3573
  const stateClassName = `group-hover\\:${escapedName}`;
3573
3574
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`group-hover:${cls.name}`);
3574
3575
  if (shouldInclude) {
@@ -3593,7 +3594,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3593
3594
  for (const cls of classes) {
3594
3595
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3595
3596
  continue;
3596
- const escapedName = cls.name.replace(/\./g, "\\.");
3597
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3597
3598
  const darkClassName = `dark\\:${escapedName}`;
3598
3599
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`dark:${cls.name}`);
3599
3600
  if (shouldInclude) {
@@ -3610,9 +3611,6 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3610
3611
  }
3611
3612
  return parts.join("\n");
3612
3613
  }
3613
- function escapeRegex(string) {
3614
- return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3615
- }
3616
3614
  function escapeCssSelector(name) {
3617
3615
  if (/^\d/.test(name)) {
3618
3616
  const firstChar = name.charCodeAt(0).toString(16);