9.1.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Properties
 
+### 9.1.0 (July 15, 2019)
+
+- Added: Support for preserving trailing comments within a declaration.
+
 ### 9.0.2 (July 15, 2019)
 
 - Updated: `postcss-values-parser` to 3.0.5 (patch)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-properties",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "Use Custom Properties Queries in CSS",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [

src/lib/transform-properties.js

@@ -14,9 +14,19 @@ export default (root, customProperties, opts) => {
 			// conditionally transform values that have changed
 			if (value !== originalValue) {
 				if (opts.preserve) {
-					decl.cloneBefore({ value });
+					const beforeDecl = decl.cloneBefore({ value });
+
+					if (hasTrailingComment(beforeDecl)) {
+						beforeDecl.raws.value.value = beforeDecl.value.replace(trailingCommentRegExp, '$1');
+						beforeDecl.raws.value.raw = beforeDecl.raws.value.value + beforeDecl.raws.value.raw.replace(trailingCommentRegExp, '$2');
+					}
 				} else {
 					decl.value = value;
+
+					if (hasTrailingComment(decl)) {
+						decl.raws.value.value = decl.value.replace(trailingCommentRegExp, '$1');
+						decl.raws.value.raw = decl.raws.value.value + decl.raws.value.raw.replace(trailingCommentRegExp, '$2');
+					}
 				}
 			}
 		}
@@ -31,3 +41,7 @@ const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/;
 
 // whether the declaration should be potentially transformed
 const isTransformableDecl = decl => !customPropertyRegExp.test(decl.prop) && customPropertiesRegExp.test(decl.value);
+
+// whether the declaration has a trailing comment
+const hasTrailingComment = decl => 'value' in Object(Object(decl.raws).value) && 'raw' in decl.raws.value && trailingCommentRegExp.test(decl.raws.value.raw);
+const trailingCommentRegExp = /^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/;

test/basic.css

@@ -64,5 +64,5 @@ html {
 	color: var(
 		--color,
 		blue
-	);
+	)/*rtl:red*/;
 }

test/basic.expect.css

@@ -70,9 +70,9 @@ html {
 }
 
 .test--loose-formatting {
-	color: rgb(255, 0, 0);
+	color: rgb(255, 0, 0)/*rtl:red*/;
 	color: var(
 		--color,
 		blue
-	);
+	)/*rtl:red*/;
 }

test/basic.import-is-empty.expect.css

@@ -70,9 +70,9 @@ html {
 }
 
 .test--loose-formatting {
-	color: rgb(255, 0, 0);
+	color: rgb(255, 0, 0)/*rtl:red*/;
 	color: var(
 		--color,
 		blue
-	);
+	)/*rtl:red*/;
 }

test/basic.import.expect.css

@@ -71,9 +71,9 @@ html {
 }
 
 .test--loose-formatting {
-	color: rgb(255, 0, 0);
+	color: rgb(255, 0, 0)/*rtl:red*/;
 	color: var(
 		--color,
 		blue
-	);
+	)/*rtl:red*/;
 }

test/basic.preserve.expect.css

@@ -53,5 +53,5 @@
 }
 
 .test--loose-formatting {
-	color: rgb(255, 0, 0);
+	color: rgb(255, 0, 0)/*rtl:red*/;
 }