Our team has 2 npm libs that publish components for our apps.
We had lots of troubles because - esp on components like TextInput and Button -
there are css properties on our main project, like a blue focus outline on the input for example, that come from a published package.
I wanted to ask if you have been in a similar situation.
Hey @johannes_horteis.
Can you explain a little bit more about these issues?
Are these 2 npm libs sharing codegen’d plasmic components?
Is the main project also using codegen for plasmic components?
All the info you can share would be of great help here.
Are these 2 npm libs sharing codegen’d plasmic components?
yes
Is the main project also using codegen for plasmic components?
yes
We specifically have issues with the TextInput component and the Button component.
For the button component the issue was its width and height.
Very often, I’d look at my or a team-mates running app and see the those being off.
Then I’d tell them to remove the Button.tsx and PlasmicButton.tsx and PlasmicButton.module.css files and plasmic sync to fix it.
The input component had issues with the background color and the text color.
And it has a blue outline that we cannot get rid of:
When we inspect the styles → we see they come from a main.css that comes from one of those 2 libs.
They are called propro_reusable_components
and
propro_icons
They both don’t export the Button or TextInput in their main.ts. But some components that are exported contain them.
I could give you access to the propro_icons if that is necessary. But for this one, we actually had to remove the TextInput from the component and instead just leave a slot target.
Sidenote: we also run a prebuild script to get rid of a few files:
These two components contain a lot of icons (5500 in total) and serve as an overview on plasmic studio. But they don’t need to be built. And building with them is impossible without running into a Heap error.
This lib is just there to not fill our apps with a large amount of icon tsx files and provides utilities and components for icons.
plasmic__default_style.module.css is being deleted because I thought it might be the cause but it’s not
Would be of great help if I could have access to one of these libs or a small repo that reproduces the issue.
Would also be good if I could have access to this main.css
file that is creating the conflict.
this is the main.css from propro_reusable_components:
here for propro_icons
let me know if you really need an invite. I would need a gh username
Here is my github account for invitation:
Let me see if I understood the setup:
You have package propro_reusable_components that exposes some components.
For example it can expose component Comp
, that uses a Button in a slot children
.
In your main app you use component Comp
that comes with the Button component from propro_reusable_components.
Do you overwrite the children
slot for Comp
with a Button from your main when using it or do you leave as default?
Can you name which component has this problem?
let me use the EmojiAndIconSelection component as an example that is the one component that comes form propro icons
It has a (Plasmic)Button component inside it. And it used to have a (Plasmic)TextInput component. But in a failed attempt to solve our problems we used a slot target instead.
But that is not really valuable information.
We would like to export components that have a Button and or a TextInput inside it.
But when we do that, ANY TextInput (or Button) (not just those inside imported components) in our main app has unexpected css behaviour as described.
I took a look at the code you shared but couldn’t find anything obvious.
From what I’ve tested here, the issue might come from importing global css inside your imported package, perhaps caused by conflicting names (from your main projet global css and your imported project global css). Is the build process handling conflicting css variables since this is an imported package?
With that, for us to help you further we would need more information. Can you share a project/public page that has this issue happening?
I’ll experiment with the build process.
I’ll remove the libInjectCss and try to add css scoping.
I have to bring this up again.
none of the build changes worked.
We face this issue all the time
buttons and textinputs look not as they should. not as they look in plasmic studio.
something is overwriting styles somewhere.
your help is very appreciated.