@linaria/react 4.1.3 → 4.1.5

package/esm/processors/styled.js

@@ -1,4 +1,5 @@
-import { TaggedTemplateProcessor, ValueType, hasMeta, validateParams } from '@linaria/tags';
+import { buildSlug, hasMeta, TaggedTemplateProcessor, validateParams, ValueType, toValidCSSIdentifier } from '@linaria/tags';
+import { slugify } from '@linaria/utils';
 
 const isNotNull = x => x !== null;
 
@@ -53,8 +54,8 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
     this.component = component;
   }
 
-  addInterpolation(node, source, unit = '') {
-    const id = this.getVariableId(source + unit);
+  addInterpolation(node, precedingCss, source, unit = '') {
+    const id = this.getVariableId(source, unit, precedingCss);
     this.interpolations.push({
       id,
       node,
@@ -139,6 +140,17 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
     return res(this.component.source);
   }
 
+  getCustomVariableId(source, unit, precedingCss) {
+    const context = this.getVariableContext(source, unit, precedingCss);
+    const customSlugFn = this.options.variableNameSlug;
+
+    if (!customSlugFn) {
+      return undefined;
+    }
+
+    return typeof customSlugFn === 'function' ? customSlugFn(context) : buildSlug(customSlugFn, context);
+  }
+
   getProps() {
     const propsObj = {
       name: this.displayName,
@@ -188,14 +200,43 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
       return t.objectProperty(keyNode, t.objectExpression(vars));
     }).filter(isNotNull);
     return t.objectExpression(propExpressions);
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  }
+
+  getVariableContext(source, unit, precedingCss) {
+    const getIndex = () => {
+      // eslint-disable-next-line no-plusplus
+      return this.#variableIdx++;
+    };
+
+    return {
+      componentName: this.displayName,
+      componentSlug: this.slug,
 
+      get index() {
+        return getIndex();
+      },
+
+      precedingCss,
+      processor: this.constructor.name,
+      source,
+      unit,
+      valueSlug: slugify(source + unit)
+    };
+  }
+
+  getVariableId(source, unit, precedingCss) {
+    const value = source + unit;
 
-  getVariableId(value) {
     if (!this.#variablesCache.has(value)) {
-      // make the variable unique to this styled component
-      // eslint-disable-next-line no-plusplus
-      this.#variablesCache.set(value, `${this.slug}-${this.#variableIdx++}`);
+      const id = this.getCustomVariableId(source, unit, precedingCss);
+
+      if (id) {
+        return toValidCSSIdentifier(id);
+      }
+
+      const context = this.getVariableContext(source, unit, precedingCss); // make the variable unique to this styled component
+
+      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
     }
 
     return this.#variablesCache.get(value);

package/esm/processors/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["TaggedTemplateProcessor","ValueType","hasMeta","validateParams","isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","variableIdx","variablesCache","Map","constructor","params","args","tag","tagOp","template","SKIP","component","length","kind","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","has","set","slug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type {\n  Rules,\n  WrappedNode,\n  ValueCache,\n  Params,\n  TailProcessorParams,\n} from '@linaria/tags';\nimport {\n  TaggedTemplateProcessor,\n  ValueType,\n  hasMeta,\n  validateParams,\n} from '@linaria/tags';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source + unit);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return rules;\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getProps(): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(node, [])];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected getVariableId(value: string): string {\n    if (!this.#variablesCache.has(value)) {\n      // make the variable unique to this styled component\n      // eslint-disable-next-line no-plusplus\n      this.#variablesCache.set(value, `${this.slug}-${this.#variableIdx++}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["buildSlug","hasMeta","TaggedTemplateProcessor","validateParams","ValueType","toValidCSSIdentifier","slugify","isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","variableIdx","variablesCache","Map","constructor","params","args","tag","tagOp","template","SKIP","component","length","kind","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","precedingCss","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","getCustomVariableId","context","getVariableContext","customSlugFn","options","variableNameSlug","undefined","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","getIndex","componentName","componentSlug","slug","index","processor","valueSlug","has","set"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return rules;\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(node, [])];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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"}

package/lib/processors/styled.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _tags = require("@linaria/tags");
 
+var _utils = require("@linaria/utils");
+
 const isNotNull = x => x !== null;
 
 const singleQuotedStringLiteral = value => ({
@@ -60,8 +62,8 @@ class StyledProcessor extends _tags.TaggedTemplateProcessor {
     this.component = component;
   }
 
-  addInterpolation(node, source, unit = '') {
-    const id = this.getVariableId(source + unit);
+  addInterpolation(node, precedingCss, source, unit = '') {
+    const id = this.getVariableId(source, unit, precedingCss);
     this.interpolations.push({
       id,
       node,
@@ -148,6 +150,17 @@ class StyledProcessor extends _tags.TaggedTemplateProcessor {
     return res(this.component.source);
   }
 
+  getCustomVariableId(source, unit, precedingCss) {
+    const context = this.getVariableContext(source, unit, precedingCss);
+    const customSlugFn = this.options.variableNameSlug;
+
+    if (!customSlugFn) {
+      return undefined;
+    }
+
+    return typeof customSlugFn === 'function' ? customSlugFn(context) : (0, _tags.buildSlug)(customSlugFn, context);
+  }
+
   getProps() {
     const propsObj = {
       name: this.displayName,
@@ -197,14 +210,43 @@ class StyledProcessor extends _tags.TaggedTemplateProcessor {
       return t.objectProperty(keyNode, t.objectExpression(vars));
     }).filter(isNotNull);
     return t.objectExpression(propExpressions);
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  }
+
+  getVariableContext(source, unit, precedingCss) {
+    const getIndex = () => {
+      // eslint-disable-next-line no-plusplus
+      return this.#variableIdx++;
+    };
+
+    return {
+      componentName: this.displayName,
+      componentSlug: this.slug,
 
+      get index() {
+        return getIndex();
+      },
+
+      precedingCss,
+      processor: this.constructor.name,
+      source,
+      unit,
+      valueSlug: (0, _utils.slugify)(source + unit)
+    };
+  }
+
+  getVariableId(source, unit, precedingCss) {
+    const value = source + unit;
 
-  getVariableId(value) {
     if (!this.#variablesCache.has(value)) {
-      // make the variable unique to this styled component
-      // eslint-disable-next-line no-plusplus
-      this.#variablesCache.set(value, `${this.slug}-${this.#variableIdx++}`);
+      const id = this.getCustomVariableId(source, unit, precedingCss);
+
+      if (id) {
+        return (0, _tags.toValidCSSIdentifier)(id);
+      }
+
+      const context = this.getVariableContext(source, unit, precedingCss); // make the variable unique to this styled component
+
+      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
     }
 
     return this.#variablesCache.get(value);

package/lib/processors/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","TaggedTemplateProcessor","variableIdx","variablesCache","Map","constructor","params","args","validateParams","tag","tagOp","template","SKIP","component","length","kind","ValueType","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","hasMeta","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","has","set","slug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type {\n  Rules,\n  WrappedNode,\n  ValueCache,\n  Params,\n  TailProcessorParams,\n} from '@linaria/tags';\nimport {\n  TaggedTemplateProcessor,\n  ValueType,\n  hasMeta,\n  validateParams,\n} from '@linaria/tags';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source + unit);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return rules;\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getProps(): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(node, [])];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected getVariableId(value: string): string {\n    if (!this.#variablesCache.has(value)) {\n      // make the variable unique to this styled component\n      // eslint-disable-next-line no-plusplus\n      this.#variablesCache.set(value, `${this.slug}-${this.#variableIdx++}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","TaggedTemplateProcessor","variableIdx","variablesCache","Map","constructor","params","args","validateParams","tag","tagOp","template","SKIP","component","length","kind","ValueType","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","precedingCss","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","hasMeta","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","getCustomVariableId","context","getVariableContext","customSlugFn","options","variableNameSlug","undefined","buildSlug","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","getIndex","componentName","componentSlug","slug","index","processor","valueSlug","slugify","has","toValidCSSIdentifier","set"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return rules;\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(node, [])];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":";;;;;;;AAeA;;AASA;;AAEA,MAAMA,SAAS,GAAOC,CAAJ,IAA4BA,CAAC,KAAK,IAApD;;AASA,MAAMC,yBAAyB,GAAIC,KAAD,KAAmC;EACnEC,IAAI,EAAE,eAD6D;EAEnED,KAFmE;EAGnEE,KAAK,EAAE;IACLC,QAAQ,EAAEH,KADL;IAELI,GAAG,EAAG,IAAGJ,KAAM;EAFV;AAH4D,CAAnC,CAAlC;;AASe,MAAMK,eAAN,SAA8BC,6BAA9B,CAAsD;EAGnE,CAACC,WAAD,GAAe,CAAf;EAEA,CAACC,cAAD,GAAkB,IAAIC,GAAJ,EAAlB;;EAEAC,WAAW,CAACC,MAAD,EAAiB,GAAGC,IAApB,EAA+C;IACxD,IAAAC,oBAAA,EACEF,MADF,EAEE,CAAC,KAAD,EAAQ,CAAC,MAAD,EAAS,QAAT,CAAR,EAA4B,CAAC,UAAD,EAAa,MAAb,CAA5B,CAFF,EAGE,+BAHF;IAMA,MAAM,CAACG,GAAD,EAAMC,KAAN,EAAaC,QAAb,IAAyBL,MAA/B;;IAEA,IAAIK,QAAQ,CAAC,CAAD,CAAR,KAAgB,MAApB,EAA4B;MAC1B;MACA;MACA,MAAMV,6BAAA,CAAwBW,IAA9B;IACD;;IAED,MAAM,CAACH,GAAD,EAAME,QAAN,CAAN,EAAuB,GAAGJ,IAA1B;IAEA,IAAIM,SAAJ;;IACA,IAAIH,KAAK,CAAC,CAAD,CAAL,KAAa,MAAb,IAAuBA,KAAK,CAACI,MAAN,KAAiB,CAA5C,EAA+C;MAC7C,MAAMnB,KAAK,GAAGe,KAAK,CAAC,CAAD,CAAnB;;MACA,IAAIf,KAAK,CAACoB,IAAN,KAAeC,eAAA,CAAUC,QAA7B,EAAuC;QACrCJ,SAAS,GAAG,qBAAZ;MACD,CAFD,MAEO;QACLA,SAAS,GAAG;UACVK,IAAI,EAAEvB,KAAK,CAACwB,EADF;UAEVC,MAAM,EAAEzB,KAAK,CAACyB;QAFJ,CAAZ;QAKA,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB3B,KAAvB;MACD;IACF;;IAED,IAAIe,KAAK,CAAC,CAAD,CAAL,KAAa,QAAjB,EAA2B;MACzB,GAAGG,SAAH,IAAgBH,KAAhB;IACD;;IAED,IAAI,CAACG,SAAL,EAAgB;MACd,MAAM,IAAIU,KAAJ,CAAU,+BAAV,CAAN;IACD;;IAED,KAAKV,SAAL,GAAiBA,SAAjB;EACD;;EAEeW,gBAAgB,CAC9BN,IAD8B,EAE9BO,YAF8B,EAG9BL,MAH8B,EAI9BM,IAAI,GAAG,EAJuB,EAKtB;IACR,MAAMC,EAAE,GAAG,KAAKC,aAAL,CAAmBR,MAAnB,EAA2BM,IAA3B,EAAiCD,YAAjC,CAAX;IAEA,KAAKI,cAAL,CAAoBP,IAApB,CAAyB;MACvBK,EADuB;MAEvBT,IAFuB;MAGvBE,MAHuB;MAIvBM;IAJuB,CAAzB;IAOA,OAAOC,EAAP;EACD;;EAEeG,qBAAqB,GAAS;IAC5C,KAAKC,QAAL,CAAc,KAAKpC,KAAnB,EAA0B,KAA1B;EACD;;EAEeqC,oBAAoB,GAAS;IAC3C,MAAMC,CAAC,GAAG,KAAKC,UAAf;IAEA,MAAMC,KAAK,GAAG,KAAKC,QAAL,EAAd;IAEA,KAAKL,QAAL,CACEE,CAAC,CAACI,cAAF,CAAiB,KAAKC,aAAtB,EAAqC,CAAC,KAAKC,oBAAL,CAA0BJ,KAA1B,CAAD,CAArC,CADF,EAEE,IAFF;EAID;;EAEeK,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAInB;IAAA;;IACP,MAAMC,KAAY,GAAG,EAArB;IAEA,IAAIC,QAAQ,GAAI,IAAG,KAAKC,SAAU,EAAlC,CAHO,CAKP;IACA;IACA;;IACA,IAAInD,KAAK,GACP,OAAO,KAAKkB,SAAZ,KAA0B,QAA1B,GACI,IADJ,GAEI4B,UAAU,CAACM,GAAX,CAAe,KAAKlC,SAAL,CAAeK,IAAf,CAAoB8B,IAAnC,CAHN;;IAIA,OAAO,IAAAC,aAAA,EAAQtD,KAAR,CAAP,EAAuB;MACrBkD,QAAQ,IAAK,IAAGlD,KAAK,CAACuD,SAAN,CAAgBJ,SAAU,EAA1C;MACAnD,KAAK,GAAGA,KAAK,CAACuD,SAAN,CAAgBC,OAAxB;IACD;;IAEDP,KAAK,CAACC,QAAD,CAAL,GAAkB;MAChBH,OADgB;MAEhBI,SAAS,EAAE,KAAKA,SAFA;MAGhBM,WAAW,EAAE,KAAKA,WAHF;MAIhBC,KAAK,gBAAEV,GAAF,aAAEA,GAAF,uBAAEA,GAAG,CAAEU,KAAP,mDAAgB;IAJL,CAAlB;IAOA,OAAOT,KAAP;EACD;;EAE6B,IAAVU,UAAU,GAAW;IACvC,OAAQ,IAAG,KAAKR,SAAU,EAA1B;EACD;;EAEkC,IAArBS,qBAAqB,GAAe;IAChD,MAAMtB,CAAC,GAAG,KAAKC,UAAf;;IACA,IAAI,OAAO,KAAKrB,SAAZ,KAA0B,QAA9B,EAAwC;MACtC,IAAI,KAAKA,SAAL,KAAmB,qBAAvB,EAA8C;QAC5C,OAAOoB,CAAC,CAACuB,uBAAF,CAA0B,EAA1B,EAA8BvB,CAAC,CAACwB,cAAF,CAAiB,EAAjB,CAA9B,CAAP;MACD;;MAED,OAAO/D,yBAAyB,CAAC,KAAKmB,SAAN,CAAhC;IACD;;IAED,OAAOoB,CAAC,CAACI,cAAF,CAAiBJ,CAAC,CAACyB,UAAF,CAAa,KAAK7C,SAAL,CAAeK,IAAf,CAAoB8B,IAAjC,CAAjB,EAAyD,EAAzD,CAAP;EACD;;EAE0B,IAAbV,aAAa,GAAmB;IAC5C,MAAML,CAAC,GAAG,KAAKC,UAAf;IACA,OAAOD,CAAC,CAACI,cAAF,CAAiB,KAAK5B,GAAtB,EAA2B,CAAC,KAAK8C,qBAAN,CAA3B,CAAP;EACD;;EAEwB,IAAL5D,KAAK,GAAqB;IAC5C,MAAMsC,CAAC,GAAG,KAAKC,UAAf;IACA,MAAMyB,WAAW,GACf,OAAO,KAAK9C,SAAZ,KAA0B,QAA1B,GAAqC,IAArC,GAA4C,KAAKA,SAAL,CAAeK,IAAf,CAAoB8B,IADlE;IAGA,OAAOf,CAAC,CAAC2B,gBAAF,CAAmB,CACxB3B,CAAC,CAAC4B,cAAF,CACE5B,CAAC,CAAC6B,aAAF,CAAgB,aAAhB,CADF,EAEE7B,CAAC,CAAC6B,aAAF,CAAgB,KAAKV,WAArB,CAFF,CADwB,EAKxBnB,CAAC,CAAC4B,cAAF,CACE5B,CAAC,CAAC6B,aAAF,CAAgB,WAAhB,CADF,EAEE7B,CAAC,CAAC2B,gBAAF,CAAmB,CACjB3B,CAAC,CAAC4B,cAAF,CACE5B,CAAC,CAAC6B,aAAF,CAAgB,WAAhB,CADF,EAEE7B,CAAC,CAAC6B,aAAF,CAAgB,KAAKhB,SAArB,CAFF,CADiB,EAKjBb,CAAC,CAAC4B,cAAF,CACE5B,CAAC,CAAC6B,aAAF,CAAgB,SAAhB,CADF,EAEEH,WAAW,GACP1B,CAAC,CAACI,cAAF,CAAiBJ,CAAC,CAACyB,UAAF,CAAaC,WAAb,CAAjB,EAA4C,EAA5C,CADO,GAEP1B,CAAC,CAAC8B,WAAF,EAJN,CALiB,CAAnB,CAFF,CALwB,CAAnB,CAAP;EAqBD;;EAEeC,QAAQ,GAAW;IACjC,MAAMC,GAAG,GAAIC,GAAD,IAAkB,GAAE,KAAKC,aAAL,EAAqB,IAAGD,GAAI,QAA5D;;IAEA,IAAI,OAAO,KAAKrD,SAAZ,KAA0B,QAA9B,EAAwC;MACtC,IAAI,KAAKA,SAAL,KAAmB,qBAAvB,EAA8C;QAC5C,OAAOoD,GAAG,CAAC,WAAD,CAAV;MACD;;MAED,OAAOA,GAAG,CAAE,IAAG,KAAKpD,SAAU,GAApB,CAAV;IACD;;IAED,OAAOoD,GAAG,CAAC,KAAKpD,SAAL,CAAeO,MAAhB,CAAV;EACD;;EAESgD,mBAAmB,CAC3BhD,MAD2B,EAE3BM,IAF2B,EAG3BD,YAH2B,EAI3B;IACA,MAAM4C,OAAO,GAAG,KAAKC,kBAAL,CAAwBlD,MAAxB,EAAgCM,IAAhC,EAAsCD,YAAtC,CAAhB;IACA,MAAM8C,YAAY,GAAG,KAAKC,OAAL,CAAaC,gBAAlC;;IACA,IAAI,CAACF,YAAL,EAAmB;MACjB,OAAOG,SAAP;IACD;;IAED,OAAO,OAAOH,YAAP,KAAwB,UAAxB,GACHA,YAAY,CAACF,OAAD,CADT,GAEH,IAAAM,eAAA,EAAUJ,YAAV,EAAwBF,OAAxB,CAFJ;EAGD;;EAESjC,QAAQ,GAAW;IAC3B,MAAMwC,QAAgB,GAAG;MACvB5B,IAAI,EAAE,KAAKI,WADY;MAEvByB,KAAK,EAAE,KAAK/B;IAFW,CAAzB,CAD2B,CAM3B;;IACA,IAAI,KAAKjB,cAAL,CAAoBf,MAAxB,EAAgC;MAC9B8D,QAAQ,CAACE,IAAT,GAAgB,EAAhB;MACA,KAAKjD,cAAL,CAAoBkD,OAApB,CAA4B,CAAC;QAAEpD,EAAF;QAAMD,IAAN;QAAYR;MAAZ,CAAD,KAAwB;QAClD,MAAM8D,KAAmB,GAAG,CAAC,KAAK9C,UAAL,CAAgBG,cAAhB,CAA+BnB,IAA/B,EAAqC,EAArC,CAAD,CAA5B;;QAEA,IAAIQ,IAAJ,EAAU;UACRsD,KAAK,CAAC1D,IAAN,CAAW,KAAKY,UAAL,CAAgB4B,aAAhB,CAA8BpC,IAA9B,CAAX;QACD;;QAEDkD,QAAQ,CAACE,IAAT,CAAenD,EAAf,IAAqBqD,KAArB;MACD,CARD;IASD;;IAED,OAAOJ,QAAP;EACD;;EAESrC,oBAAoB,CAACJ,KAAD,EAAkC;IAC9D,MAAMF,CAAC,GAAG,KAAKC,UAAf;IAEA,MAAM+C,eAAe,GAAGC,MAAM,CAACC,OAAP,CAAehD,KAAf,EACrBiD,GADqB,CACjB,CAAC,CAACC,GAAD,EAAM1F,KAAN,CAAD,KAA8D;MACjE,IAAI,CAACA,KAAL,EAAY;QACV,OAAO,IAAP;MACD;;MAED,MAAM2F,OAAO,GAAGrD,CAAC,CAACyB,UAAF,CAAa2B,GAAb,CAAhB;;MAEA,IAAI,OAAO1F,KAAP,KAAiB,QAArB,EAA+B;QAC7B,OAAOsC,CAAC,CAAC4B,cAAF,CAAiByB,OAAjB,EAA0BrD,CAAC,CAAC6B,aAAF,CAAgBnE,KAAhB,CAA1B,CAAP;MACD;;MAED,IAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;QAC9B,OAAOsC,CAAC,CAAC4B,cAAF,CAAiByB,OAAjB,EAA0BrD,CAAC,CAACsD,cAAF,CAAiB5F,KAAjB,CAA1B,CAAP;MACD;;MAED,MAAMmF,IAAI,GAAGI,MAAM,CAACC,OAAP,CAAexF,KAAf,EAAsByF,GAAtB,CAA0B,CAAC,CAACI,QAAD,EAAWC,SAAX,CAAD,KAA2B;QAChE,OAAOxD,CAAC,CAAC4B,cAAF,CACL5B,CAAC,CAAC6B,aAAF,CAAgB0B,QAAhB,CADK,EAELvD,CAAC,CAACyD,eAAF,CAAkBD,SAAlB,CAFK,CAAP;MAID,CALY,CAAb;MAOA,OAAOxD,CAAC,CAAC4B,cAAF,CAAiByB,OAAjB,EAA0BrD,CAAC,CAAC2B,gBAAF,CAAmBkB,IAAnB,CAA1B,CAAP;IACD,CAxBqB,EAyBrBa,MAzBqB,CAyBdnG,SAzBc,CAAxB;IA2BA,OAAOyC,CAAC,CAAC2B,gBAAF,CAAmBqB,eAAnB,CAAP;EACD;;EAESX,kBAAkB,CAC1BlD,MAD0B,EAE1BM,IAF0B,EAG1BD,YAH0B,EAIR;IAClB,MAAMmE,QAAQ,GAAG,MAAM;MACrB;MACA,OAAO,KAAK,CAAC1F,WAAN,EAAP;IACD,CAHD;;IAKA,OAAO;MACL2F,aAAa,EAAE,KAAKzC,WADf;MAEL0C,aAAa,EAAE,KAAKC,IAFf;;MAGL,IAAIC,KAAJ,GAAY;QACV,OAAOJ,QAAQ,EAAf;MACD,CALI;;MAMLnE,YANK;MAOLwE,SAAS,EAAE,KAAK5F,WAAL,CAAiB2C,IAPvB;MAQL5B,MARK;MASLM,IATK;MAULwE,SAAS,EAAE,IAAAC,cAAA,EAAQ/E,MAAM,GAAGM,IAAjB;IAVN,CAAP;EAYD;;EAESE,aAAa,CACrBR,MADqB,EAErBM,IAFqB,EAGrBD,YAHqB,EAIb;IACR,MAAM9B,KAAK,GAAGyB,MAAM,GAAGM,IAAvB;;IACA,IAAI,CAAC,KAAK,CAACvB,cAAN,CAAqBiG,GAArB,CAAyBzG,KAAzB,CAAL,EAAsC;MACpC,MAAMgC,EAAE,GAAG,KAAKyC,mBAAL,CAAyBhD,MAAzB,EAAiCM,IAAjC,EAAuCD,YAAvC,CAAX;;MACA,IAAIE,EAAJ,EAAQ;QACN,OAAO,IAAA0E,0BAAA,EAAqB1E,EAArB,CAAP;MACD;;MAED,MAAM0C,OAAO,GAAG,KAAKC,kBAAL,CAAwBlD,MAAxB,EAAgCM,IAAhC,EAAsCD,YAAtC,CAAhB,CANoC,CAQpC;;MACA,KAAK,CAACtB,cAAN,CAAqBmG,GAArB,CAAyB3G,KAAzB,EAAiC,GAAE,KAAKoG,IAAK,IAAG1B,OAAO,CAAC2B,KAAM,EAA9D;IACD;;IAED,OAAO,KAAK,CAAC7F,cAAN,CAAqB4C,GAArB,CAAyBpD,KAAzB,CAAP;EACD;;AArSkE"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@linaria/react",
   "description": "Blazing fast zero-runtime CSS in JS library",
-  "version": "4.1.3",
+  "version": "4.1.5",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
     "@emotion/is-prop-valid": "^0.8.8",
-    "@linaria/core": "^4.1.2",
-    "@linaria/tags": "^4.1.2",
+    "@linaria/core": "^4.1.4",
+    "@linaria/tags": "^4.1.4",
+    "@linaria/utils": "^4.2.2",
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {

package/types/processors/styled.d.ts

@@ -1,6 +1,7 @@
 import type { CallExpression, Expression, ObjectExpression, SourceLocation } from '@babel/types';
-import type { Rules, WrappedNode, ValueCache, Params, TailProcessorParams } from '@linaria/tags';
+import type { Params, Rules, TailProcessorParams, ValueCache, WrappedNode } from '@linaria/tags';
 import { TaggedTemplateProcessor } from '@linaria/tags';
+import type { IVariableContext } from '@linaria/utils';
 export interface IProps {
     atomic?: boolean;
     class?: string;
@@ -11,7 +12,7 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
     #private;
     component: WrappedNode;
     constructor(params: Params, ...args: TailProcessorParams);
-    addInterpolation(node: Expression, source: string, unit?: string): string;
+    addInterpolation(node: Expression, precedingCss: string, source: string, unit?: string): string;
     doEvaltimeReplacement(): void;
     doRuntimeReplacement(): void;
     extractRules(valueCache: ValueCache, cssText: string, loc?: SourceLocation | null): Rules;
@@ -20,7 +21,9 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
     protected get tagExpression(): CallExpression;
     get value(): ObjectExpression;
     toString(): string;
+    protected getCustomVariableId(source: string, unit: string, precedingCss: string): string | undefined;
     protected getProps(): IProps;
     protected getTagComponentProps(props: IProps): ObjectExpression;
-    protected getVariableId(value: string): string;
+    protected getVariableContext(source: string, unit: string, precedingCss: string): IVariableContext;
+    protected getVariableId(source: string, unit: string, precedingCss: string): string;
 }