jasmincss 1.0.5 → 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 +78 -76
  3. package/dist/index.mjs +78 -76
  4. package/dist/jasmin.css +1292 -1292
  5. package/dist/jasmin.min.css +1 -1
  6. package/dist/plugins/jasmin-loader.js +78 -76
  7. package/dist/plugins/jasmin-loader.mjs +78 -76
  8. package/dist/plugins/nextjs.js +78 -76
  9. package/dist/plugins/nextjs.mjs +78 -76
  10. package/dist/plugins/vite.js +78 -76
  11. package/dist/plugins/vite.mjs +78 -76
  12. package/package.json +1 -1
  13. package/src/core/utilities/index.js +13 -5
  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.5
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,11 +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 responsiveClassName = `${escapedBp}\\:${cls.name}`;
3543
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3544
+ const responsiveClassName = `${escapedBp}\\:${escapedName}`;
3544
3545
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${bp}:${cls.name}`);
3545
3546
  if (shouldInclude) {
3547
+ const regexSafeName = escapedName.replace(/\\/g, "\\\\");
3546
3548
  bpClasses.push(cls.css.replace(
3547
- new RegExp(`\\.${escapeRegex(cls.name)}`, "g"),
3549
+ new RegExp(`\\.${regexSafeName}(?=[^-\\w])`, "g"),
3548
3550
  `.${responsiveClassName}`
3549
3551
  ));
3550
3552
  }
@@ -3583,7 +3585,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3583
3585
  for (const cls of classes) {
3584
3586
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3585
3587
  continue;
3586
- const stateClassName = `${state}\\:${cls.name}`;
3588
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3589
+ const stateClassName = `${state}\\:${escapedName}`;
3587
3590
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${state}:${cls.name}`);
3588
3591
  if (shouldInclude) {
3589
3592
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3609,7 +3612,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3609
3612
  for (const cls of classes) {
3610
3613
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3611
3614
  continue;
3612
- const stateClassName = `group-hover\\:${cls.name}`;
3615
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3616
+ const stateClassName = `group-hover\\:${escapedName}`;
3613
3617
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`group-hover:${cls.name}`);
3614
3618
  if (shouldInclude) {
3615
3619
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3633,7 +3637,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3633
3637
  for (const cls of classes) {
3634
3638
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3635
3639
  continue;
3636
- const darkClassName = `dark\\:${cls.name}`;
3640
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3641
+ const darkClassName = `dark\\:${escapedName}`;
3637
3642
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`dark:${cls.name}`);
3638
3643
  if (shouldInclude) {
3639
3644
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3649,9 +3654,6 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3649
3654
  }
3650
3655
  return parts.join("\n");
3651
3656
  }
3652
- function escapeRegex(string) {
3653
- return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3654
- }
3655
3657
  function escapeCssSelector(name) {
3656
3658
  if (/^\d/.test(name)) {
3657
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,11 +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 responsiveClassName = `${escapedBp}\\:${cls.name}`;
3500
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3501
+ const responsiveClassName = `${escapedBp}\\:${escapedName}`;
3501
3502
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${bp}:${cls.name}`);
3502
3503
  if (shouldInclude) {
3504
+ const regexSafeName = escapedName.replace(/\\/g, "\\\\");
3503
3505
  bpClasses.push(cls.css.replace(
3504
- new RegExp(`\\.${escapeRegex(cls.name)}`, "g"),
3506
+ new RegExp(`\\.${regexSafeName}(?=[^-\\w])`, "g"),
3505
3507
  `.${responsiveClassName}`
3506
3508
  ));
3507
3509
  }
@@ -3540,7 +3542,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3540
3542
  for (const cls of classes) {
3541
3543
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3542
3544
  continue;
3543
- const stateClassName = `${state}\\:${cls.name}`;
3545
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3546
+ const stateClassName = `${state}\\:${escapedName}`;
3544
3547
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${state}:${cls.name}`);
3545
3548
  if (shouldInclude) {
3546
3549
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3566,7 +3569,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3566
3569
  for (const cls of classes) {
3567
3570
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3568
3571
  continue;
3569
- const stateClassName = `group-hover\\:${cls.name}`;
3572
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3573
+ const stateClassName = `group-hover\\:${escapedName}`;
3570
3574
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`group-hover:${cls.name}`);
3571
3575
  if (shouldInclude) {
3572
3576
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3590,7 +3594,8 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3590
3594
  for (const cls of classes) {
3591
3595
  if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
3592
3596
  continue;
3593
- const darkClassName = `dark\\:${cls.name}`;
3597
+ const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
3598
+ const darkClassName = `dark\\:${escapedName}`;
3594
3599
  const shouldInclude = includeAll || !usedClasses || usedClasses.has(`dark:${cls.name}`);
3595
3600
  if (shouldInclude) {
3596
3601
  const propsMatch = cls.css.match(/\{([^{}]+)\}/);
@@ -3606,9 +3611,6 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
3606
3611
  }
3607
3612
  return parts.join("\n");
3608
3613
  }
3609
- function escapeRegex(string) {
3610
- return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3611
- }
3612
3614
  function escapeCssSelector(name) {
3613
3615
  if (/^\d/.test(name)) {
3614
3616
  const firstChar = name.charCodeAt(0).toString(16);