Convert stylesheets/pages/milestone.scss into page specific bundle

Problem to solve

Currently we are serving one main CSS file which is importing all the CSS files that are page specific.
We want to split page specific styles out into separate CSS files that are only included on their respective pages.

Proposal

Convert app/assets/stylesheets/pages/milestone.scss into a page bundle that is only included on relevant pages.

Identify if all selectors are used on the same pages.
If they are used on separate pages:
1. Wrap them around the data body tags. So one should identify each page it is used on. You can do that with document.body.attributes['data-page'] in the javascript console. Wrap every top level style in example.scss in such a body tag:
```
.issues-style-just-shown-on-create-or-edit{}
.issues-style-just-shown-on-show{}
```
turns into
```
[data-page="projects:issues:new"],
[data-page="projects:issues:edit"] {
  .issues-create-style{}
}
[data-page="projects:issues:show"] {
  .issues-show-style{}
}
```
1. If there are no side effects, split them up across the individual pages and do step 3 for each of them.
If a page specific bundle example.scss contains only code used on the same page(s):
1. Move to app/assets/stylesheets/page_bundles/example.scss
2. Import the common mixings, variables and functions at the top of the file: @import mixins_and_variables_and_everything';
3. Add = stylesheet_link_tag 'page_bundles/example' to every HAML view that uses it
4. Add it to the precompile of sprockets in application.rb:
```
config.assets.precompile << "page_bundles/example.css"
```
Remove reference to milestone.scss from app/assets/stylesheets/_page_specific_files.scss

Further details

A reference implementation can be found here: !38890 (merged)