fix: rename classResponsivePrefixSeparator option to responsivePrefix…

…ClassSeparator
saneef · Apr 29, 2024 · 8d7c803 · 8d7c803
1 parent 5f4ad43
commit 8d7c803
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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)}}`,
   );
 });