You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, Mitosis components lack support for "traditional" stylesheet imports so any dev that want to include complex stylesheets (Like Sass ones, or Very large CSS ones) needs to do one of the following practices:
Write very large vanilla CSS string directly into the component code using useStyle() hook or its derivates
relly only on css element properties to write inline styles
Like in Papanasi project example, write and customize their project compile step to inject from stylesheets their styles
All of the mentioned above can be a stopper for parity reasons with DX, Project structures to adopt mitosis and freely deliver their own styles as long as they uses stylesheets.
What does the proposed API look like?
I've written a custom plugin that allows the import of stylesheet into .lite.tsx mitosis components and manipulating the json elements on the plugin flow inject the rendered CSS or Sass stylesheets (Yes, this can enable sass support for components) using same strategy as useStyle() hook without breaking any other css strategy or the hook itself.
The code for the plugin (due to publishing is till pending) is located here
So using the standard behavior of useStyle() hook we intaa enable features like control of style typings and API parity for future changes without much effort
Additional Information
I don't know if this is helpful for someone or mitosis itself, also this is my first big open source contribution, so any doubts further testing, or corrections are appreciated
The text was updated successfully, but these errors were encountered:
D4RKAR117
changed the title
[Feat] Plugin to support Imported stylesheets CSS / SASS
[FEAT Contribution] Plugin to support Imported stylesheets CSS / SASS
Oct 12, 2023
I really like your idea: agreed that we need better style support, and your plugin is a great step towards that. If you publish it and people start to use it, we can gather valuable feedback from folks and that can steer the direction of built-in style support in Mitosis.
I am interested in helping provide a feature!
Yes
Which generators are impacted?
What problem does this feature solve?
Currently, Mitosis components lack support for "traditional" stylesheet imports so any dev that want to include complex stylesheets (Like Sass ones, or Very large CSS ones) needs to do one of the following practices:
useStyle()
hook or its derivatescss
element properties to write inline stylesAll of the mentioned above can be a stopper for parity reasons with DX, Project structures to adopt mitosis and freely deliver their own styles as long as they uses stylesheets.
What does the proposed API look like?
I've written a custom plugin that allows the import of stylesheet into
.lite.tsx
mitosis components and manipulating the json elements on the plugin flow inject the rendered CSS or Sass stylesheets (Yes, this can enable sass support for components) using same strategy asuseStyle()
hook without breaking any other css strategy or the hook itself.The code for the plugin (due to publishing is till pending) is located here
Can be implemented once built like in the project playground example, being the code inside the
mitosis.config.js
like this:And the code of the component like this:
SASS Stylesheet:
Sample mistosis component:
So using the standard behavior of
useStyle()
hook we intaa enable features like control of style typings and API parity for future changes without much effortAdditional Information
I don't know if this is helpful for someone or mitosis itself, also this is my first big open source contribution, so any doubts further testing, or corrections are appreciated
The text was updated successfully, but these errors were encountered: