Sandbox: proper CSS Module import syntax

[calebjacob]

Updated the sandbox examples to use proper CSS Module import syntax since it's now supported: #264 (comment)

Anyone who's familiar with CSS Modules will immediately recognize what's going on:

import s from './styles.module.css';

type Props = {
  message?: string;
};

function MyComponent({ message = "Hello!" }: Props) {
  return (
    <div className={s.wrapper}>
      <p>{message}</p>
    </div>
  );
}

export default MyComponent as BWEComponent<Props>;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bos-web-engine	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2024 0:17am
bos-web-engine-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2024 0:17am

[calebjacob]

@mpeterdev @andy-haynes It may be worth considering removing support for the following syntax to avoid any confusion:

.wrapper {
  background: red;
}

<div className="wrapper" />
// Since "wrapper" happens to match a class in your styles, it behaves the same as a CSS module class import and automatically gets a randomly generated class name.

This was necessary before we had proper import syntax support. But now that we have proper import support, I feel like the behavior outlined above would be a stumbling block - it wouldn't be expected by any developer who's familiar with CSS Modules.

You could argue that it's convenient to have both options. We'd just need to make sure this behavior is clearly documented (both syntax approaches for CSS).

Any thoughts @thisisjoshford? Happy to explain further if this isn't enough context.

EDIT: This has been resolved here: #271

[thisisjoshford]

@mpeterdev @andy-haynes It may be worth considering removing support for the following syntax to avoid any confusion:

.wrapper {
  background: red;
}

<div className="wrapper" />
// Since "wrapper" happens to match a class in your styles, it behaves the same as a CSS module class import and automatically gets a randomly generated class name.

This was necessary before we had proper import syntax support. But now that we have proper import support, I feel like the behavior outlined above would be a stumbling block - it wouldn't be expected by any developer who's familiar with CSS Modules.

You could argue that it's convenient to have both options. We'd just need to make sure this behavior is clearly documented (both syntax approaches for CSS).

Any thoughts @thisisjoshford? Happy to explain further if this isn't enough context.

Although I am a fan of giving devs the option to choose how they want to build, I agree that it could get confusing if we allowed both here. I support going with modules only to keep it simple :)