Import CSS Modules styles into StyleX

[andrewright]

Describe a solution you'd like:
CSS Modules style sheet import into StyleX structure to modify and it on a fly and take instant result.
One of the coolest feature which provided StyleX is style compilation in JS, It is useful when calculation of our style runs in JS. We need it for in such cases as animation.

[necolas]

Please try explaining what you're asking for again, maybe with code examples? If you're asking for StyleX to consume CSS modules, that's not possible.

[nmn]

This feels like a discussion topic for now.

[andrewright]

I will try.
Let's take a project with CSS Modules used for style sheets.
There are many calculations in Javascript code, which to be provided to the CSS.

Like a solution, import some of CSS Modules stylistic into StyleX calcluata it and apply to the element.

//Button.module.css
.button {
  background-color: red;
  height: 20px;
}

//MyComponent.tsx
import styles from './Button.module.css'
function MyComponent() {
  return <button className={styles.button}>My Button</button>;
}

//Result
.button {
  background-color: red;
}

---

//Button.module.css
.button {
  background-color: red;
}

//MyComponent.tsx
import styles from './Button.module.css'
import * as stylex from '@stylexjs/stylex';

//just imagine the name of it: stylex.extend , stylex.import,...
const styles = stylex.extend(styles.button, {
  anotherButton: (height) => ({
    height,
  }),
});

function MyComponent() {
  // The value of `height` cannot be known at compile time.
  const [height, setHeight] = useState(100);

  return <button {...stylex.props(styles.anotherButton(height))}>Another button</button> ;
}

//Result
.button {
  background-color: red;
  height: 100px;
}

The idea, to have opportunity, migrate of extend on party use StyleX powerful features.

[nmn]

I think I understand this idea @andrewright, but what you're proposing is out of scope and probably impossible. CSS modules puts no limitations on the CSS you can create so, even if we were to implement this feature, it would break too often to be reliable.

Instead, a code translation tool could be created to convert files that use CSS modules to files that use StyleX. This tool could simply skip files where the styles can't be safely converted. This would help anyone migrate from CSS modules to StyleX.

Also, at the beginning CSS modules and StyleX would be used in separate files, which would ensure that there is no conflict between the two systems.

I have been working on something similar to translate tailwind to StyleX.