Wrong escapation in addVariant separator

[D3m1urg0]

Hello, i am having issues releated to this: #618 .
I am referencing to the unicode escapation,
i read there a solution in the postcss-selector-parser API has been found but i can't understand how to apply the fix.

here my situation:

i wrote a group-checked variant like this:

const selectorParser = require("postcss-selector-parser");

const pseudoClassVariant = function(pseudoClass) {
  return ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(classNode => {
          classNode.value = `${pseudoClass}${separator}${classNode.value}`;
          classNode.parent.insertAfter(
            classNode,
            selectorParser.pseudo({ value: `:${pseudoClass}` })
          );
        });
      }).processSync(selector);
    });
  };
};

const groupPseudoClassVariant = function(pseudoClass) {
  return ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(classNode => {
          classNode.value = `group-${pseudoClass}${separator}${classNode.value}`;
          classNode.parent.insertBefore(
            classNode,
            selectorParser().astSync(`.group > input:${pseudoClass} ~`)
          );
        });
      }).processSync(selector);
    });
  };
};

module.exports = function() {
  return ({ addVariant }) => {
    addVariant("checked", pseudoClassVariant("checked"));
    addVariant("group-checked", groupPseudoClassVariant("checked"));
  };
};

but it builds like this:

.checked3A block:checked {
  display: block;
}
.checked3Ainline-block:checked {
  display: inline-block;
}
.checked3Ainline:checked {
  display: inline;
}
.checked3A flex:checked {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.checked3Ainline-flex:checked {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.checked3Atable:checked {
  display: table;
}
.checked3Atable-row:checked {
  display: table-row;
}
.checked3Atable-cell:checked {
  display: table-cell;
}
.checked3Ahidden:checked {
  display: none;
}
.group > input:checked ~ .group-checked\\3a block {
  display: block;
}
.group > input:checked ~ .group-checked\\3ainline-block {
  display: inline-block;
}
.group > input:checked ~ .group-checked\\3ainline {
  display: inline;
}
.group > input:checked ~ .group-checked\\3a flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.group > input:checked ~ .group-checked\\3ainline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.group > input:checked ~ .group-checked\\3atable {
  display: table;
}
.group > input:checked ~ .group-checked\\3atable-row {
  display: table-row;
}
.group > input:checked ~ .group-checked\\3atable-cell {
  display: table-cell;
}
.group > input:checked ~ .group-checked\\3ahidden {
  display: none;
}

[hacknug]

You need to use e() to escape your class names. Take a look at the docs example here: https://tailwindcss.com/docs/plugins/#adding-variants

[tlgreg]

It might be a postcss-selector-parser issue, not sure.
Without postcss-selector-parser and more manual concatenating of the selector the same plugin would look something like:
https://tailwind.run/XuPyQt

[adamwathan]

I would make sure all your dependencies are up to date as I just copied your code into a fresh Tailwind 1.1.2 project and I get the output I'd expect:

.flex-grow-0 {
  flex-grow: 0
}

.flex-grow {
  flex-grow: 1
}

.checked\:flex-grow-0:checked {
  flex-grow: 0
}

.checked\:flex-grow:checked {
  flex-grow: 1
}

.group > input:checked ~.group-checked\:flex-grow-0 {
  flex-grow: 0
}

.group > input:checked ~.group-checked\:flex-grow {
  flex-grow: 1
}

The problem you're running into should have been fixed in postcss-selector-parser 6.0 (https://github.com/postcss/postcss-selector-parser/releases/tag/6.0.0), which is when they switched to cssesc 3.0 which simplified the escape handling of special characters (mathiasbynens/cssesc#19).