I think Flarum should try CSS-in-JS, rather than what it is currently doing. CSS-in-JS offers a more flexible, powerful, and component-oriented version of CSS, and allows for you to put the styling and the component in a single file, while CSS itself is not component-oriented and isn't very flexible. In my opinion, CSS-in-JS would also make extensions a little easier, because instead of using extenders for both CSS and the JavaScript, they only need to add one for JavaScript and put the CSS in there. It would also improve performance, because you would no longer need to wait for the LESS to compile, because once the user changes a setting such as color, all that needs to be done is a variable change and it is instantly picked up everywhere. Using a library like Emotion would help a lot. Some examples:
The current way:
LESS
.my-style {
color: #000000;
&:hover {
color: #ffffff;
}
// etc...
}
JavaScript
class MyComponent extends Component {
view() {
return <div class="my-style" />;
}
}
CSS-in-JS:
JavaScript
import { css } from 'emotion';
const color = '#000000';
const hoverColor = '#ffffff';
const myStyle = css`
color: ${color};
&:hover {
color: ${hoverColor};
}
`;
class MyComponent extends Component {
view() {
return <div className={myStyle} />;
}
}
There's other ways accepted to use the css function too: https://emotion.sh/docs/emotion
If approved, this should probably be aligned with the 0.3 release.
