Closed advancedtw closed 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.
{ from: 'react-strict-dom', as: 'css'}
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;
Working on it @ #51
Solved in 0.7.0, check the release notes! https://github.com/HorusGoul/vite-plugin-stylex/releases/tag/vite-plugin-stylex%400.7.0
0.7.0
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.
vite config should probably look like this
example component