From 8d7c803c91af2d267765f02a6df2908c0d0d3f4c Mon Sep 17 00:00:00 2001
From: Saneef Ansari <hello@saneef.com>
Date: Mon, 29 Apr 2024 19:33:16 +0530
Subject: [PATCH] fix: rename classResponsivePrefixSeparator option to
 responsivePrefixClassSeparator

---
 README.md                     | 4 ++--
 lib/design-token-utils.js     | 8 ++++----
 test/utility-classes.test.mjs | 5 +++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 4cc05ee..95d0ff1 100644
--- a/README.md
+++ b/README.md
@@ -315,8 +315,8 @@ In the previous example, if we provide breakpoints and set `responsiveVariants:
 }
 ```
 
-You can use `classResponsivePrefixSeparator` property (default: `-`) in `options` to change the separator between responsive prefix and class name.
-To generate Tailwind style responsive modifiers, set `classResponsivePrefixSeparator: "\\:"`.
+You can use `responsivePrefixClassSeparator` property (default: `-`) in `options` to change the separator between responsive prefix and class name.
+To generate Tailwind style responsive modifiers, set `responsivePrefixClassSeparator: "\\:"`.
 _Beware if you are using purgecss.
 Class names with some special character are not considered._
 [See note](https://purgecss.com/extractors.html#default-extractor).
diff --git a/lib/design-token-utils.js b/lib/design-token-utils.js
index 44a15b5..f8fc06d 100644
--- a/lib/design-token-utils.js
+++ b/lib/design-token-utils.js
@@ -7,7 +7,7 @@ module.exports = ({
   customProperties = [],
   breakpoints = {},
   utilityClasses = [],
-  classResponsivePrefixSeparator = "-",
+  responsivePrefixClassSeparator = "-",
 } = {}) => {
   const prefixMap = new Map(
     customProperties
@@ -36,7 +36,7 @@ module.exports = ({
           Declaration,
           Rule,
           AtRule,
-          classResponsivePrefixSeparator,
+          responsivePrefixClassSeparator,
           result,
         });
       },
@@ -74,7 +74,7 @@ function insertUtilityClasses(
   atRule,
   classObjects,
   viewportEntries,
-  { AtRule, Rule, Declaration, classResponsivePrefixSeparator, result },
+  { AtRule, Rule, Declaration, responsivePrefixClassSeparator, result },
 ) {
   // Insert utility classes
   if (
@@ -112,7 +112,7 @@ function insertUtilityClasses(
             Rule,
             Declaration,
             selector: ({ selectorBase }) =>
-              `.${mqPrefix}${classResponsivePrefixSeparator}${selectorBase}`,
+              `.${mqPrefix}${responsivePrefixClassSeparator}${selectorBase}`,
           });
 
           return rule;
diff --git a/test/utility-classes.test.mjs b/test/utility-classes.test.mjs
index f042308..5b6b509 100644
--- a/test/utility-classes.test.mjs
+++ b/test/utility-classes.test.mjs
@@ -97,11 +97,12 @@ test("Generate viewport variants with colon separated classes", async (t) => {
         responsiveVariants: true,
       },
     ],
-    classResponsivePrefixSeparator: ":",
+    responsivePrefixClassSeparator: "\\:",
   };
   const res = await run(input, { tokens, ...options });
+
   t.is(
     res.css,
-    `.text-accent{color:var(--color-accent)}@media (min-width: 320px){.sm:text-accent{color:var(--color-accent)}}@media (min-width: 640px){.md:text-accent{color:var(--color-accent)}}`,
+    `.text-accent{color:var(--color-accent)}@media (min-width: 320px){.sm\\:text-accent{color:var(--color-accent)}}@media (min-width: 640px){.md\\:text-accent{color:var(--color-accent)}}`,
   );
 });
\ No newline at end of file