Idea for react css styling approach with template strings

react_styling_approach.jsx

/** 
The idea is to write CSS/SCSS in the component file, but in a form of JS template string
During build time it gets gathered in a single CSS file
As a template string it MAYBE can even be evaluated in compile time to provide dynamic styling
*/

import styles from './some_style.module.css'

// in build time it exports a style to separate css file
exportStaticStyle(`
.my_component {
    background: red;

    .my_img {
        width: 100%;
    }

    ${styles.someClass} { /* interop with css modules */
        /* build-time dynamic css */
        font-size: 12${ true ? 'em' : 'px'};
        padding: ${16 / 4}px;
    }
}
`)

const MyImg = () => <img className={`my_img ${styles.someClass}`} />

export const MyComponent = (props) => (
    <div className='my_component'>
        <h1>Hello React.</h1>
        <MyImg/>
    </div>
)