fix: add additional space after the escape sequence (css-modules#17)

Author: evilebottnawi

package.json

@@ -44,6 +44,7 @@
     "postcss-selector-parser": "^6.0.0"
   },
   "devDependencies": {
+    "cssesc": "^3.0.0",
     "chokidar-cli": "^1.0.1",
     "codecov.io": "^0.1.2",
     "coveralls": "^3.0.2",

src/index.js

@@ -152,6 +152,17 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
             // non-container node
             selector.first.spaces = node.spaces;
 
+            const nextNode = node.next();
+
+            if (
+              nextNode &&
+              nextNode.type === 'combinator' &&
+              nextNode.value === ' ' &&
+              /\\[A-F0-9]{1,6}$/.test(selector.last.value)
+            ) {
+              selector.last.spaces.after = ' ';
+            }
+
             node.replaceWith(selector);
 
             return;

test/test-cases/escape-sequence/expected.css

@@ -0,0 +1,80 @@
+.\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600 A {
+  color: red;
+}
+
+.\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600 A .\1F600 {
+  color: red;
+}
+
+#\1F600  #\1F600  #\1F600 {
+  color: red;
+}
+
+#\1F600  #\1F600 A #\1F600 {
+  color: red;
+}
+
+.a .\1F600  b {
+  color: red;
+}
+
+.\1F600 > .\1F600 > .\1F600 {
+  color: red;
+}
+
+.\1F600 .\1F600 {
+  color: red;
+}
+
+.\1F600.\1F600 {
+  color: red;
+}
+
+.\1F600  .\1F600 {
+  color: red;
+}
+
+.\1F600  .a {
+  color: red;
+}
+
+.\1F600.a {
+  color: red;
+}
+
+.a .\1F600 {
+  color: red;
+}
+
+.a.\1F600 {
+  color: red;
+}
+
+:export {
+  smile: 😀;
+  smile_with_A: 😀A;
+}

test/test-cases/escape-sequence/options.js

@@ -0,0 +1,21 @@
+const cssesc = require('cssesc');
+
+const filenameReservedRegex = /[<>:"/\\|?*\x00-\x1F]/g;
+const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
+const reRelativePath = /^\.+/;
+
+module.exports = {
+  generateScopedName: function(name) {
+    return cssesc(
+      name
+        .replace(/smile/, '😀')
+        .replace(/_with_A/g, 'A')
+        .replace(/^((-?[0-9])|--)/, '_$1')
+        .replace(filenameReservedRegex, '-')
+        .replace(reControlChars, '-')
+        .replace(reRelativePath, '-')
+        .replace(/\./g, '-'),
+      { isIdentifier: true }
+    );
+  },
+};

test/test-cases/escape-sequence/source.css

@@ -0,0 +1,75 @@
+:local(.smile) {
+  color: red;
+}
+
+:local(.smile) :local(.smile) {
+  color: red;
+}
+
+:local(.smile) :local(.smile) :local(.smile) {
+  color: red;
+}
+
+:local(.smile_with_A) {
+  color: red;
+}
+
+.\1F600  :local(.smile) {
+  color: red;
+}
+
+:local(.smile) .\1F600 {
+  color: red;
+}
+
+.\1F600  :local(.smile) .\1F600 {
+  color: red;
+}
+
+.\1F600  :local(.smile_with_A) .\1F600 {
+  color: red;
+}
+
+#\1F600  :local(#smile) #\1F600 {
+  color: red;
+}
+
+#\1F600  :local(#smile_with_A) #\1F600 {
+  color: red;
+}
+
+.a :local(.smile) b {
+  color: red;
+}
+
+:local(.smile) > :local(.smile) > :local(.smile) {
+  color: red;
+}
+
+.\1F600 :local(.smile) {
+  color: red;
+}
+
+.\1F600:local(.smile) {
+  color: red;
+}
+
+.\1F600  :local(.smile) {
+  color: red;
+}
+
+:local(.smile) .a {
+  color: red;
+}
+
+:local(.smile).a {
+  color: red;
+}
+
+.a :local(.smile) {
+  color: red;
+}
+
+.a:local(.smile) {
+  color: red;
+}