Merge pull request #150 from NearSocial/release-2.5.2

Release 2.5.2

Author: Caleb Jacob

CHANGELOG.md

@@ -1,9 +1,25 @@
 # Changelog
 
+## 2.5.2
+
+- Use `styled-components` in combination with `customElements` like `Link`:
+
+```jsx
+const MyLink = styled("Link")`
+  color: red;
+`;
+
+return (
+  <MyLink href="/my/page">
+    Click Me!
+  </MyLink>
+);
+```
+
 ## 2.5.1
 
 - FIX: Add back `Ethers.send`, that was incorrectly removed as part of the https://github.com/NearSocial/VM/pull/128
-- FIX: Disable `is` attribute to avoid conflicts with React. Reported by @brunomodificato
+- FIX: Disable `is` attribute to avoid conflicts with React. Reported by BrunoModificato from OtterSec.
 
 ## 2.5.0
 

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "near-social-vm",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [

package.json

@@ -313,6 +313,8 @@ const assertValidObject = (o) => {
 };
 
 const assertRadixComponent = (element) => {
+  if (!element) return;
+
   let isRadixElement = Object.keys(RadixTags).includes(element.split(".")[0]);
 
   if (!isRadixElement) return;
@@ -1011,14 +1013,15 @@ class VmStack {
           const args = this.getArray(code.tag.arguments);
           const arg = args?.[0];
           const RadixComp = assertRadixComponent(arg);
+          const CustomElement = this.vm.near.config.customElements[arg];
 
-          if (!isStyledComponent(arg) && !RadixComp) {
+          if (!isStyledComponent(arg) && !RadixComp && !CustomElement) {
             throw new Error(
-              'styled() can only take `styled` components or valid Radix components (EG: "Accordion.Trigger")'
+              'styled() can only take `styled` components, Radix component names (EG: "Accordion.Trigger"), or a customElement name (EG: "Link")'
             );
           }
 
-          styledTemplate = styled(RadixComp ?? arg);
+          styledTemplate = styled(CustomElement ?? RadixComp ?? arg);
         } else {
           if (key === "keyframes") {
             styledTemplate = keyframes;