feat(xds)!: avoid overriding consumers theme by xds #1658

AdrianArenal · 2024-11-20T16:33:10Z

Pull request template

Describe the purpose of the change, the specific changes done in detail, and the issue you have fixed.

Motivation and context

Dependencies. If any, specify:
Open issue. If applicable, link:

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that causes existing functionality to not work as expected)
Change requires a documentation update

What is the destination branch of this PR?

Main
Other. Specify:

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

My code follows the style guidelines of this project.
I have performed a self-review on my own code.
I have commented my code, particularly in hard-to-understand areas.
I have made corresponding changes to the documentation.
My changes generate no new warnings.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.

AdrianArenal · 2024-11-20T16:51:39Z

packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts

@@ -27,7 +26,9 @@ export default plugin.withOptions(
     * @internal
     */
    return function (helpers: TailwindHelpers) {
-      helpers.addComponents(deepMerge({}, components(helpers), options?.components?.(helpers)));
+      helpers.addComponents(deepMerge({}, components(helpers), options?.components?.(helpers)), {
+        respectPrefix: false


so, if the consumer wants to have a prefix on their classes, like 'mm', x classes won't add 'mm' on their class set.
x will have allways 'x-' manually prefixed

AdrianArenal · 2024-11-20T16:52:48Z

packages/x-tailwindcss/demo/tailwind.config.ts

  content: ['./index.html', './**/*.vue'],
-  prefix: 'x-',
-  important: true,
-  theme: {
-    extend: {}
-  },
-  plugins: [
-    xTailwindCss({
-      components() {
-        return {};
-      },
-      utilities() {
-        return {};
-      },
-      dynamicUtilities() {
-        return {};
-      },
-      dynamicComponents() {
-        return {};
-      },
-      theme: {}
-    })
-  ]
+  plugins: [xTailwindCss({})]


This is exactly how we want to use xPlugin on motive-market project, we don't want to prefix our classes with 'x-' because we are using xds.. we use other plugins and we don't need to prefix anything to make them work

Invocation not needed. plugins: [xTailwindCss]

AdrianArenal · 2024-11-20T16:54:31Z

packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts

-      )
-    } as Config;
+      theme: {
+        x: deepMerge(


now we will have a 'x' property on the theme, so we are able there to customize the theme provided by x.
Only x classes will be affected when manipulating styles within the theme.x block.
isolation++ 👍🏽

You also need to reference the default theme of the plugin to allow Tailwind generates the property identifiers like bg, text, etc. with the default theme. The theme under x is only used to generate the custom properties in the plugin.

function (options = {}) { const customXTheme = deepMerge( { colors: { current: 'currentColor', transparent: 'transparent' } }, xTheme, options.theme ); return { theme: { extend: customXTheme, x: customXTheme } }; }

Remember to replace all x-bg-... for bg-... (some are still pending)

if we add the customXTheme to the extend field... aren't we still overriding the default values from the theme with the ones from the x plugin? 🤔

annacv · 2024-11-21T11:46:40Z

packages/x-tailwindcss/demo/tailwind.config.ts

-  plugins: [
-    xTailwindCss({
-      components() {
-        return {};
-      },
-      utilities() {
-        return {};
-      },
-      dynamicUtilities() {
-        return {};
-      },
-      dynamicComponents() {
-        return {};
-      },
-      theme: {}
-    })
-  ]


Hi, if I am not wrong, maybe we should keep this part to be able to access to components() within the setups 👀 , I mean ok remove prefix, but I would leave the part regarding the plugins section

I think I'm out of context and I didn't probably understand that,
You mean you need this block to do setups? for what purpose ? Could you give me an example ? 🙏🏽

joseacabaneros

Try this regex (theme\(')[^x] to look for theme uses without x.

packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts

joseacabaneros · 2024-11-25T15:03:12Z

packages/x-tailwindcss/demo/tailwind.config.ts

  content: ['./index.html', './**/*.vue'],
-  prefix: 'x-',
-  important: true,
-  theme: {
-    extend: {}
-  },
-  plugins: [
-    xTailwindCss({
-      components() {
-        return {};
-      },
-      utilities() {
-        return {};
-      },
-      dynamicUtilities() {
-        return {};
-      },
-      dynamicComponents() {
-        return {};
-      },
-      theme: {}
-    })
-  ]
+  plugins: [xTailwindCss({})]


Invocation not needed. plugins: [xTailwindCss]

packages/x-tailwindcss/src/x-tailwind-plugin/components.ts

AdrianArenal force-pushed the OIM-589-fix-xds-overriding-consumer-theme branch 3 times, most recently from 0a2634f to f53ac96 Compare November 20, 2024 16:50

AdrianArenal commented Nov 20, 2024

View reviewed changes

annacv reviewed Nov 21, 2024

View reviewed changes

joseacabaneros reviewed Nov 21, 2024

View reviewed changes

packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts Outdated Show resolved Hide resolved

joseacabaneros reviewed Nov 25, 2024

View reviewed changes

AdrianArenal force-pushed the OIM-589-fix-xds-overriding-consumer-theme branch from a091841 to c330593 Compare November 25, 2024 15:25

AdrianArenal marked this pull request as ready for review November 25, 2024 15:30

AdrianArenal requested a review from a team as a code owner November 25, 2024 15:30

AdrianArenal force-pushed the OIM-589-fix-xds-overriding-consumer-theme branch from c330593 to 35bfb5e Compare November 25, 2024 15:41

AdrianArenal added 5 commits November 25, 2024 16:41

feat(xds)!: avoid overriding consumers theme by xds

37544a5

fix(xds): add 'x' prefix on all theme usages

258a0bd

fix(xds): add 'x' prefix on all classes usages

ab5f4ca

fix(xds): default tailwind classes on showcasing

979f2da

refactor(types): remove unnecessary types

bd63dd9

AdrianArenal force-pushed the OIM-589-fix-xds-overriding-consumer-theme branch from 35bfb5e to 39282e5 Compare November 25, 2024 15:41

refactor(types): remove unnecessary types

7397219

AdrianArenal force-pushed the OIM-589-fix-xds-overriding-consumer-theme branch from 39282e5 to 7397219 Compare November 25, 2024 15:52

diegopf approved these changes Nov 25, 2024

View reviewed changes

joseacabaneros approved these changes Nov 25, 2024

View reviewed changes

diegopf merged commit bd3ed79 into main Nov 25, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(xds)!: avoid overriding consumers theme by xds #1658

feat(xds)!: avoid overriding consumers theme by xds #1658

AdrianArenal commented Nov 20, 2024 •

edited

Loading

AdrianArenal Nov 20, 2024

AdrianArenal Nov 20, 2024

joseacabaneros Nov 25, 2024

AdrianArenal Nov 20, 2024

joseacabaneros Nov 21, 2024

diegopf Nov 21, 2024

annacv Nov 21, 2024 •

edited

Loading

AdrianArenal Nov 22, 2024

joseacabaneros left a comment

joseacabaneros Nov 25, 2024

feat(xds)!: avoid overriding consumers theme by xds #1658

feat(xds)!: avoid overriding consumers theme by xds #1658

Conversation

AdrianArenal commented Nov 20, 2024 • edited Loading

Pull request template

Motivation and context

Type of change

What is the destination branch of this PR?

How has this been tested?

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annacv Nov 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joseacabaneros left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdrianArenal commented Nov 20, 2024 •

edited

Loading

annacv Nov 21, 2024 •

edited

Loading