oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 12:55:55 +00:00
Code Wiki Activity

migrate off of deprecated sass @imports

Browse source 
used `sass-migrator` and some manual intervention to migrate all of the
`@import`s to `@use` statements.

1. needed to prefix all of the `styles/main.scss` imports to use a
   relative path (i.e. `../../../../styles/main.scss`
2. needed to add a `@use "container"` to `styles/tab-container` so it
   could resolve its `@extend`s
    - not sure if this was just an ordering issue or what, but it works
This commit is contained in:
lemonslut 2025-06-07 15:22:36 -06:00
parent 6c48940f91
commit d078d6e3a9
No known key found for this signature in database
10 changed files with 55 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/sites/clips/styles/clips-main.scss
View file

@ -1,5 +1,5 @@
@import 'styles/main.scss'; @use '../../../../styles/main.scss';
@import '../../twitch-twilight/styles/mod_card.scss'; @use '../../twitch-twilight/styles/mod_card.scss';
.tw-root--theme-dark, html { .tw-root--theme-dark, html {
body { body {

4
src/sites/player/styles/player-main.scss
View file

@ -1,4 +1,4 @@
@import 'styles/main.scss'; @use '../../../../styles/main.scss';
.video-player__inactive, .video-player__inactive,
.video-player__overlay[data-controls="false"] { .video-player__overlay[data-controls="false"] {
@ -55,4 +55,4 @@ div[data-a-target="player-settings-menu"] {
.ffz--cc-button { .ffz--cc-button {
order: 999; order: 999;
} }

20
src/sites/twitch-twilight/styles/main.scss
View file

@ -1,15 +1,15 @@
@import 'styles/main.scss'; @use '../../../../styles/main.scss';
@import 'menu_button'; @use 'menu_button';
@import 'player'; @use 'player';
@import 'channel'; @use 'channel';
@import 'chat'; @use 'chat';
@import 'directory'; @use 'directory';
@import 'fixes'; @use 'fixes';
//@import 'host_options'; //@import 'host_options';
@import 'featured_follow'; @use 'featured_follow';
@import 'mod_card'; @use 'mod_card';
@import 'easteregg'; @use 'easteregg';

3
styles/icons.scss
View file

@ -1,3 +1,4 @@
@use "sass:meta";
@font-face { @font-face {
font-family: 'ffz-fontello'; font-family: 'ffz-fontello';
src: url('~res/font/ffz-fontello.woff2') format('woff2'), src: url('~res/font/ffz-fontello.woff2') format('woff2'),
@ -94,7 +95,7 @@
} }
} }
@import "./fontello/ffz-fontello-codes.scss"; @include meta.load-css("fontello/ffz-fontello-codes.scss");
.ffz-i-pd-1:before { margin-right: 1rem } .ffz-i-pd-1:before { margin-right: 1rem }
.ffz-i-pd-2:before { margin-right: 2rem } .ffz-i-pd-2:before { margin-right: 2rem }

14
styles/main.scss
View file

@ -1,12 +1,12 @@
@import 'icons'; @use 'icons';
@import 'tooltips'; @use 'tooltips';
@import 'widgets'; @use 'widgets';
@import 'dialog'; @use 'dialog';
@import 'native/index'; @use 'native/index';
@import 'structure/index'; @use 'structure/index' as index2;
@import 'chat'; @use 'chat';
@keyframes ffz-rotateplane { @keyframes ffz-rotateplane {
0% { transform: rotateY(90deg) rotateX(180deg) } 0% { transform: rotateY(90deg) rotateX(180deg) }

22
styles/native/index.scss
View file

@ -1,14 +1,14 @@
@import "button"; @use "button";
@import "checkbox"; @use "checkbox";
@import "interactable"; @use "interactable";
@import "text"; @use "text";
@import "link"; @use "link";
@import "card"; @use "card";
@import "tag"; @use "tag";
@import "progress"; @use "progress";
@import "tooltip"; @use "tooltip";
@import "balloon"; @use "balloon";
@import "slider"; @use "slider";
.tw-line-height-body { .tw-line-height-body {
line-height: 1.5!important line-height: 1.5!important

2
styles/structure/index.scss
View file

@ -1,4 +1,4 @@
@import "balloon"; @use "balloon";
.ffz-avatar { .ffz-avatar {
background-color: inherit; background-color: inherit;

26
styles/widgets.scss
View file

@ -1,21 +1,21 @@
@import "./widgets/container.scss"; @use "widgets/container.scss";
@import "./widgets/main-menu.scss"; @use "widgets/main-menu.scss";
@import "./widgets/menu-container.scss"; @use "widgets/menu-container.scss";
@import "./widgets/tab-container.scss"; @use "widgets/tab-container.scss";
@import "./widgets/key-picker.scss"; @use "widgets/key-picker.scss";
@import "./widgets/menu-tree.scss"; @use "widgets/menu-tree.scss";
@import "./widgets/profile-selector.scss"; @use "widgets/profile-selector.scss";
@import "./widgets/badge-visibility.scss"; @use "widgets/badge-visibility.scss";
@import "./widgets/add-ons.scss"; @use "widgets/add-ons.scss";
@import "./widgets/color-picker.scss"; @use "widgets/color-picker.scss";
@import "./widgets/icon-picker.scss"; @use "widgets/icon-picker.scss";
@import "./widgets/chat-tester.scss"; @use "widgets/chat-tester.scss";
@import "./widgets/check-box.scss"; @use "widgets/check-box.scss";
.tw-display-inline { display: inline !important } .tw-display-inline { display: inline !important }
.tw-width-auto { width: auto !important } .tw-width-auto { width: auto !important }

6
styles/widgets/menu-container.scss
View file

@ -1,3 +1,5 @@
@use "container";
.ffz--menu-container { .ffz--menu-container {
@extend .ffz--outer-container; @extend .ffz--outer-container;
@extend .ffz--inner-container; @extend .ffz--inner-container;
@ -5,7 +7,7 @@
position: relative; position: relative;
&:not(.border):not(.border-b) { &:not(.border):not(.border-b) {
margin-bottom: $spacing; margin-bottom: container.$spacing;
} }
& > div { & > div {
@ -19,7 +21,7 @@
& > header { & > header {
position: absolute; position: absolute;
top: 0; left: $spacing - 0.5rem; top: 0; left: container.$spacing - 0.5rem;
transform: translateY(-50%); transform: translateY(-50%);
padding: 0 0.5rem; padding: 0 0.5rem;

4
styles/widgets/tab-container.scss
View file

@ -1,3 +1,5 @@
@use "container";
.ffz--tab-container { .ffz--tab-container {
@extend .ffz--outer-container; @extend .ffz--outer-container;
@ -33,4 +35,4 @@
& > section { & > section {
@extend .ffz--inner-container; @extend .ffz--inner-container;
} }
} }