Explicitly import all page specific styles

Instead of using globbing and because we want to move these page
specific styles to the appropriate pages, we move the imports to a new
file.

app/assets/stylesheets/_page_specific_files.scss

+@import './pages/admin';
+@import './pages/alert_management/details';
+@import './pages/alert_management/severity-icons';
+@import './pages/boards';
+@import './pages/branches';
+@import './pages/builds';
+@import './pages/ci_projects';
+@import './pages/clusters';
+@import './pages/commits';
+@import './pages/cycle_analytics';
+@import './pages/deploy_keys';
+@import './pages/detail_page';
+@import './pages/dev_ops_score';
+@import './pages/diff';
+@import './pages/editor';
+@import './pages/environment_logs';
+@import './pages/environments';
+@import './pages/error_details';
+@import './pages/error_list';
+@import './pages/error_tracking_list';
+@import './pages/events';
+@import './pages/experience_level';
+@import './pages/experimental_separate_sign_up';
+@import './pages/graph';
+@import './pages/groups';
+@import './pages/help';
+@import './pages/import';
+@import './pages/incident_management_list';
+@import './pages/issuable';
+@import './pages/issues/issue_count_badge';
+@import './pages/issues/issues_list';
+@import './pages/issues';
+@import './pages/labels';
+@import './pages/login';
+@import './pages/members';
+@import './pages/merge_conflicts';
+@import './pages/merge_requests';
+@import './pages/milestone';
+@import './pages/monitor';
+@import './pages/note_form';
+@import './pages/notes';
+@import './pages/notifications';
+@import './pages/packages';
+@import './pages/pages';
+@import './pages/pipeline_schedules';
+@import './pages/pipelines';
+@import './pages/profile';
+@import './pages/profiles/preferences';
+@import './pages/projects';
+@import './pages/prometheus';
+@import './pages/reports';
+@import './pages/runners';
+@import './pages/search';
+@import './pages/serverless';
+@import './pages/service_desk';
+@import './pages/settings';
+@import './pages/settings_ci_cd';
+@import './pages/sherlock';
+@import './pages/status';
+@import './pages/storage_quota';
+@import './pages/tags';
+@import './pages/tree';
+@import './pages/trials';
+@import './pages/ui_dev_kit';
+@import './pages/users';
+@import './pages/wiki';

app/assets/stylesheets/application.scss

@@ -22,7 +22,7 @@
 @import 'fontawesome_custom';
 
 // Page specific styles (issues, projects etc):
-@import 'pages/**/*';
+@import 'page_specific_files';
 
 // Component specific styles, will be moved to gitlab-ui
 @import 'components/**/*';

app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss

+/**
+  This file contains only imports of Bootstrap, GitLab UI and GitLab mixins,
+  variables and functions, in the correct order.
+
+  It is meant to be used in page_bundles, but SHOULD NOT introduce any
+  styles of it's own. We actually check in CI that compiling _this_ file doesn't
+  result in any additional styles.
+
+  See: scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js
+ */
+@import 'framework/variables';
+@import 'framework/variables_overrides';
+@import 'framework/mixins';
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+@import '@gitlab/ui/src/scss/functions';
+@import '@gitlab/ui/src/scss/variables';
+@import '@gitlab/ui/src/scss/utility-mixins/index';

app/assets/stylesheets/pages/todos.scss → app/assets/stylesheets/page_bundles/todos.scss

+@import 'mixins_and_variables_and_functions';
+
 /**
  * Dashboard Todos
  *

app/views/dashboard/todos/index.html.haml

@@ -3,6 +3,7 @@
 - header_title _("To-Do List"), dashboard_todos_path
 
 = render_dashboard_gold_trial(current_user)
+= stylesheet_link_tag 'page_bundles/todos'
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title= _('To-Do List')

config/application.rb

@@ -176,7 +176,9 @@ module Gitlab
     config.assets.precompile << "mailer_client_specific.css"
     config.assets.precompile << "notify.css"
     config.assets.precompile << "mailers/*.css"
+    config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css"
     config.assets.precompile << "page_bundles/ide.css"
+    config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "lib/ace.js"

lib/tasks/gitlab/assets.rake

@@ -55,6 +55,7 @@ namespace :gitlab do
         rake:assets:precompile
         gitlab:assets:compile_webpack_if_needed
         gitlab:assets:fix_urls
+        gitlab:assets:check_page_bundle_mixins_css_for_sideeffects
       ].each(&::Gitlab::TaskHelpers.method(:invoke_and_time_task))
     end
 
@@ -127,5 +128,10 @@ namespace :gitlab do
         abort 'Error: Unable to compile webpack DLL.'.color(:red)
       end
     end
+
+    desc 'GitLab | Assets | Check that scss mixins do not introduce any sideffects'
+    task :check_page_bundle_mixins_css_for_sideeffects do
+      system('./scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js')
+    end
   end
 end

scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js

+#!/usr/bin/env node
+
+if (process.env.RAILS_ENV !== 'production') {
+  console.log(
+    `RAILS_ENV is not set to 'production': ${process.env.RAILS_ENV} - Not executing check`,
+  );
+  process.exit(0);
+}
+
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const pjs = require('postcss');
+
+const paths = glob.sync('public/assets/page_bundles/_mixins_and_variables_and_functions*.css', {
+  cwd: path.join(__dirname, '..', '..'),
+});
+
+if (!paths[0]) {
+  console.log('Could not find mixins test file');
+  process.exit(1);
+}
+
+console.log(`Checking ${paths[0]} for side effects`);
+
+const file = fs.readFileSync(paths[0], 'utf-8');
+
+const parsed = pjs.parse(file);
+
+if (parsed.nodes.every(node => ['comment', 'atrule'].includes(node.type))) {
+  console.log('The file does not introduce any side effects, we are all good.');
+  process.exit(0);
+}
+
+console.log(`At least one unwanted style was introduced.`);
+process.exit(1);