Makes TGUI build also run prettier automatically (#22985)

* makes TGUI build also run prettier automatically

* Update tgui/bin/tgui-build.bat

* another error

* and this

* i lied

* final tweaks?

* oh and this lol

* nuke styles because they just get changed for no reason

.gitignore

@@ -58,3 +58,4 @@ __pycache__/
 dmm-tools.exe
 OpenDream
 paradise.json
+$RECYCLE.BIN

tgui/.prettierignore

@@ -1,2 +1,3 @@
-# Ignore built packages:
+# Ignore built packages and styles:
 packages/tgui/public
+packages/tgui/styles

tgui/babel.config.js

@@ -19,6 +19,7 @@ const createBabelConfig = (options) => {
           targets: [],
         },
       ],
+      require.resolve('@babel/preset-react'),
       ...presets,
     ].filter(Boolean),
     plugins: [
@@ -31,7 +32,6 @@ const createBabelConfig = (options) => {
       require.resolve('@babel/plugin-transform-jscript'),
       require.resolve('babel-plugin-inferno'),
       removeConsole && require.resolve('babel-plugin-transform-remove-console'),
-      require.resolve('common/string.babel-plugin.cjs'),
       ...plugins,
     ].filter(Boolean),
   };

tgui/bin/tgui-build.bat

@@ -1,5 +1,6 @@
 @echo off
 cd "%~dp0\.."
 call yarn install
+call yarn prettier --write
 call yarn run build
 timeout /t 9

tgui/package.json

@@ -15,6 +15,13 @@
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.22.15",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-jscript": "^7.22.5",
+    "babel-plugin-inferno": "^6.7.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",

tgui/packages/tgui/components/Slider.js

@@ -77,7 +77,9 @@ export const Slider = (props) => {
               'Slider',
               disabled && 'Slider__disabled',
               'ProgressBar',
-              (disabled ? 'ProgressBar--color--disabled' : 'ProgressBar--color--' + effectiveColor),
+              disabled
+                ? 'ProgressBar--color--disabled'
+                : 'ProgressBar--color--' + effectiveColor,
               className,
               computeBoxClassName(rest),
             ])}

tgui/packages/tgui/interfaces/BotMed.js

@@ -1,7 +1,14 @@
-import { useBackend } from '../backend'
-import { Button, Flex, LabeledList, ProgressBar, Section, Slider } from '../components'
-import { Window } from '../layouts'
-import { BotStatus } from './common/BotStatus'
+import { useBackend } from '../backend';
+import {
+  Button,
+  Flex,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Slider,
+} from '../components';
+import { Window } from '../layouts';
+import { BotStatus } from './common/BotStatus';
 
 export const BotMed = (props, context) => {
   const { act, data } = useBackend(context);
@@ -22,7 +29,7 @@ export const BotMed = (props, context) => {
     injection_amount,
     use_beaker,
     treat_virus,
-    reagent_glass
+    reagent_glass,
   } = data;
   return (
     <Window>
@@ -52,11 +59,13 @@ export const BotMed = (props, context) => {
                 minValue={heal_threshold.min}
                 maxValue={heal_threshold.max}
                 step={5}
-                stepPixelSize={300 / ((heal_threshold.max - heal_threshold.min) / 5)}
+                stepPixelSize={
+                  300 / ((heal_threshold.max - heal_threshold.min) / 5)
+                }
                 disabled={noaccess}
                 onChange={(e, value) =>
                   act('set_heal_threshold', {
-                    target: value
+                    target: value,
                   })
                 }
               />
@@ -67,20 +76,22 @@ export const BotMed = (props, context) => {
                 minValue={injection_amount.min}
                 maxValue={injection_amount.max}
                 step={5}
-                stepPixelSize={300 / ((injection_amount.max - injection_amount.min) / 5)}
+                stepPixelSize={
+                  300 / ((injection_amount.max - injection_amount.min) / 5)
+                }
                 format={(value) => `${value}u`}
                 disabled={noaccess}
                 onChange={(e, value) =>
                   act('set_injection_amount', {
-                    target: value
+                    target: value,
                   })
                 }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Reagent Source">
               <Button
-                content={use_beaker ? "Beaker" : "Internal Synthesizer"}
-                icon={use_beaker ? "flask" : "cogs"}
+                content={use_beaker ? 'Beaker' : 'Internal Synthesizer'}
+                icon={use_beaker ? 'flask' : 'cogs'}
                 disabled={noaccess}
                 onClick={() => act('toggle_use_beaker')}
               />
@@ -89,7 +100,13 @@ export const BotMed = (props, context) => {
               <LabeledList.Item label="Beaker">
                 <Flex inline width="100%">
                   <Flex.Item grow={1}>
-                    <ProgressBar value={reagent_glass.amount} minValue={0} maxValue={reagent_glass.max_amount}>{reagent_glass.amount} / {reagent_glass.max_amount}</ProgressBar>
+                    <ProgressBar
+                      value={reagent_glass.amount}
+                      minValue={0}
+                      maxValue={reagent_glass.max_amount}
+                    >
+                      {reagent_glass.amount} / {reagent_glass.max_amount}
+                    </ProgressBar>
                   </Flex.Item>
                   <Flex.Item ml={1}>
                     <Button
@@ -130,5 +147,5 @@ export const BotMed = (props, context) => {
         )}
       </Window.Content>
     </Window>
-  )
-}
+  );
+};

tgui/packages/tgui/interfaces/NTRecruiter.js

@@ -80,8 +80,9 @@ export const NTRecruiter = (props, context) => {
           >
             <LabeledList>
               <LabeledListItem label="1#" color="silver">
-                To win this game you must hire/dismiss <b>{total_curriculums}</b> candidates,
-                one wrongly made choice leads to a game over.
+                To win this game you must hire/dismiss{' '}
+                <b>{total_curriculums}</b> candidates, one wrongly made choice
+                leads to a game over.
               </LabeledListItem>
               <LabeledListItem label="2#" color="silver">
                 Make the right choice by truly putting yourself into the skin of

tgui/packages/tgui/interfaces/RoboticsControlConsole.js

@@ -43,8 +43,8 @@ export const RoboticsControlConsole = (props, context) => {
 const Cyborgs = (props, context) => {
   const { cyborgs, can_hack } = props;
   const { act, data } = useBackend(context);
-  let detonateText = "Detonate";
-  if(data.detonate_cooldown > 0){
+  let detonateText = 'Detonate';
+  if (data.detonate_cooldown > 0) {
     detonateText += ' (' + data.detonate_cooldown + 's)';
   }
   if (!cyborgs.length) {
@@ -85,7 +85,7 @@ const Cyborgs = (props, context) => {
             <Button.Confirm
               icon="bomb"
               content={detonateText}
-              disabled={!data.auth  || data.detonate_cooldown > 0}
+              disabled={!data.auth || data.detonate_cooldown > 0}
               color="bad"
               onClick={() =>
                 act('killbot', {

tgui/packages/tgui/interfaces/SeedExtractor.js

@@ -77,7 +77,7 @@ const SeedsContent = (props, context) => {
               onClick={() =>
                 act('vend', {
                   seedid: seed.id,
-				  seedvariant: seed.variant,
+                  seedvariant: seed.variant,
                 })
               }
             />

tgui/packages/tgui/interfaces/SpecMenu.js

@@ -150,8 +150,8 @@ const GarMenu = (props, context) => {
         </p>
         <p>
           <b>Overwhelming force</b>: Unlocked at 600 blood, when toggled, if you
-          bump into a door that you do not have access to, it will force it open.
-          In addition, you cannot be pushed or pulled while it is active.
+          bump into a door that you do not have access to, it will force it
+          open. In addition, you cannot be pushed or pulled while it is active.
         </p>
         <p>
           <b>Demonic grasp</b>: Unlocked at 800 blood, allows you to send out a
@@ -222,8 +222,8 @@ const DantMenu = (props, context) => {
         <p>
           <b>Full Power</b>
           <Divider />
-          <b>Mass Hysteria</b>: Casts a powerful illusion that blinds and then makes
-          everyone nearby perceive others as random animals.
+          <b>Mass Hysteria</b>: Casts a powerful illusion that blinds and then
+          makes everyone nearby perceive others as random animals.
         </p>
         <Button content="Dantalion" onClick={() => act('dantalion')} />
       </Section>

tgui/packages/tgui/styles/themes/abductor.scss

@@ -46,10 +46,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-background': rgba(0, 0, 0, 0.5),
-      'color-disabled': #363636
-    )
+    $with: ('color-background': rgba(0, 0, 0, 0.5), 'color-disabled': #363636)
   );
   @include meta.load-css('../components/Section.scss');
   @include meta.load-css(

tgui/packages/tgui/styles/themes/cardtable.scss

@@ -34,10 +34,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-background': rgba(0, 0, 0, 0.5),
-      'color-disabled': #363636
-    )
+    $with: ('color-background': rgba(0, 0, 0, 0.5), 'color-disabled': #363636)
   );
   @include meta.load-css('../components/Section.scss');
 

tgui/packages/tgui/styles/themes/hackerman.scss

@@ -31,9 +31,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-disabled': #4a6a4a,
-    )
+    $with: ('color-disabled': #4a6a4a)
   );
   @include meta.load-css('../components/Modal.scss');
   @include meta.load-css('../components/Section.scss');

tgui/packages/tgui/styles/themes/malfunction.scss

@@ -41,10 +41,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-background': rgba(0, 0, 0, 0.5),
-      'color-disabled': #363636
-    )
+    $with: ('color-background': rgba(0, 0, 0, 0.5), 'color-disabled': #363636)
   );
   @include meta.load-css('../components/Section.scss');
   @include meta.load-css(

tgui/packages/tgui/styles/themes/retro.scss

@@ -31,10 +31,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-background': rgba(0, 0, 0, 0.5),
-      'color-disabled': #363636
-    )
+    $with: ('color-background': rgba(0, 0, 0, 0.5), 'color-disabled': #363636)
   );
   @include meta.load-css('../components/Section.scss');
 

tgui/packages/tgui/styles/themes/syndicate.scss

@@ -41,10 +41,7 @@
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: (
-      'color-background': rgba(0, 0, 0, 0.5),
-      'color-disabled': #363636
-    )
+    $with: ('color-background': rgba(0, 0, 0, 0.5), 'color-disabled': #363636)
   );
   @include meta.load-css('../components/Section.scss');
   @include meta.load-css(