@atlaskit/eslint-plugin-design-system 8.36.2 → 8.36.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.36.3
+
+### Patch Changes
+
+- [#77172](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77172) [`0e9162a7371a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e9162a7371a) - Fixes issues with CSS var and content string handling for the `no-*-tagged-template-expression` rules
+
 ## 8.36.2
 
 ### Patch Changes

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -28,7 +28,10 @@ var createKey = function createKey(key) {
   return "[`".concat(key, "`]");
 };
 var addQuotes = function addQuotes(literal) {
-  return literal[0] === "\"" ? "'".concat(literal, "'") : "\"".concat(literal, "\"");
+  if (literal[0] === "\"") {
+    return "'".concat(literal.replace(/'/g, "\\'"), "'");
+  }
+  return "\"".concat(literal.replace(/"/g, "\\\""), "\"");
 };
 var createValue = function createValue(value) {
   var type = value.type;

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/to-arguments.js

@@ -119,14 +119,25 @@ var getArguments = function getArguments(chars) {
   };
   args.push({
     type: 'declaration',
-    // Make the property camelCase
-    property: property.trim().replace(/-[a-z]/g, function (match) {
-      return match[1].toUpperCase();
-    }),
+    property: getPropertyForDeclaration(property),
     value: getValue()
   });
   return args;
 };
+
+/**
+ * Trims the property value. Converts it to camelCase if it isn't a variable.
+ */
+var getPropertyForDeclaration = function getPropertyForDeclaration(property) {
+  var trimmed = property.trim();
+  if (trimmed.startsWith('--')) {
+    return trimmed;
+  }
+  // Make the property camelCase if it isn't a CSS variable
+  return trimmed.replace(/-[a-z]/g, function (match) {
+    return match[1].toUpperCase();
+  });
+};
 var getSelectorValue = function getSelectorValue(chars, expressions) {
   // If no variable, returns chars immediately.
   // i.e. `.foo { color: red }` returns '.foo'

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -16,7 +16,12 @@ const createKey = key => {
   }
   return `[\`${key}\`]`;
 };
-const addQuotes = literal => literal[0] === `"` ? `'${literal}'` : `"${literal}"`;
+const addQuotes = literal => {
+  if (literal[0] === `"`) {
+    return `'${literal.replace(/'/g, `\\'`)}'`;
+  }
+  return `"${literal.replace(/"/g, `\\"`)}"`;
+};
 const createValue = value => {
   const {
     type

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/to-arguments.js

@@ -92,12 +92,23 @@ const getArguments = (chars, expressions = []) => {
   };
   args.push({
     type: 'declaration',
-    // Make the property camelCase
-    property: property.trim().replace(/-[a-z]/g, match => match[1].toUpperCase()),
+    property: getPropertyForDeclaration(property),
     value: getValue()
   });
   return args;
 };
+
+/**
+ * Trims the property value. Converts it to camelCase if it isn't a variable.
+ */
+const getPropertyForDeclaration = property => {
+  const trimmed = property.trim();
+  if (trimmed.startsWith('--')) {
+    return trimmed;
+  }
+  // Make the property camelCase if it isn't a CSS variable
+  return trimmed.replace(/-[a-z]/g, match => match[1].toUpperCase());
+};
 const getSelectorValue = (chars, expressions) => {
   // If no variable, returns chars immediately.
   // i.e. `.foo { color: red }` returns '.foo'

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -21,7 +21,10 @@ var createKey = function createKey(key) {
   return "[`".concat(key, "`]");
 };
 var addQuotes = function addQuotes(literal) {
-  return literal[0] === "\"" ? "'".concat(literal, "'") : "\"".concat(literal, "\"");
+  if (literal[0] === "\"") {
+    return "'".concat(literal.replace(/'/g, "\\'"), "'");
+  }
+  return "\"".concat(literal.replace(/"/g, "\\\""), "\"");
 };
 var createValue = function createValue(value) {
   var type = value.type;

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/to-arguments.js

@@ -112,14 +112,25 @@ var getArguments = function getArguments(chars) {
   };
   args.push({
     type: 'declaration',
-    // Make the property camelCase
-    property: property.trim().replace(/-[a-z]/g, function (match) {
-      return match[1].toUpperCase();
-    }),
+    property: getPropertyForDeclaration(property),
     value: getValue()
   });
   return args;
 };
+
+/**
+ * Trims the property value. Converts it to camelCase if it isn't a variable.
+ */
+var getPropertyForDeclaration = function getPropertyForDeclaration(property) {
+  var trimmed = property.trim();
+  if (trimmed.startsWith('--')) {
+    return trimmed;
+  }
+  // Make the property camelCase if it isn't a CSS variable
+  return trimmed.replace(/-[a-z]/g, function (match) {
+    return match[1].toUpperCase();
+  });
+};
 var getSelectorValue = function getSelectorValue(chars, expressions) {
   // If no variable, returns chars immediately.
   // i.e. `.foo { color: red }` returns '.foo'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.36.2",
+  "version": "8.36.3",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"