Quote unquoted CSS attribute values in selectors (#2644)

src/clean-ast.js

@@ -99,6 +99,11 @@ function massageAST(ast) {
       newObj.importPath = cleanCSSStrings(newObj.importPath);
     }
 
+    if (ast.type === "selector-attribute" && newObj.value) {
+      newObj.value = newObj.value.replace(/^['"]|['"]$/g, "");
+      delete newObj.quoted;
+    }
+
     // (TypeScript) Ignore `static` in `constructor(static p) {}`
     // and `export` in `constructor(export p) {}`
     if (

src/printer-postcss.js

@@ -214,7 +214,9 @@ function genericPrint(path, options, print) {
         "[",
         n.attribute,
         n.operator ? n.operator : "",
-        n.value ? adjustStrings(n.value, options) : "",
+        n.value
+          ? quoteAttributeValue(adjustStrings(n.value, options), options)
+          : "",
         n.insensitive ? " i" : "",
         "]"
       ]);
@@ -422,4 +424,11 @@ function adjustStrings(value, options) {
   return value.replace(STRING_REGEX, match => util.printString(match, options));
 }
 
+function quoteAttributeValue(value, options) {
+  const quote = options.singleQuote ? "'" : '"';
+  return value.includes('"') || value.includes("'")
+    ? value
+    : quote + value + quote;
+}
+
 module.exports = genericPrint;

tests/css_attribute/__snapshots__/jsfmt.spec.js.snap

@@ -8,3 +8,46 @@ input[type="radio" i] {
 }
 
 `;
+
+exports[`insensitive.css 2`] = `
+input[type="radio" i] {
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+input[type='radio' i] {
+}
+
+`;
+
+exports[`quotes.css 1`] = `
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+a[id="test"] {
+}
+a[id="test"] {
+}
+a[id="test"] {
+}
+a[id=func("foo")] {
+}
+
+`;
+
+exports[`quotes.css 2`] = `
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+a[id='test'] {
+}
+a[id='test'] {
+}
+a[id='test'] {
+}
+a[id=func('foo')] {
+}
+
+`;

tests/css_attribute/jsfmt.spec.js

@@ -1 +1,2 @@
 run_spec(__dirname, { parser: "postcss" });
+run_spec(__dirname, { parser: "postcss", singleQuote: true });

tests/css_attribute/quotes.css

@@ -0,0 +1,4 @@
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}