search

SocketDotTech / plugin

Seamless bridging experience into a single fully customizable React Component
https://www.npmjs.com/package/@socket.tech/plugin
MIT License
40 stars 23 forks source link

Conflict between tailwind classes of consumer project and plugin #61

Closed hikack closed 1 year ago

hikack commented 1 year ago

Hey there, I hope you are doing well!

For simplicity, I will mention this plugin as Child and the project which uses this plugin as Mother. (Consumer)

So imagine Child and Mother both use tailwind as their main styling system framework. The problem is that Child is inserting its classes at the very end of the head of the Mother project, so basically, Child is inserting some tailwind classes with more priority by placing them at the end of the head section.

Example: In Mother, we got a component button as follows: const Button = ({propsClassName}) => <button className={"p-2"+propsClassName} />

now in some other place, we want to use the button, but with more padding in the lg screen, this will be the result: <Button className="lg:p-4">

So as soon as we use Child somewhere in the project, styles injected by Child will have more priority since they have been injected at the end of the head section. So class "lg:p-4" will get ignored.

Suggested solution: As an isolated package, Child (this plugin) should isolate its styles and decrease their priority to the least, so the mother can even override them if necessary. and it should be achieved via following 2 steps:

1- at rollup.config.js: postcss({ inject: { insertAt: 'top', }, }),

2- and also add a prefix to tailwind.config.js like prefix: "skt" and then modify every single tailwind class at the project with that prefix so be like: skt-p-4

Please let me know if you have another solution in mind.

salil-naik commented 1 year ago

Hey @hikack, thanks for your interest in fixing this. The approach sounds good.

Note that there are a couple of classes with the prefix skt-w. These classes are used for CSS reset as we have disabled preflight in tailwind.

hikack commented 1 year ago

Hey @salil-naik, It's my pleasure! I investigated five classes started with skt-w including:

skt-w
skt-w-container
skt-w-input
skt-w-button
skt-w-anchor

Among those, only skt-w-container has a conflict with the new tailwind config (with skt-w prefix), so I renamed that to skt-w-root-container, and now we should be good to go. This PR https://github.com/SocketDotTech/plugin/pull/62 will bring the new changes; please review it once you can and let me know if it needs any other modifications.