HorusGoul / vite-plugin-stylex

Vite Plugin for StyleX
MIT License
119 stars 13 forks source link

it would be cool if it could officially support react-strict-dom #50

Closed advancedtw closed 8 months ago

advancedtw commented 8 months ago

according to the limited instruction found here we are supposed to use { from: 'react-strict-dom', as: 'css'} along the default stylex import.

the ts type is defined like that not just a string as we have it now.

 importSources: ReadonlyArray<
        string | Readonly<{ from: string; as: string }>
 >;

vite config should probably look like this

export default defineConfig({
        plugins: [
                react(),
                styleX({
                        libraries: ["react-strict-dom"],
                        stylexImports: [
                                "@stylexjs/stylex",
                                { from: "react-strict-dom", as: "css" },
                        ],
                }),
        ],
        resolve: {
                alias: {
                        "@": resolve(__dirname, "src"),
                },
        },
});

example component

import { css, html as h } from "react-strict-dom";

const styles = css.create({
        root: {
                backgroundColor: "white",
                borderRadius: 8,
                padding: 16,
                boxShadow: "0 0 16px rgba(0, 0, 0, 0.1)",
                color: "pink",
        },
        override: (value) => ({
                color: value,
        }),
});

const Simple = () => {
        return <h.div style={[styles.root, styles.override("green")]}>Simple</h.div>;
};
export default Simple;
HorusGoul commented 8 months ago

Working on it @ #51

HorusGoul commented 8 months ago

Solved in 0.7.0, check the release notes! https://github.com/HorusGoul/vite-plugin-stylex/releases/tag/vite-plugin-stylex%400.7.0