fix(styled): extending imported components (fixes #1378)

.changeset/friendly-turtles-join.md

@@ -0,0 +1,5 @@
+---
+'@linaria/react': minor
+---
+
+Fix for extending imported component #1378

examples/astro-solid/package.json

@@ -8,7 +8,7 @@
     "@astrojs/solid-js": "^1.2.3",
     "@babel/core": "^7.23.5",
     "@linaria/core": "workspace:^",
-    "@wyw-in-js/vite": "^0.4.0",
+    "@wyw-in-js/vite": "^0.5.3",
     "astro": "^1.6.10",
     "solid-js": "^1.6.2",
     "vite": "^3",

examples/esbuild/package.json

@@ -7,7 +7,7 @@
     "linaria-website": "workspace:^"
   },
   "devDependencies": {
-    "@wyw-in-js/esbuild": "^0.4.0",
+    "@wyw-in-js/esbuild": "^0.5.3",
     "esbuild": "^0.15.16"
   },
   "scripts": {

examples/rollup/package.json

@@ -9,11 +9,11 @@
   "devDependencies": {
     "@babel/core": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
-    "@wyw-in-js/rollup": "^0.4.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.2.1",
+    "@wyw-in-js/rollup": "^0.5.3",
     "rollup": "^3.11.0",
     "rollup-plugin-css-only": "^4.3.0"
   },

examples/vite/package.json

@@ -9,9 +9,9 @@
     "linaria-website": "workspace:^"
   },
   "devDependencies": {
-    "@wyw-in-js/vite": "^0.4.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@vitejs/plugin-react": "^2.1.0",
+    "@wyw-in-js/vite": "^0.5.3",
     "vite": "^3.2.10"
   },
   "scripts": {

examples/webpack5/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",
-    "@wyw-in-js/webpack-loader": "^0.4.0",
+    "@wyw-in-js/webpack-loader": "^0.5.3",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
     "css-hot-loader": "^1.4.4",

package.json

@@ -38,9 +38,7 @@
     "@typescript-eslint/experimental-utils": "^4.28.0",
     "git-raw-commits": "^2.0.3"
   },
-  "dependencies": {
-    "git-raw-commits": "^2.0.3"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",
@@ -55,6 +53,7 @@
     "@definitelytyped/dtslint": "^0.0.176",
     "@types/jest": "^28.1.0",
     "@types/node": "^17.0.39",
+    "@types/resolve": "^1.20.6",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "all-contributors-cli": "^6.20.0",
@@ -72,6 +71,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "git-raw-commits": "^2.0.3",
     "husky": "^1.3.1",
     "jest": "^29.6.2",
     "prettier": "^3.0.3",
@@ -84,5 +84,6 @@
   "engines": {
     "node": ">=16.0.0",
     "pnpm": "^8.0.0"
-  }
+  },
+  "packageManager": "[email protected]+sha256.50783dd0fa303852de2dd1557cd4b9f07cb5b018154a6e76d0f40635d6cee019"
 }

packages/atomic/package.json

@@ -51,8 +51,8 @@
   "dependencies": {
     "@linaria/core": "workspace:^",
     "@linaria/react": "workspace:^",
-    "@wyw-in-js/processor-utils": "^0.4.0",
-    "@wyw-in-js/shared": "^0.4.0",
+    "@wyw-in-js/processor-utils": "^0.5.3",
+    "@wyw-in-js/shared": "^0.5.3",
     "known-css-properties": "^0.24.0",
     "postcss": "^8.4.31",
     "stylis": "^4.3.0",

packages/core/package.json

@@ -58,7 +58,7 @@
     "watch": "pnpm build:dist --watch & pnpm build:declarations --watch"
   },
   "dependencies": {
-    "@wyw-in-js/processor-utils": "^0.4.0"
+    "@wyw-in-js/processor-utils": "^0.5.3"
   },
   "devDependencies": {
     "@babel/traverse": "^7.23.5",

packages/react/package.json

@@ -60,10 +60,11 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.0",
     "@linaria/core": "workspace:^",
-    "@wyw-in-js/processor-utils": "^0.4.0",
-    "@wyw-in-js/shared": "^0.4.0",
+    "@wyw-in-js/processor-utils": "^0.5.3",
+    "@wyw-in-js/shared": "^0.5.3",
     "minimatch": "^9.0.3",
     "react-html-attributes": "^1.4.6",
+    "resolve": "^1.22.8",
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {

packages/react/src/processors/styled.ts

@@ -30,6 +30,7 @@ import {
 } from '@wyw-in-js/shared';
 import { minimatch } from 'minimatch';
 import html from 'react-html-attributes';
+import { sync as resolveSync } from 'resolve';
 
 const isNotNull = <T>(x: T | null): x is T => x !== null;
 
@@ -100,17 +101,16 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
 
           // Check if at least one used identifier is a Linaria component.
           const isSomeMatched = value.importedFrom.some((importedFrom) => {
-            const importedPkg = findPackageJSON(
-              importedFrom,
-              this.context.filename
-            );
+            const importedPkg =
+              // If package.json is not found, assume it's a local package
+              findPackageJSON(importedFrom, this.context.filename) ?? selfPkg;
 
             if (importedPkg) {
               const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));
-              let mask: string | undefined = packageJSON?.linaria?.components;
+              const mask: string | undefined = packageJSON?.linaria?.components;
               if (importedPkg === selfPkg && mask === undefined) {
                 // If mask is not specified for the local package, all components are treated as styled.
-                mask = '**/*';
+                return true;
               }
 
               if (mask) {
@@ -120,11 +120,23 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
                   /\\/g,
                   posix.sep
                 );
-                const fileWithComponent = require.resolve(importedFrom, {
-                  paths: [dirname(this.context.filename!)],
-                });
 
-                return minimatch(fileWithComponent, fullMask);
+                try {
+                  const fileWithComponent = resolveSync(importedFrom, {
+                    basedir: dirname(this.context.filename!),
+                    extensions: this.options.extensions,
+                  });
+
+                  return minimatch(fileWithComponent, fullMask);
+                } catch (e) {
+                  // It means that resolver can't find the file.
+                  // eslint-disable-next-line no-console
+                  console.warn(
+                    `Can't resolve ${importedFrom} from ${this.context.filename}. If ${value.source} is another styled component, it should be resolvable with default Node.js resolver. If it's not, please exclude it from the linaria.components mask in package.json.`
+                  );
+
+                  return false;
+                }
               }
             }
 

packages/react/src/styled.ts

@@ -6,12 +6,13 @@
  * - injects CSS variables used to define dynamic styles based on props
  */
 import validAttr from '@emotion/is-prop-valid';
-import type { WYWEvalMeta } from '@wyw-in-js/shared';
 import React from 'react';
 
 import { cx } from '@linaria/core';
 import type { CSSProperties } from '@linaria/core';
 
+type WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared
+
 export type NoInfer<A> = [A][A extends any ? 0 : never];
 
 type Component<TProps> =

packages/stylelint/package.json

@@ -30,8 +30,8 @@
     "watch": "pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch"
   },
   "dependencies": {
-    "@wyw-in-js/shared": "^0.4.0",
-    "@wyw-in-js/transform": "^0.4.0",
+    "@wyw-in-js/shared": "^0.5.3",
+    "@wyw-in-js/transform": "^0.5.3",
     "strip-ansi": "^5.2.0"
   },
   "devDependencies": {

packages/testkit/package.json

@@ -26,9 +26,9 @@
     "@babel/traverse": "^7.23.5",
     "@linaria/react": "workspace:^",
     "@swc/core": "^1.3.20",
-    "@wyw-in-js/processor-utils": "^0.4.0",
-    "@wyw-in-js/shared": "^0.4.0",
-    "@wyw-in-js/transform": "^0.4.0",
+    "@wyw-in-js/processor-utils": "^0.5.3",
+    "@wyw-in-js/shared": "^0.5.3",
+    "@wyw-in-js/transform": "^0.5.3",
     "debug": "^4.3.4",
     "dedent": "^1.5.1",
     "esbuild": "^0.15.16",