@compiled/eslint-plugin - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

dist/utils/create-no-tagged-template-expression-rule/index.js

@@ -27,2 +27,7 @@ "use strict";
                 }
+                const args = (0, to_arguments_1.toArguments)(source, quasi);
+                // Skip invalid CSS
+                if (args.length < 1) {
+                    return;
+                }
                 const oldCode = source.getText(node);
@@ -38,3 +43,3 @@ // Remove quasi:
                     // Indent the arguments after the tagged template expression range
-                    (0, generate_1.generate)((0, to_arguments_1.toArguments)(source, quasi), (0, get_tagged_template_expression_offset_1.getTaggedTemplateExpressionOffset)(node));
+                    (0, generate_1.generate)(args, (0, get_tagged_template_expression_offset_1.getTaggedTemplateExpressionOffset)(node));
                 if (oldCode === newCode) {
@@ -41,0 +46,0 @@ return;

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

@@ -12,2 +12,5 @@ "use strict";
     const args = [];
+    if (!chars.includes(':')) {
+        return args;
+    }
     const [property, value] = chars.split(':');
@@ -101,3 +104,7 @@ // Extract any expressions listed before the property that were not delimited by a ;
     for (const [i, quasi] of template.quasis.entries()) {
-        for (const char of quasi.value.raw) {
+        // Deal with selectors across multiple lines
+        const styleTemplateElement = quasi.value.raw
+            .replace(/(\r\n|\n|\r)/gm, ' ')
+            .replace(/\s+/g, ' ');
+        for (const char of styleTemplateElement) {
             switch (char) {
@@ -104,0 +111,0 @@ case '{': {

package.json

 {
   "name": "@compiled/eslint-plugin",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -5,0 +5,0 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-eslint-plugin",

src/rules/no-styled-tagged-template-expression/__tests__/rule.test.ts

@@ -906,3 +906,151 @@ import { basename } from 'path';
     },
+    {
+      filename: 'multiple-selectors-across-lines.ts',
+      code: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color: blue;
+          &:hover,
+          &:focus,
+          &:active {
+            text-decoration: inherit;
+          }
+          ul,
+          li {
+            color: red;
+          }
+        \`;
+      `,
+      output: `
+        import { styled } from '@compiled/react';
+
+        styled.div({
+          color: "blue",
+          "&:hover, &:focus, &:active": {
+            textDecoration: "inherit"
+          },
+          "ul, li": {
+            color: "red"
+          }
+        });
+      `,
+    },
+    {
+      filename: 'multiple-selectors-on-same-line.ts',
+      code: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color: blue;
+          &:hover, &:focus,
+          &:active {
+            text-decoration: inherit;
+          }
+          ul, li {
+            color: red;
+          }
+        \`;
+      `,
+      output: `
+        import { styled } from '@compiled/react';
+
+        styled.div({
+          color: "blue",
+          "&:hover, &:focus, &:active": {
+            textDecoration: "inherit"
+          },
+          "ul, li": {
+            color: "red"
+          }
+        });
+      `,
+    },
+    {
+      filename: 'nested-selectors-across-multiple-lines.ts',
+      code: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color: blue;
+          h1
+          span {
+            color: inherit;
+          }
+          h2
+          div
+          span {
+            margin-top: 32px;
+          }
+
+          h3 span,
+          h4 span {
+            margin-top: 16px;
+          }
+        \`;
+      `,
+      output: `
+        import { styled } from '@compiled/react';
+
+        styled.div({
+          color: "blue",
+          "h1 span": {
+            color: "inherit"
+          },
+          "h2 div span": {
+            marginTop: "32px"
+          },
+          "h3 span, h4 span": {
+            marginTop: "16px"
+          }
+        });
+      `,
+    },
+    {
+      filename: 'nested-selectors-on-same-line.ts',
+      code: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color: blue;
+          h1 span {
+            color: inherit;
+          }
+          h2 div span {
+            margin-top: 32px;
+          }
+        \`;
+      `,
+      output: `
+        import { styled } from '@compiled/react';
+
+        styled.div({
+          color: "blue",
+          "h1 span": {
+            color: "inherit"
+          },
+          "h2 div span": {
+            marginTop: "32px"
+          }
+        });
+      `,
+    },
+    {
+      filename: 'do-not-handle-invalid-css.ts',
+      code: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color blue;
+        \`;
+      `,
+      output: `
+        import { styled } from '@compiled/react';
+
+        styled.div\`
+          color blue;
+        \`;
+      `,
+    },
   ]),
 });

src/utils/create-no-tagged-template-expression-rule/index.ts

@@ -42,2 +42,9 @@ import type { Rule, Scope } from 'eslint';
 
+          const args = toArguments(source, quasi);
+
+          // Skip invalid CSS
+          if (args.length < 1) {
+            return;
+          }
+
           const oldCode = source.getText(node);
@@ -54,3 +61,3 @@ // Remove quasi:
             // Indent the arguments after the tagged template expression range
-            generate(toArguments(source, quasi), getTaggedTemplateExpressionOffset(node));
+            generate(args, getTaggedTemplateExpressionOffset(node));
 
@@ -57,0 +64,0 @@ if (oldCode === newCode) {

src/utils/create-no-tagged-template-expression-rule/to-arguments.ts

@@ -23,2 +23,7 @@ import type { SourceCode } from 'eslint';
   const args: (Expression | Block)[] = [];
+
+  if (!chars.includes(':')) {
+    return args;
+  }
+
   const [property, value] = chars.split(':');
@@ -134,3 +139,8 @@
   for (const [i, quasi] of template.quasis.entries()) {
-    for (const char of quasi.value.raw) {
+    // Deal with selectors across multiple lines
+    const styleTemplateElement = quasi.value.raw
+      .replace(/(\r\n|\n|\r)/gm, ' ')
+      .replace(/\s+/g, ' ');
+
+    for (const char of styleTemplateElement) {
       switch (char) {
@@ -137,0 +147,0 @@ case '{': {

No alert changes

Improved metrics

Total package byte prevSize

223438

increased by1.84%

Lines of code

5660

increased by2.93%

No dependency changes