Escape className

Author: benface

CHANGELOG.md

@@ -5,9 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2019-12-20
+
+### Fixed
+- The `className` option is now properly escaped in the generated CSS
+
 ## [1.0.0] - 2019-12-20
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-alt/compare/v1.0.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-alt/compare/v1.0.1...HEAD
+[1.0.1]: https://github.com/benface/tailwindcss-alt/releases/tag/v1.0.1
 [1.0.0]: https://github.com/benface/tailwindcss-alt/releases/tag/v1.0.0

index.js

@@ -2,7 +2,7 @@ const _ = require('lodash');
 const selectorParser = require('postcss-selector-parser');
 
 module.exports = function(options = {}) {
-  return ({ addVariant }) => {
+  return ({ addVariant, e }) => {
     const defaultOptions = {
       className: 'alt',
     };
@@ -14,7 +14,7 @@ module.exports = function(options = {}) {
           return selectorParser(selectors => {
             selectors.walkClasses(classNode => {
               classNode.value = `${options.className}${separator}${pseudoClass}${separator}${classNode.value}`;
-              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} `));
+              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${e(options.className)} `));
               classNode.parent.insertAfter(classNode, selectorParser.pseudo({ value: `:${pseudoClass}` }));
             });
           }).processSync(selector);
@@ -28,7 +28,7 @@ module.exports = function(options = {}) {
           return selectorParser(selectors => {
             selectors.walkClasses(classNode => {
               classNode.value = `${options.className}${separator}group-${pseudoClass}${separator}${classNode.value}`;
-              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} .group:${pseudoClass} `));
+              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${e(options.className)} .group:${pseudoClass} `));
             });
           }).processSync(selector);
         });
@@ -40,7 +40,7 @@ module.exports = function(options = {}) {
         return selectorParser(selectors => {
           selectors.walkClasses(classNode => {
             classNode.value = `${options.className}${separator}${classNode.value}`;
-            classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} `));
+            classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${e(options.className)} `));
           });
         }).processSync(selector);
       });

test.js

@@ -248,3 +248,18 @@ test('the alt class name can be customized', () => {
     `);
   });
 });
+
+test('custom class names are escaped', () => {
+  return generatePluginCss(['alt'], {
+    className: 'test-1/2',
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .block {
+        display: block;
+      }
+      .test-1\\/2 .test-1\\/2\\:block {
+        display: block;
+      }
+    `);
+  });
+});