fix(tags): tags parsing is too aggressive (fixes #1214) (#1215)

* fix(tags): tags parsing is too aggressive (fixes #1214)
callstack · Feb 21, 2023 · a3ad617 · a3ad617
1 parent 680fa1a
commit a3ad617
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/.changeset/fifty-cycles-cross.md b/.changeset/fifty-cycles-cross.md
@@ -0,0 +1,7 @@
+---
+'@linaria/react': patch
+'@linaria/tags': patch
+'@linaria/testkit': patch
+---
+
+Fix "Invalid usage of `styled` tag" when it's not really invalid. Fixes #1214.
diff --git a/packages/react/src/processors/styled.ts b/packages/react/src/processors/styled.ts
@@ -54,6 +54,9 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
   #variablesCache = new Map<string, string>();
 
   constructor(params: Params, ...args: TailProcessorParams) {
+    // If the first param is not a tag, we should skip the expression.
+    validateParams(params, ['tag', '...'], TaggedTemplateProcessor.SKIP);
+
     validateParams(
       params,
       ['tag', ['call', 'member'], ['template', 'call']],

diff --git a/packages/tags/src/TaggedTemplateProcessor.ts b/packages/tags/src/TaggedTemplateProcessor.ts
@@ -10,6 +10,9 @@ export default abstract class TaggedTemplateProcessor extends BaseProcessor {
   #template: (TemplateElement | ExpressionValue)[];
 
   public constructor(params: Params, ...args: TailProcessorParams) {
+    // If the first param is not a tag, we should skip the expression.
+    validateParams(params, ['tag', '...'], TaggedTemplateProcessor.SKIP);
+
     validateParams(
       params,
       ['tag', 'template'],

diff --git a/packages/tags/src/utils/validateParams.ts b/packages/tags/src/utils/validateParams.ts
@@ -53,9 +53,13 @@ export function isValidParams<T extends ParamConstraints>(
 export function validateParams<T extends ParamConstraints>(
   params: Params,
   constraints: T,
-  message: string
+  messageOrError: unknown
 ): asserts params is MapParams<T> {
   if (!isValidParams(params, constraints)) {
-    throw new Error(message);
+    if (typeof messageOrError === 'string') {
+      throw new Error(messageOrError);
+    }
+
+    throw messageOrError;
   }
 }
diff --git a/packages/testkit/src/utils/getTagProcessor.test.ts b/packages/testkit/src/utils/getTagProcessor.test.ts
@@ -335,6 +335,12 @@ describe('getTagProcessor', () => {
       expect(runner).toThrow('Invalid usage of template tag');
     });
 
+    it('do not throw if css is not a tag', () => {
+      const runner = () => run(dedent`export { css } from "@linaria/core";`);
+
+      expect(runner).not.toThrow();
+    });
+
     it('styled`` tag', () => {
       const runner = () =>
         run(
@@ -344,6 +350,13 @@ describe('getTagProcessor', () => {
       expect(runner).toThrow('Invalid usage of `styled` tag');
     });
 
+    it('do not throw if styled is not a tag', () => {
+      const runner = () =>
+        run(dedent`export { styled } from "@linaria/react";`);
+
+      expect(runner).not.toThrow();
+    });
+
     it('styled.div.span`` tag', () => {
       const runner = () =>
         run(