[full-ci] Dedupe CSS (#8041)

* Dedupe CSS * Replace 'extend' with actual CSS and/or mixins * Fix breadcrumb acceptance tests * Give priority to some of the theme styles Co-authored-by: Jannik Stehle <[email protected]>
owncloud · Dec 1, 2022 · 2699bbd · 2699bbd
1 parent 1a3cac0
commit 2699bbd
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 62 deletions.
diff --git a/packages/design-system/src/components/OcAccordion/OcAccordion.vue b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
@@ -158,8 +158,7 @@ export default {
   }
 
   &-title {
-    @extend .oc-mb-rm;
-
+    margin-bottom: 0;
     display: block;
     font-size: var(--oc-font-size-large);
 

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list oc-flex">
+    <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
         v-for="(item, index) in items"
         :key="index"
@@ -52,12 +52,12 @@
       <label
         ref="mobileDropdown"
         tabindex="0"
-        class="oc-breadcrumb-drop-label"
+        class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"
         @keydown.enter="$refs.mobileDropdown.click()"
       >
         <span
           v-if="currentFolder"
-          class="oc-breadcrumb-drop-label-text"
+          class="oc-breadcrumb-drop-label-text oc-text-truncate"
           aria-current="page"
           v-text="currentFolder.text"
         />
@@ -177,9 +177,9 @@ export default {
   overflow: hidden;
 
   &-list {
-    @extend .oc-visible\@s;
-    @extend .oc-m-rm;
-    @extend .oc-p-rm;
+    @media (max-width: $oc-breakpoint-xsmall-max) {
+      display: none !important;
+    }
 
     list-style: none;
     align-items: baseline;
@@ -234,12 +234,13 @@ export default {
   /* stylelint-enable */
 
   &-drop {
-    @extend .oc-hidden\@s;
+    @media (min-width: $oc-breakpoint-small-default) {
+      display: none !important;
+    }
 
     .oc-drop > .oc-card > ol {
-      @extend .oc-m-rm;
-      @extend .oc-p-rm;
-
+      margin: 0;
+      padding: 0;
       list-style: none;
 
       > li a,
@@ -261,18 +262,10 @@ export default {
     }
 
     &-label {
-      @extend .oc-flex;
-      @extend .oc-flex-middle;
-      @extend .oc-flex-between;
-
       border: $global-border-width solid var(--oc-color-swatch-primary-muted);
       cursor: pointer;
       height: $global-control-height;
       padding: var(--oc-space-small);
-
-      &-text {
-        @extend .oc-text-truncate;
-      }
     }
   }
 }

diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list oc-flex">
+  <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
       <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
@@ -23,7 +23,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <!---->
     </li>
   </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"><span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
     </label>
     <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
@@ -51,7 +51,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list oc-flex">
+  <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
       <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
@@ -72,7 +72,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <!---->
     </li>
   </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between"><span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
     </label>
     <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">

diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -360,7 +360,7 @@ export default {
       var(--oc-color-swatch-primary-muted)
     );
     &-filled {
-      @extend .oc-background-primary-gradient;
+      @include oc-background-primary-gradient;
       color: var(--oc-color-swatch-inverse-default) !important;
 
       span > svg {

diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -33,8 +33,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-loader {
-  @extend .oc-position-relative;
-
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: #f8f8f8;
@@ -47,20 +45,20 @@ export default {
   overflow: hidden;
   vertical-align: baseline;
   width: 100%;
+  position: relative;
 
   &-flat {
     border-radius: 0 !important;
     height: 5px !important;
   }
 
   &::after {
-    @extend .oc-position-absolute;
-    @extend .oc-display-block;
-
     background: var(--oc-color-text-muted);
     content: '';
     height: 100%;
     width: 0;
+    display: block;
+    position: absolute;
 
     animation: {
       duration: 1.4s;

diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-progress-pie" :data-fill="_fill">
     <div class="oc-progress-pie-container" />
-    <label v-if="showLabel" class="oc-progress-pie-label" v-text="_label" />
+    <label v-if="showLabel" class="oc-progress-pie-label oc-text-muted" v-text="_label" />
   </div>
 </template>
 <script>
@@ -104,8 +104,6 @@ $default-size: 64px;
   }
 
   &-label {
-    @extend .oc-text-muted;
-
     color: var(--oc-color-text-muted) !important;
     left: 50%;
     position: absolute;

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -2,7 +2,7 @@
   <oc-grid
     flex
     :role="isFilter ? undefined : 'search'"
-    class="oc-search"
+    class="oc-search oc-flex-middle"
     :class="{ 'oc-search-small': small }"
   >
     <div class="oc-width-expand oc-position-relative">
@@ -227,7 +227,7 @@ export default {
       return 'medium'
     },
     inputClass() {
-      const classes = ['oc-search-input']
+      const classes = ['oc-search-input', 'oc-input']
 
       this.icon && classes.push('oc-search-input-icon')
       !this.buttonHidden && classes.push('oc-search-input-button')
@@ -287,8 +287,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-search {
-  @extend .oc-flex-middle;
-
   min-width: $form-width-medium;
 
   &-button {
@@ -313,8 +311,6 @@ export default {
   }
 
   &-input {
-    @extend .oc-input;
-
     border-radius: 25px;
     border: 1px solid var(--oc-color-input-border);
     color: var(--oc-color-input-text-muted);

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -7,7 +7,7 @@
         v-bind="additionalAttributes"
         ref="input"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-rounded"
+        class="oc-text-input oc-input oc-rounded"
         :class="{
           'oc-text-input-warning': !!warningMessage,
           'oc-text-input-danger': !!errorMessage
@@ -276,8 +276,6 @@ export default {
 @import '../../styles/styles';
 
 .oc-text-input {
-  @extend .oc-input;
-
   background-color: var(--oc-color-input-bg);
   border: 1px solid var(--oc-color-input-border);
   color: var(--oc-color-input-text-muted);
@@ -309,10 +307,9 @@ export default {
   }
 
   &-message {
-    @extend .oc-flex;
-    @extend .oc-flex-middle;
-    @extend .oc-mt-xs;
-
+    display: flex;
+    align-items: center;
+    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
 }

diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -230,9 +230,9 @@ export default {
   }
 
   &-message {
-    @extend .oc-flex;
-    @extend .oc-flex-middle;
-    @extend .oc-mt-xs;
+    display: flex;
+    align-items: center;
+    margin-top: var(--oc-space-xsmall);
 
     min-height: $oc-font-size-default * 1.5;
   }

diff --git a/packages/design-system/src/styles/styles.scss b/packages/design-system/src/styles/styles.scss
@@ -20,3 +20,5 @@
 @import "theme/oc-visibility";
 @import "theme/oc-width";
 @import "theme/tooltip";
+
+/* STYLES STRIP IMPORTS MARKER */
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
@@ -1,3 +1,10 @@
+@mixin oc-background-primary-gradient {
+  background:
+    linear-gradient(90deg,
+      var(--oc-color-swatch-primary-muted) 0%,
+      var(--oc-color-swatch-primary-gradient) 100%);
+}
+
 .oc-background-selected {
   background-color: var(--oc-color-background-highlight) !important;
 }
@@ -8,11 +15,9 @@
 
 /* stylelint-disable */
 .oc-background-primary-gradient {
-  background:
-    linear-gradient(90deg,
-    var(--oc-color-swatch-primary-muted) 0%,
-    var(--oc-color-swatch-primary-gradient) 100%);
+  @include oc-background-primary-gradient;
 }
+
 /* stylelint-enable */
 
 .oc-background-secondary {

diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
@@ -68,14 +68,14 @@ td.oc-text-truncate {
  * Wrap long words onto the next line and break them if they are too long to fit
  */
 .oc-text-break {
-  overflow-wrap: break-word;
-  white-space: unset;
-  word-wrap: break-word;
+  overflow-wrap: break-word !important;
+  white-space: unset !important;
+  word-wrap: break-word !important;
 }
 
 th.oc-text-break,
 td.oc-text-break {
-  word-break: break-all;
+  word-break: break-all !important;
 }
 
 /* ----------------------- */

diff --git a/packages/design-system/src/styles/theme/oc-width.scss b/packages/design-system/src/styles/theme/oc-width.scss
@@ -167,7 +167,7 @@ $width-2xlarge-width: 750px !default;
 .oc-width-2xlarge { width: $width-2xlarge-width; }
 
 /* Auto */
-.oc-width-auto { width: auto; }
+.oc-width-auto { width: auto !important; }
 
 /* Expand */
 .oc-width-expand {

diff --git a/packages/web-app-files/src/components/Spaces/ReadmeContentModal.vue b/packages/web-app-files/src/components/Spaces/ReadmeContentModal.vue
@@ -13,7 +13,7 @@
         <textarea
           id="description-input-area"
           v-model="readmeContent"
-          class="oc-width-1-1 oc-height-1-1 oc-text-input"
+          class="oc-width-1-1 oc-height-1-1 oc-input oc-text-input"
           rows="30"
         ></textarea>
       </template>

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -42,6 +42,8 @@
   </div>
 </template>
 <script lang="ts">
+import '../../design-system/src/styles/styles.scss'
+
 import { mapGetters, mapState, mapActions } from 'vuex'
 import SkipTo from './components/SkipTo.vue'
 import LayoutApplication from './layouts/Application.vue'

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -44,6 +44,18 @@ const __filename = fileURLToPath(import.meta.url)
 const projectRootDir = dirname(__filename)
 
 const plugins = [
+  {
+    transform(src, id) {
+      if (id.includes('rollup-plugin-vue=styles')) {
+        const split = src.split('/* STYLES STRIP IMPORTS MARKER */')
+        const newSrc = split[split.length-1]
+        return {
+          code: newSrc,
+          map: null
+        }
+      }
+    }
+  },
   postcss({
     extract: path.join('css', 'web.css'),
     minimize: production,

diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
@@ -356,12 +356,12 @@ module.exports = {
       selector: '#files-breadcrumb li:nth-of-type(2)'
     },
     breadcrumbMobile: {
-      selector: '//span[@class="oc-breadcrumb-drop-label-text" and text()=%s]',
+      selector: '//span[contains(@class, "oc-breadcrumb-drop-label-text") and text()=%s]',
       locateStrategy: 'xpath'
     },
     breadcrumbMobileReferencedToOpenSidebarButton: {
       selector:
-        '//button[@aria-label="Open sidebar to view details"]/ancestor::div//span[@class="oc-breadcrumb-drop-label-text" and text()=%s]',
+        '//button[@aria-label="Open sidebar to view details"]/ancestor::div//span[contains(@class, "oc-breadcrumb-drop-label-text") and text()=%s]',
       locateStrategy: 'xpath'
     },
     resourceBreadcrumb: {

diff --git a/tests/unit/config/jest.config.js b/tests/unit/config/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
     '^.+\\.vue$': '@vue/vue2-jest'
   },
   moduleNameMapper: {
-    '\\.(css|less)$': '<rootDir>/tests/unit/stubs/empty.js',
+    '\\.(css|less|scss)$': '<rootDir>/tests/unit/stubs/empty.js',
     '^@/(.*)$': '<rootDir>/$1',
     'core-js': '<rootDir>/node_modules/core-js',