Sync SCSS with Typescript

[davidlj95]

Description

Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.

Items to sync

Animations

CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.

Impact if out of sync

Animations timings and easing functions need to be in sync for a harmonic user experience

Detection

Currently, nothing is set to detect if they get out of sync

Layout breakpoints

Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.

Impact if out of sync

Responsive image breakpoints won't be generated according to image sizes

Detection

Fortunately, Lighthouse would detect issues when breakpoints aren't right enough

Responsive images size

They're coded in CSS styles (in vw mainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.

Impact if out of sync

Responsive image breakpoints won't be generated according to image sizes

Detection

Fortunately, Lighthouse would detect issues when breakpoints aren't right enough

Ideas

• Try moving everything to component code. Which is prerendered, so would end up as static inline CSS anyway. Doesn't apply for animations though
• SCSS to JSON. Or something like that. To export variables from SCSS for reuse inside the app components code.