Build a Modern JS Project - #7 Components & Styling
In this video, we'll finalize the build step for our JS and CSS assets. We will create CSS-only spinner components in React and enable styling via embedded style tag. All CSS styles are courtesy of https://loading.io/css/ under CC0.
Each spinner will have its own styling (and eventually, unit tests). Initially, I thought of concatenating CSS and extracting it into an entry point file with rollup-plugin-postcss https://github.com/egoist/rollup-plug... This approach has two drawbacks however. One, it leads to dead CSS code, because you'd have to import all styles even if you only need a single spinner; and two, it requires two import statements, one for the component and one for the CSS, which is clumsy. Plus, it might require a css-loader to pull in the styles with Webpack.
A cleaner approach is to bundle CSS with JS and inject it via a style tag along with the markup. This makes CSS tree-shakable, as you'd only import the styles for a given component, as opposed to all; and it eliminates the double import, since the styles are already imported with each component. On the downside, I can think of embedded CSS being idiosyncratic or distasteful, but in practice, it shouldn't cause any trouble when integrating. I'd almost go with CSS modules if they played more nicely with SSR.
To clear up any confusion, styles are imported as a string of text via rollup-plugin-string https://github.com/TrySound/rollup-pl... (agreed, unconventional, but gets the job done very well). Therefore, a good-old JSX expression will do https://reactjs.org/docs/introducing-... You don't need to stringify it with a template literal, as it's already loaded as a string in Rollup. Just follow through the notes when we get to styling, and you should be alright.
To make React an explicit dependency, we can mark it as a peer dependency https://docs.npmjs.com/files/package.... Just like dependencies, peerDependencies follow semver, thus same rules apply. There are subtle nuances between ^ (caret) and ~ (tilde), so I strongly encourage you to read up on https://docs.npmjs.com/misc/semver See https://stackoverflow.com/questions/2... for a practical example. Sometimes it's hard to wrap your head around semver, so when in doubt, I use this calculator https://semver.npmjs.com
Смотрите видео Build a Modern JS Project - #7 Components & Styling онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Realm 17 Январь 2019, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,43 раз и оно понравилось 9 людям.