Merge pull request #78 from multiversx/development

mgavrila · web-flow · commit 5f84d93fd562 · 2025-04-10T15:43:35.000+03:00
0.0.0-alpha.12
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.0-alpha.12](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/78)] - 2025-04-10
+
+- [Add stencil-tailwind-plugin for tailwind v4](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/77)
+
 ## [[0.0.0-alpha.11](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/76)] - 2025-04-09
 
 - [Added prefix to functional and controlled components](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/75)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-core-ui",
-  "version": "0.0.0-alpha.11",
+  "version": "0.0.0-alpha.12",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -45,16 +45,15 @@
     "dist/"
   ],
   "scripts": {
-    "test": "npm run build:css && stencil test --spec --e2e",
+    "test": "stencil test --spec --e2e",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "unpublish-verdaccio": "npm unpublish @multiversx/sdk-dapp-core-ui --force --registry http://localhost:4873",
     "publish-verdaccio": "npm run unpublish-verdaccio && npm run build && npm publish --registry http://localhost:4873/",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "build": "npm run build:css && stencil build",
-    "build:css": "npx @tailwindcss/cli -i src/global/tailwind.css -o ./dist/output.css",
-    "start": "npm run build:css && stencil build --dev --watch --serve "
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve "
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": ">= 6.7.2",
@@ -70,6 +69,7 @@
     "@stencil/sass": "^3.0.12",
     "@stencil/store": "2.0.16",
     "@tailwindcss/cli": "4.0.17",
+    "@tailwindcss/postcss": "4.1.3",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^22.10.0",
@@ -84,6 +84,7 @@
     "prettier": "3.2.5",
     "puppeteer": "^23.9.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
+    "stencil-tailwind-plugin": "2.0.5",
     "tailwindcss": "4.0.15",
     "typescript": "^5.7.3"
   }
diff --git a/src/components/functional/sign-transactions-panel/components/balance-component/balance-component.css b/src/components/functional/sign-transactions-panel/components/balance-component/balance-component.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .balance-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/functional/sign-transactions-panel/components/fungible-component/fungible-component.css b/src/components/functional/sign-transactions-panel/components/fungible-component/fungible-component.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .fungible-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/functional/sign-transactions-panel/components/sign-transaction-component/components/transaction-fee-component/transaction-fee-component.css b/src/components/functional/sign-transactions-panel/components/sign-transaction-component/components/transaction-fee-component/transaction-fee-component.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .transaction-fee-container {
   display: flex;
   flex-direction: column;
@@ -85,14 +79,14 @@
   position: relative;
 }
 
-.radio-option input[type="radio"] {
+.radio-option input[type='radio'] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }
 
-.radio-option input[type="radio"]:checked + label {
+.radio-option input[type='radio']:checked + label {
   background: #0d6efd;
   color: white;
 }
diff --git a/src/components/functional/sign-transactions-panel/components/sign-transaction-component/sign-transaction-component.css b/src/components/functional/sign-transactions-panel/components/sign-transaction-component/sign-transaction-component.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .transaction-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.css b/src/components/functional/sign-transactions-panel/sign-transactions-panel.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .transaction-header-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/visual/explorer-link/explorer-link.css b/src/components/visual/explorer-link/explorer-link.css
@@ -1,4 +1,4 @@
-.explorer-link {
-  text-decoration: none;
-  color: var(--mx-explorer-link-color, -webkit-link); /* Default color */
+.mvx\:explorer-link {
+  @apply mvx:decoration-0;
+  color: var(--mx-explorer-link-color, -webkit-link);
 }
diff --git a/src/components/visual/explorer-link/explorer-link.tsx b/src/components/visual/explorer-link/explorer-link.tsx
@@ -7,7 +7,7 @@ import { Component, Element, h, Prop, State } from '@stencil/core';
   styleUrl: 'explorer-link.css',
 })
 export class ExplorerLink {
-  @Prop() class?: string = 'explorer-link';
+  @Prop() class?: string;
   @Prop() iconClass?: string = 'explorer-link-icon';
   @Prop() dataTestId?: string;
   @Prop() icon?: IconDefinition;
@@ -23,7 +23,7 @@ export class ExplorerLink {
 
   render() {
     return (
-      <a data-testid={this.dataTestId} href={this.link} target="_blank" class={this.class} rel="noreferrer">
+      <a data-testid={this.dataTestId} href={this.link} target="_blank" class={{ 'mvx:explorer-link': true, [this.class]: Boolean(this.class) }} rel="noreferrer">
         {this.hasSlotContent ? <slot name="content"></slot> : this.text ?? <mvx-fa-icon icon={this.icon ?? faArrowUpRightFromSquare} class={this.iconClass}></mvx-fa-icon>}
       </a>
     );
diff --git a/src/components/visual/explorer-link/tests/explorer-link.spec.ts b/src/components/visual/explorer-link/tests/explorer-link.spec.ts
@@ -11,7 +11,7 @@ describe('ExplorerLink', () => {
     });
     expect(page.root).toEqualHtml(`
       <mvx-explorer-link link="https://example.com">
-        <a href="https://example.com" target="_blank" class="explorer-link" rel="noreferrer">
+        <a href="https://example.com" target="_blank" class="mvx:explorer-link" rel="noreferrer">
           <mvx-fa-icon class="explorer-link-icon"></mvx-fa-icon>
         </a>
       </mvx-explorer-link>
@@ -25,7 +25,7 @@ describe('ExplorerLink', () => {
     });
     expect(page.root).toEqualHtml(`
       <mvx-explorer-link link="https://example.com" text="View on Explorer">
-        <a href="https://example.com" target="_blank" class="explorer-link" rel="noreferrer">
+        <a href="https://example.com" target="_blank" class="mvx:explorer-link" rel="noreferrer">
           View on Explorer
         </a>
       </mvx-explorer-link>
@@ -39,7 +39,7 @@ describe('ExplorerLink', () => {
     });
     expect(page.root).toEqualHtml(`
       <mvx-explorer-link link="https://example.com" class="custom-class">
-        <a href="https://example.com" target="_blank" class="custom-class" rel="noreferrer">
+        <a href="https://example.com" target="_blank" class="mvx:explorer-link custom-class" rel="noreferrer">
           <mvx-fa-icon class="explorer-link-icon"></mvx-fa-icon>
         </a>
       </mvx-explorer-link>
@@ -57,7 +57,7 @@ describe('ExplorerLink', () => {
 
     expect(page.root).toEqualHtml(`
       <mvx-explorer-link link="https://example.com">
-        <a href="https://example.com" target="_blank" class="explorer-link" rel="noreferrer">
+        <a href="https://example.com" target="_blank" class="mvx:explorer-link" rel="noreferrer">
           <mvx-fa-icon class="explorer-link-icon"></mvx-fa-icon>
         </a>
       </mvx-explorer-link>
diff --git a/src/global/tailwind.css b/src/global/tailwind.css
@@ -1,54 +1 @@
 @import 'tailwindcss' prefix(mvx);
-
-@theme {
-  --color-blue-500: blue;
-  --color-indigo-400: magenta;
-
-  /* Base Colors */
-  --mx-accent: #000000;
-  --mx-white: #ffffff;
-  --mx-black: #000000;
-
-  /* Text Colors */
-  --mx-text-primary: #262626;
-  --mx-text-secondary: #868686;
-
-  /* Toast Colors */
-  --mx-toast-text-primary: var(--mx-text-primary);
-  --mx-toast-text-secondary: var(--mx-text-secondary);
-  --mx-toast-border: #c7c7c7;
-  --mx-toast-bg: rgba(169, 169, 169, 0.4);
-  --mx-toast-tx-bg: #fff;
-  --mx-toast-tx-border: #fff;
-  --mx-toast-backdrop-blur: 38px;
-  --mx-toast-copy-button-color: var(--mx-white);
-
-  /* Toast Status Colors */
-  --mx-toast-success-bg: #1d6030;
-  --mx-toast-success-icon: #4ade80;
-  --mx-toast-pending-bg: #453412;
-  --mx-toast-pending-icon: #facc15;
-  --mx-toast-error-bg: rgba(255, 71, 71, 0.2);
-  --mx-toast-error-icon: #ff4747;
-
-  /* Side Panel Variables */
-  --mx-side-panel-bg: var(--mx-white);
-  --mx-side-panel-text: var(--mx-toast-text-primary);
-  --mx-side-panel-overlay: rgba(0, 0, 0, 0.7);
-  --mx-side-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  --mx-side-panel-max-width: 480px;
-  --mx-side-panel-border-radius: 24px;
-  --mx-side-panel-mobile-height: 90%;
-
-  /* Font Settings */
-  --font-family-roobert: 'Roobert PRO', system-ui, -apple-system, sans-serif;
-
-  /* Dapp Core Colors - for backward compatibility */
-  --mx-dapp-core-color-primary: #3b82f6;
-
-  /* Explorer Link Colors */
-  --mx-explorer-link-color: var(--mx-text-primary);
-
-  /* Transition */
-  --mx-transition: 0.3s ease-in-out;
-}
diff --git a/src/global/variables.css b/src/global/variables.css
@@ -1,39 +1,39 @@
 :root {
-    /* Base Colors */
-    --mx-accent: #FFFFFF;
-    --mx-white: #FFFFFF;
-    --mx-black: #000000;
-    --mx-neutral-900: #171717;
-    --mx-neutral-50: #FAFAFA;
-    --mx-neutral-400: #A3A3A3;
+  /* Base Colors */
+  --mx-accent: #ffffff;
+  --mx-white: #ffffff;
+  --mx-black: #000000;
+  --mx-neutral-900: #171717;
+  --mx-neutral-50: #fafafa;
+  --mx-neutral-400: #a3a3a3;
 
-    /* Text Colors */
-    --mx-text: var(--mx-white);
-    --mx-primary-text: #262626;
-    --mx-secondary-text: #868686;
-    --mx-warning-text: #facc15;
-    --mx-body-label-color: #a09a93;
-    --mx-warning-text: #facc15;
-    --mx-tx-bg: rgba(53, 53, 53);
-    --mx-tx-bg-transparent: rgba(53, 53, 53, 0.3);
-    --mx-tx-text-primary: #e8e8e8;
-    --mx-tx-text-secondary: #737373;
-  
-    /* Toast Colors */
-    --mx-toast-backdrop-blur: 38px;
-    --mx-toast-success-bg: #1D6030;
-    --mx-toast-success-color: #4ADE80;
-    --mx-toast-pending-bg: #453412;
-    --mx-toast-pending-color: #FACC15;
-    --mx-toast-error-bg: rgba(255, 71, 71, 0.2);
-    --mx-toast-error-color: #FF4747;
-  
-    /* Font Settings */
-    --font-family-roobert: "Roobert PRO", system-ui, -apple-system, sans-serif;
+  /* Text Colors */
+  --mx-text: var(--mx-white);
+  --mx-primary-text: #262626;
+  --mx-secondary-text: #868686;
+  --mx-warning-text: #facc15;
+  --mx-body-label-color: #a09a93;
+  --mx-warning-text: #facc15;
+  --mx-tx-bg: rgba(53, 53, 53);
+  --mx-tx-bg-transparent: rgba(53, 53, 53, 0.3);
+  --mx-tx-text-primary: #e8e8e8;
+  --mx-tx-text-secondary: #737373;
 
-    /* Explorer Link Colors */
-    --mx-explorer-link-color: var(--mx-text-primary);
+  /* Toast Colors */
+  --mx-toast-backdrop-blur: 38px;
+  --mx-toast-success-bg: #1d6030;
+  --mx-toast-success-color: #4ade80;
+  --mx-toast-pending-bg: #453412;
+  --mx-toast-pending-color: #facc15;
+  --mx-toast-error-bg: rgba(255, 71, 71, 0.2);
+  --mx-toast-error-color: #ff4747;
 
-    /* Transition */
-    --mx-transition: 0.3s ease-in-out;
-  } 
+  /* Font Settings */
+  --font-family-roobert: 'Roobert PRO', system-ui, -apple-system, sans-serif;
+
+  /* Explorer Link Colors */
+  --mx-explorer-link-color: var(--mx-primary-text);
+
+  /* Transition */
+  --mx-transition: 0.3s ease-in-out;
+}
diff --git a/stencil.config.ts b/stencil.config.ts
@@ -1,6 +1,8 @@
 import { Config } from '@stencil/core';
+import { sass } from '@stencil/sass';
 import { reactOutputTarget } from '@stencil/react-output-target';
 import nodePolyfills from 'rollup-plugin-node-polyfills';
+import tailwind from 'stencil-tailwind-plugin';
 
 const excludeComponents = [
   'mvx-sign-transactions-panel',
@@ -31,7 +33,12 @@ const excludeComponents = [
 
 export const config: Config = {
   namespace: 'sdk-dapp-core-ui',
-  globalStyle: 'dist/output.css',
+  plugins: [
+    sass(),
+    tailwind({
+      tailwindCssPath: './src/global/tailwind.css',
+    }),
+  ],
   outputTargets: [
     reactOutputTarget({
       outDir: './dist/react',
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.explorer-link {`
`2`		`- text-decoration: none;`
`3`		`- color: var(--mx-explorer-link-color, -webkit-link); /* Default color */`
	`1`	`+.mvx\:explorer-link {`
	`2`	`+ @apply mvx:decoration-0;`
	`3`	`+ color: var(--mx-explorer-link-color, -webkit-link);`
`4`	`4`	`}`