[FEAT Contribution] Plugin to support Imported stylesheets CSS / SASS

[D4RKAR117]

I am interested in helping provide a feature!

Yes

Which generators are impacted?

• [X] All
• [ ] Angular
• [ ] HTML
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

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:

• 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

Can be implemented once built like in the project playground example, being the code inside the mitosis.config.js like this:

/* eslint-disable @typescript-eslint/no-var-requires */
const { ProcessStylesPlugin} = require('@d4rkar117/ultimate-components-helpers');
const { resolve } = require('path');

/**
 * @type {import("@builder.io/mitosis").MitosisConfig}
 */
const config = {
    targets: ['vue', 'react'],
    files: ['src/components/**/*'],
    options: {
        vue: {
            typescript: true,
            defineComponent: false,
            plugins: [
                () =>
                    ProcessStylesPlugin({ path: resolve(process.cwd(), 'src/components'), shouldAppendCmpName: true }),
            ],
        },
        react: {
            typescript: true,
            stylesType: 'styled-jsx',
            plugins: [
                () =>
                    ProcessStylesPlugin({ path: resolve(process.cwd(), 'src/components'), shouldAppendCmpName: true }),
            ],
        },
    },
};

module.exports = config;

And the code of the component like this:

SASS Stylesheet:

button {
    color: aqua;
    &.active {
        background-color: #000;
        color: #fff;
    }
}

Sample mistosis component:

import './button.scss';
import SubButton from '@components/SubButton/sub-button.lite';

export default function Button(props) {
    return (
        <div>
            <button></button>
            <button className='active'></button>
            <SubButton />
        </div>
    );
}

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

[IulianOctavianPreda]

Just a friendly bump and also a question As some time passed, did you publish your code as an independent plugin?

[samijaber]

@D4RKAR117 As @IulianOctavianPreda said, I would strongly encourage you to publish this as a Mitosis plugin!

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.

[D4RKAR117]

i will try to publish it so stay tuned