Description
Since Vue SSR is not yet supported (see Vue.js current status ) we'll need some styles served for the initial html rendered markup before any Javascript modules load. These styles already exist and live under modules/ext.growthExperiments.Homepage.styles in less files. What we would like to achieve is to clean up these files from any styles needed or affecting our Vue components. This is because we want to follow a Vue Single File Component convention where each component styles are placed under a <style lang="lesss"> tag. Also we would like to move the styles for each module to its directory for convenience and just use a less index.less file as a wrapper for serving all of them from the server.

Acceptance Criteria

1. Should be able to easily differentiate between the styles used in a Vue component from the styles the server adds to the initial rendered markup
2. Each module styles are placed under the module folder
3. No less files contain styles that affect markup generated by Vue components
4. No Vue files contain styles that are needed on the initial server render

Completion checklist

Functionality

• The patches have been code reviewed and merged
• The task passes its acceptance criteria

Engineering

• There are existing and passing unit/integration tests
• Tests for every involved patch should pass
• Coverage for every involved project should have improved or stayed the same

Design & QA

• If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
• Must be reviewed and approved by Quality Assurance.

Documentation

• Related and updated documentation done where necessary
  • Internal technical changes: internal repository documentation must be updated (README.md, JSDoc, PHPDoc)
  • Infrastructure technical changes: technical changes that reflect on environment, infrastructure, endpoints or any other area of interest for technical contributors should be reflected on Extension:GrowthExperiments or Extension:GrowthExperiments/Technical documentation pages.