Merge branch 'fixes-roundup4' into shigusegubu-themes3

Update dependency postcss to v8.5.2

See merge request pleroma/pleroma-fe!2042

build/dev-server.js

@@ -53,7 +53,8 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware.createProxyMiddleware(context, options))
+  options.pathFilter = context
+  app.use(proxyMiddleware.createProxyMiddleware(options))
 })
 
 // handle fallback for HTML5 history API

package.json

@@ -51,10 +51,10 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.7",
+    "@babel/core": "7.26.8",
-    "@babel/eslint-parser": "7.26.5",
+    "@babel/eslint-parser": "7.26.8",
-    "@babel/plugin-transform-runtime": "7.25.9",
+    "@babel/plugin-transform-runtime": "7.26.8",
-    "@babel/preset-env": "7.26.7",
+    "@babel/preset-env": "7.26.8",
     "@babel/register": "7.25.9",
     "@intlify/vue-i18n-loader": "5.0.1",
     "@ungap/event-target": "0.2.4",
@@ -78,7 +78,7 @@
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-n": "15.7.0",
+    "eslint-plugin-n": "17.15.1",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-vue": "9.32.0",
     "eslint-webpack-plugin": "4.2.0",
@@ -86,7 +86,7 @@
     "express": "4.21.2",
     "function-bind": "1.1.2",
     "html-webpack-plugin": "5.6.3",
-    "http-proxy-middleware": "2.0.7",
+    "http-proxy-middleware": "3.0.3",
     "iso-639-1": "3.1.5",
     "json-loader": "0.5.7",
     "karma": "6.4.4",
@@ -104,7 +104,7 @@
     "nightwatch": "2.6.25",
     "opn": "5.5.0",
     "ora": "0.4.1",
-    "postcss": "8.5.1",
+    "postcss": "8.5.2",
     "postcss-html": "^1.5.0",
     "postcss-loader": "7.3.4",
     "postcss-scss": "^4.0.6",

src/App.scss

@@ -1,6 +1,6 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
 
 :root {
   --status-margin: 0.75em;

src/components/attachment/attachment.style.js

@@ -4,7 +4,7 @@ export default {
   notEditable: true,
   validInnerComponents: [
     'Border',
-    'ButtonUnstyled',
+    'Button',
     'Input'
   ],
   defaultRules: [
@@ -14,7 +14,7 @@ export default {
       }
     },
     {
-      component: 'ButtonUnstyled',
+      component: 'Button',
       parent: { component: 'Attachment' },
       directives: {
         background: '#FFFFFF',

src/components/attachment/attachment.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="usePlaceholder"
-    class="Attachment -placeholder button-unstyled"
+    class="Attachment -placeholder button-default"
     :class="classNames"
     @click="openModal"
   >
@@ -23,7 +23,7 @@
     >
       <button
         v-if="remove"
-        class="button-unstyled attachment-button"
+        class="button-default attachment-button"
         @click.prevent="onRemove"
       >
         <FAIcon icon="trash-alt" />
@@ -81,7 +81,7 @@
       >
         <button
           v-if="type === 'flash' && flashLoaded"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.attachment_stop_flash')"
           @click.prevent="stopFlash"
         >
@@ -89,7 +89,7 @@
         </button>
         <button
           v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
         >
@@ -97,7 +97,7 @@
         </button>
         <button
           v-if="!useModal && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.show_attachment_in_modal')"
           @click.prevent="openModalForce"
         >
@@ -105,7 +105,7 @@
         </button>
         <button
           v-if="nsfw && hideNsfwLocal"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.hide_attachment')"
           @click.prevent="toggleHidden"
         >
@@ -113,7 +113,7 @@
         </button>
         <button
           v-if="shiftUp"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.move_up')"
           @click.prevent="onShiftUp"
         >
@@ -121,7 +121,7 @@
         </button>
         <button
           v-if="shiftDn"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.move_down')"
           @click.prevent="onShiftDn"
         >
@@ -129,7 +129,7 @@
         </button>
         <button
           v-if="remove"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.remove_attachment')"
           @click.prevent="onRemove"
         >

src/components/chat/chat.vue

@@ -95,6 +95,4 @@
 </template>
 
 <script src="./chat.js"></script>
-<style lang="scss">
+<style src="./chat.scss" lang="scss" />
-@import "./chat";
-</style>

src/components/chat_list_item/chat_list_item.vue

@@ -47,6 +47,4 @@
 
 <script src="./chat_list_item.js"></script>
 
-<style lang="scss">
+<style src="./chat_list_item.scss" lang="scss" />
-@import "./chat_list_item";
-</style>

src/components/chat_message/chat_message.vue

@@ -98,7 +98,5 @@
 </template>
 
 <script src="./chat_message.js"></script>
-<style lang="scss">
-@import "./chat_message";
 
-</style>
+<style src="./chat_message.scss" lang="scss" />

src/components/chat_new/chat_new.vue

@@ -47,6 +47,5 @@
 </template>
 
 <script src="./chat_new.js"></script>
-<style lang="scss">
+
-@import "./chat_new";
+<style src="./chat_new.scss" lang="scss" />
-</style>

src/components/checkbox/checkbox.vue

@@ -63,8 +63,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../mixins";
-
 .checkbox {
   position: relative;
   display: inline-block;

src/components/emoji_reactions/emoji_reactions.scss

@@ -0,0 +1,121 @@
+@use "../../mixins";
+
+.EmojiReactions {
+  display: flex;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
+
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        margin: 0;
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .emoji-reaction {
+    padding-left: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
+
+    .reaction-emoji {
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      --_still_image-label-scale: 0.3;
+    }
+
+    .reaction-emoji-content {
+      max-width: 100%;
+      max-height: 100%;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      line-height: inherit;
+      overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
+
+      img {
+        object-fit: contain;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .svg-inline--fa {
+      color: var(--text);
+    }
+
+    &.-picked-reaction {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+    }
+
+    @include mixins.unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include mixins.focused-style {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/components/emoji_reactions/emoji_reactions.vue

@@ -70,126 +70,5 @@
 </template>
 
 <script src="./emoji_reactions.js"></script>
-<style lang="scss">
-@import "../../mixins";
 
-.EmojiReactions {
+<style src="./emoji_reactions.scss" lang="scss" />
-  display: flex;
-  margin-top: 0.25em;
-  flex-wrap: wrap;
-
-  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
-
-  .emoji-reaction-container {
-    display: flex;
-    align-items: stretch;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-
-    .emoji-reaction-popover {
-      padding: 0;
-
-      .emoji-reaction-count-button {
-        margin: 0;
-        height: 100%;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        box-sizing: border-box;
-        min-width: 2em;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  .emoji-reaction {
-    padding-left: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    margin: 0;
-
-    .reaction-emoji {
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      margin-right: 0.25em;
-      line-height: var(--emoji-size);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      --_still_image-label-scale: 0.3;
-    }
-
-    .reaction-emoji-content {
-      max-width: 100%;
-      max-height: 100%;
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      line-height: inherit;
-      overflow: hidden;
-      font-size: calc(var(--emoji-size) * 0.8);
-      margin: 0;
-
-      img {
-        object-fit: contain;
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .svg-inline--fa {
-      color: var(--text);
-    }
-
-    &.-picked-reaction {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .emoji-reaction-expand {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-    margin-top: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-</style>

src/components/mention_link/mention_link.js

@@ -117,9 +117,6 @@ const MentionLink = {
         this.highlightType
       ]
     },
-    useAtIcon () {
-      return this.mergedConfig.useAtIcon
-    },
     isRemote () {
       return this.userName !== this.userNameFull
     },

src/components/mention_link/mention_link.vue

@@ -34,12 +34,7 @@
             :user="user"
           /><span
             class="shortName"
-          ><FAIcon
+          >@<span
-            v-if="useAtIcon"
-            size="sm"
-            icon="at"
-            class="at"
-          />{{ !useAtIcon ? '@' : '' }}<span
             class="userName"
             v-html="userName"
           /><span

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -238,6 +238,4 @@
 
 <script src="./mrf_transparency_panel.js"></script>
 
-<style lang="scss">
+<style src="./mrf_transparency_panel.scss" lang="scss"/>
-@import "./mrf_transparency_panel";
-</style>

src/components/settings_modal/tabs/general_tab.vue

@@ -365,14 +365,6 @@
             {{ $t('settings.mention_link_use_tooltip') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="useAtIcon"
-            expert="1"
-          >
-            {{ $t('settings.use_at_icon') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="mentionLinkShowAvatar">
             {{ $t('settings.mention_link_show_avatar') }}

src/components/status_action_buttons/action_button.scss

@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
@@ -52,7 +52,7 @@
     grid-auto-columns: max-content;
     align-items: center;
 
-    @include unfocused-style {
+    @include mixins.unfocused-style {
       .focus-marker {
         visibility: hidden;
       }
@@ -62,7 +62,7 @@
       }
     }
 
-    @include focused-style {
+    @include mixins.focused-style {
       .focus-marker {
         visibility: visible;
       }

src/components/status_action_buttons/buttons_definitions.js

@@ -112,9 +112,9 @@ export const BUTTONS = [{
   },
   action ({ status, dispatch }) {
     if (status.pinned) {
-      return dispatch('unpinStatus', { id: status.id })
+      return dispatch('unpinStatus', status.id)
     } else {
-      return dispatch('pinStatus', { id: status.id })
+      return dispatch('pinStatus', status.id)
     }
   }
 }, {

src/components/status_action_buttons/status_action_buttons.scss

@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 
 .StatusActionButtons {
   .quick-action-buttons {

src/modules/default_config_state.js

@@ -129,7 +129,6 @@ export const defaultState = {
   forcedRoundness: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
-  useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default

src/modules/instance.js

@@ -57,7 +57,6 @@ const defaultState = {
   embeddedToS: true,
   collapseMessageWithSubject: false,
   greentext: false,
-  useAtIcon: false,
   mentionLinkDisplay: 'short',
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: false,

src/services/theme_data/theme_data_3.service.js

@@ -33,9 +33,11 @@ const components = {
   Icon: null,
   Border: null,
   PanelHeader: null,
+  Attachment: null,
   Panel: null,
   Chat: null,
-  ChatMessage: null
+  ChatMessage: null,
+  Button: null
 }
 
 export const findShadow = (shadows, { dynamicVars, staticVars }) => {
@@ -152,13 +154,13 @@ componentsContext.keys().forEach(key => {
   }
   components[component.name] = component
 })
+
 Object.keys(components).forEach(key => {
   if (key === 'Root') return
   components.Root.validInnerComponents = components.Root.validInnerComponents || []
   components.Root.validInnerComponents.push(key)
 })
 
-
 Object.keys(components).forEach(key => {
   const component = components[key]
   const { validInnerComponents = [] } = component
@@ -569,6 +571,7 @@ export const init = ({
       }
 
       if (
+        !liteMode &&
         parent?.component !== 'Root' &&
           !virtualComponents.has(component.name) &&
           !transparentComponents.has(component.name) &&

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -1,4 +1,3 @@
-// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
 import {
   getAllPossibleCombinations
 } from 'src/services/theme_data/iss_utils.js'
@@ -120,6 +119,7 @@ describe('Theme Data 3', () => {
             opacity: 0.5
           }
         }],
+        onlyNormalState: true,
         ultimateBackgroundColor: '#DEADAF'
       })
 
@@ -142,9 +142,9 @@ describe('Theme Data 3', () => {
 
       */
 
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(88.8, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(111, 0.01)
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(133.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(150.5, 0.01)
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(134, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(151.5, 0.01)
     })
   })
 })