Research CSS Solutions

[francium]

Look at how SPA (single page applications) and frameworks like React and VueJS handle CSS.

Is it possible to use some library that provides inline CSS via JavaScript?

[francium]

Resource to begin the research,
https://mxstbr.blog/2016/11/inline-styles-vs-css-in-js/
https://github.com/pocka/hyperapp-typescript-demo
https://www.netguru.co/codestories/vue.js-scoped-styles-vs-css-modules
https://blog.pusher.com/css-modules-react/
https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e
https://medium.com/making-internets/better-css-with-javascript-88463deecf3
https://css-tricks.com/css-modules-part-1-need/
https://github.com/morishitter/picostyle
facebook/react#13059
https://reactjs.org/docs/faq-styling.html

[francium]

See https://github.com/morishitter/picostyle

[francium]

https://www.styled-components.com/docs/basics#getting-started

[francium]

CSS Modules and SCSS can be setup with parcel by using PostCSS and PoctCSS Modules.
You will need to install the postcss-modules module and configure using .postcssrc in the root of the project,

{
    "modules": true,
    "plugins": {
        "postcss-modules": {
            "generateScopedName": "[name]_[local]_[hash:base64:5]"
        }
    }
}

Do note, in the previous snippet, only the "modules": true is strictly required as per
maintainer(1), but this alone results in styles breaking when a hot reload occurs. The
"plugins" section fixes this issue(2).

At the time of writing, this setup allowed SCSS support, hot reloading styles, importing
into JavaScript using ES6 syntax, import styles from './foo.scss', and CSS
modularization (CSS Modules)

(1): parcel-bundler/parcel#70
(2): [Bug] HMR and PostCSS modules, styles disappear, parcel-bundler/parcel#809