Extract environments CSS from application bundle

Make environments CSS a separate bundle
Use CSS variables instead on SCSS ones

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -72,7 +72,7 @@ export default {
     <stop-environment-modal :environment="environmentInStopModal" />
     <delete-environment-modal :environment="environmentInDeleteModal" />
 
-    <h4 class="js-folder-name environments-folder-name">
+    <h4 class="gl-font-weight-normal" data-testid="folder-name">
       {{ s__('Environments|Environments') }} /
       <b>{{ folderName }}</b>
     </h4>

app/assets/stylesheets/_page_specific_files.scss

@@ -12,7 +12,6 @@
 @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';

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

-@include media-breakpoint-down(md) {
-  .deployments-container {
-    width: 100%;
-    overflow: auto;
-  }
-}
-
-.environments-folder-name {
-  font-weight: $gl-font-weight-normal;
-}
+@import 'page_bundles/mixins_and_variables_and_functions';
 
 .environments-container {
   .ci-table {

app/views/projects/environments/edit.html.haml

 - page_title _("Edit"), @environment.name, _("Environments")
+- add_page_specific_style 'page_bundles/environments'
 
 %h3.page-title
   = _('Edit environment')

app/views/projects/environments/folder.html.haml

 - add_to_breadcrumbs _("Environments"), project_environments_path(@project)
 - breadcrumb_title _("Folder/%{name}") % { name: @folder }
 - page_title _("Environments in %{name}") % { name: @folder }
+- add_page_specific_style 'page_bundles/environments'
 
 #environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data, project_path: @project.full_path } }

app/views/projects/environments/index.html.haml

 - page_title _("Environments")
+- add_page_specific_style 'page_bundles/environments'
 
 #environments-list-view{ data: { environments_data: environments_list_data,
   "can-read-environment" => can?(current_user, :read_environment, @project).to_s,

app/views/projects/environments/new.html.haml

 - breadcrumb_title _("Environments")
 - page_title _("New Environment")
+- add_page_specific_style 'page_bundles/environments'
 
 %h3.page-title
   = _("New environment")

app/views/projects/environments/show.html.haml

@@ -2,6 +2,7 @@
 - breadcrumb_title @environment.name
 - page_title _("Environments")
 - add_page_specific_style 'page_bundles/xterm'
+- add_page_specific_style 'page_bundles/environments'
 
 #environments-detail-view{ data: { name: @environment.name, id: @environment.id, delete_path: environment_delete_path(@environment)} }
   - if @environment.available? && can?(current_user, :stop_environment, @environment)

config/application.rb

+# frozen_string_literal: true
 require_relative 'boot'
 
 # Based on https://github.com/rails/rails/blob/v6.0.1/railties/lib/rails/all.rb
@@ -188,6 +189,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css"
     config.assets.precompile << "page_bundles/boards.css"
     config.assets.precompile << "page_bundles/cycle_analytics.css"
+    config.assets.precompile << "page_bundles/environments.css"
     config.assets.precompile << "page_bundles/ide.css"
     config.assets.precompile << "page_bundles/issues_list.css"
     config.assets.precompile << "page_bundles/jira_connect.css"

ee/app/assets/stylesheets/pages/environments.scss → ee/app/assets/stylesheets/page_bundles/environments.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
 /**
  * Deploy boards
 */

spec/frontend/environments/folder/environments_folder_view_spec.js

+import { GlPagination } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { removeBreakLine, removeWhitespace } from 'helpers/text_helper';
-import { GlPagination } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
-import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import EnvironmentTable from '~/environments/components/environments_table.vue';
+import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
+import axios from '~/lib/utils/axios_utils';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
@@ -89,9 +89,9 @@ describe('Environments Folder View', () => {
     });
 
     it('should render parent folder name', () => {
-      expect(removeBreakLine(removeWhitespace(wrapper.find('.js-folder-name').text()))).toContain(
-        'Environments / review',
-      );
+      expect(
+        removeBreakLine(removeWhitespace(wrapper.find('[data-testid="folder-name"]').text())),
+      ).toContain('Environments / review');
     });
 
     describe('pagination', () => {