Patch/3.8.0 beta.36 (#124)

* fix(cli): various fixes for adding custom modes and extensions (OHIF#3683) Co-authored-by: Alireza <ar.sedghi@gmail.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(no sab): should work when shared array buffer is not required (OHIF#3686) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(config): support more values for the useSharedArrayBuffer (OHIF#3688) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(StackSync): Miscellaneous fixes for stack image sync (OHIF#3663) * fix(dicom overlay): Handle special cases of ArrayBuffer for various DICOM overlay attributes. (OHIF#3684) Co-authored-by: Alireza <ar.sedghi@gmail.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(typescript error): Change pubSubServiceInterface file type to typescript (OHIF#3546) Co-authored-by: edward65 <edward@afxmedical.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(editing): regression bug in disable editing (OHIF#3687) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * docs(links): Adding references to two used markdown links (OHIF#3650) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(displayArea): add display area to hanging protocol (OHIF#3691) Co-authored-by: Ouwen Huang <ouwen.oh@gmail.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(debug): Add timing information about time to first image/all images, and query time (OHIF#3681) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(cli): Add npm packaged mode not working (OHIF#3689) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(translation): Side panel translate fix (OHIF#3156) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(locale): Added Turkish language support (tr-TR) - Community PR (OHIF#3695) Co-authored-by: Ahmet Altay <46381367+ahmetaltay33@users.noreply.github.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(locale): add German translations - community PR (OHIF#3697) Co-authored-by: pwespi <pwespi@pm.me> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(measurement and microscopy): various small fixes for measurement and microscopy side panel (OHIF#3696) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(segmentation scroll): and hydration bugs (OHIF#3701) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(bugs): fixing lots of bugs regarding release candidate (OHIF#3700) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(Segmentation): download RTSS from Labelmap(OHIF#3692) Co-authored-by: Alireza <ar.sedghi@gmail.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(segmentation): do not use SAB if not specified (OHIF#3705) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(modality unit): fix the modality unit per target via upgrade of cs3d (OHIF#3706) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(voi): should publish voi change event on reset (OHIF#3707) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(segmentation): Various fixes for segmentation mode and other (OHIF#3709) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(modules): add stylus loader as an option to be uncommented (OHIF#3710) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(i18n): display set(s) are two words for English messages (OHIF#3711) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(export): wrong export for the tmtv RT function (OHIF#3715) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(display messages): broken after timings (OHIF#3719) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * chore(version): move to the next beta version [BUMP BETA] * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(calibration): No calibration popup caused by perhaps an unused code optimization for production builds (OHIF#3736) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(cine): Use the frame rate specified in DICOM and optionally auto play cine (OHIF#3735) Co-authored-by: rareramos <rareramos1126@gmail.com> Co-authored-by: Doug Horner <horner@mieweb.com> Co-authored-by: Rehan <58819707+Rayhan-011@users.noreply.github.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(recipes): package.json script orthanc:up docker-compose path (OHIF#3741) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * docs(azure): Azure static Deployment details (OHIF#3740) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(sr): dcm4chee requires the patient name for an SR to match what is in the original study (OHIF#3739) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(toolbar): allow customizable toolbar for active viewport and allow active tool to be deactivated via a click (OHIF#3608) Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(measurement service): Implemented correct check of schema keys in _isValidMeasurment. (OHIF#3750) * feat(filters): save worklist query filters to session storage so that they persist between navigation to the viewer and back (OHIF#3749) Co-authored-by: ladeirarodolfo <39910206+ladeirarodolfo@users.noreply.github.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(i18n): enhanced i18n support (OHIF#3730) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(thumbnail): Avoid multiple promise creations for thumbnails (OHIF#3756) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * docs(faq): FAQ and Segmentation Mode Fix for some studies (OHIF#3762) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(hp callback): Add viewport ready callback (OHIF#3772) Co-authored-by: Ouwen Huang <ouwen.huang@duke.edu> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat: add VolumeViewport rotation (OHIF#3776) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(arrow): ArrowAnnotate text key cause validation error (OHIF#3771) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(path): upgrade docusaurus for security (OHIF#3780) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(dicomJSON): Add Loading Other Display Sets and JSON Metadata Generation script (OHIF#3777) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(overlay): Overlays aren't shown on undefined origin (OHIF#3781) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix: 🐛 Run error handler for failed image requests (OHIF#3773) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(url): Add SeriesInstanceUIDs wado query param (OHIF#3746) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(docs): Added various training videos to support the OHIF CLI tools (OHIF#3794) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(metadata): to handle cornerstone3D update for htj2k (OHIF#3783) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(DICOM Overlay): The overlay data wasn't being refreshed on change (OHIF#3793) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(events): broadcast series summary metadata (OHIF#3798) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat: Merge Data Source (OHIF#3788) Add the ability to merge two different series queries to generate a complete study query result. Provides basic support for other types of merges, but those aren't yet added as full features. * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix: Update the CS3D packages to add the most recent HTJ2K TSUIDS (OHIF#3806) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(cine): Set cine disabled on mode exit. (OHIF#3812) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(SM): drag and drop is now fixed for SM (OHIF#3813) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(auth): fix the issue with oauth at a non root path (OHIF#3840) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(HP): Added new 3D hanging protocols to be used in the new layout selector (OHIF#3844) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(i18n): enhanced i18n support (OHIF#3761) * fix: address and improve system vulnerabilities (OHIF#3851) * feat(config): Add activateViewportBeforeInteraction parameter for viewport interaction customization (OHIF#3847) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(customizationService): Enable saving and loading of private tags in SRs (OHIF#3842) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * Fix(HPService): custom image load performed is now reset to false on HP exit (OHIF#3809) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * fix(dicom-seg) : Fix the missing color tag when loading Dicom-Seg (OHIF#3822) Co-authored-by: Alireza <ar.sedghi@gmail.com> * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * docs: Update HangingProtocolService.md doc sameAs example to contain constr… (OHIF#3765) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * feat(overlay): add inline binary overlays (OHIF#3852) * fix(icon-style): Ensure consistent icon dimensions (OHIF#3727) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * chore(version): upgrade cornerstone3D versions (OHIF#3853) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] * chore(version): upgrade cornerstone3D versions to fix orientation (OHIF#3854) * chore(version): version.json [skip ci] * chore(version): Update package versions [skip ci] --------- Co-authored-by: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com> Co-authored-by: Alireza <ar.sedghi@gmail.com> Co-authored-by: ohif-bot <danny.ri.brown+ohif-bot@gmail.com> Co-authored-by: Bill Wallace <wayfarer3130@gmail.com> Co-authored-by: Edward Son <edward_son@live.com> Co-authored-by: edward65 <edward@afxmedical.com> Co-authored-by: rodrigobasilio2022 <114958722+rodrigobasilio2022@users.noreply.github.com> Co-authored-by: Yaroslav Halchenko <debian@onerussian.com> Co-authored-by: Ouwen Huang <ouwen.oh@gmail.com> Co-authored-by: wangxuan <wx_0322@163.com> Co-authored-by: Ahmet Altay <46381367+ahmetaltay33@users.noreply.github.com> Co-authored-by: pwespi <pwespi@pm.me> Co-authored-by: dxlin <dxlin@users.noreply.github.com> Co-authored-by: rareramos <rareramos1126@gmail.com> Co-authored-by: Doug Horner <horner@mieweb.com> Co-authored-by: Rehan <58819707+Rayhan-011@users.noreply.github.com> Co-authored-by: edwardyangxin <yx_yoyo@live.cn> Co-authored-by: bluesteel23 <132684122+bluesteel23@users.noreply.github.com> Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com> Co-authored-by: ladeirarodolfo <39910206+ladeirarodolfo@users.noreply.github.com> Co-authored-by: Pavel <P.A.Pisarev@yandex.ru> Co-authored-by: Ouwen Huang <ouwen.huang@duke.edu> Co-authored-by: Pedro H. Köhler <pedrokohlerbh@gmail.com> Co-authored-by: Igor Octaviano <igoroctaviano@gmail.com> Co-authored-by: Sofien-Sellami <73444179+Sofien-Sellami@users.noreply.github.com> Co-authored-by: Salim Kanoun <salim.kanoun@gmail.com> Co-authored-by: Celian-abd <101793092+Celian-abd@users.noreply.github.com>
new-lantern · Jan 10, 2024 · e81e032 · e81e032
1 parent 0c02101
commit e81e032
Show file tree

Hide file tree

Showing 303 changed files with 17,502 additions and 5,172 deletions.
diff --git a/.scripts/dicom-json-generator.js b/.scripts/dicom-json-generator.js
@@ -0,0 +1,265 @@
+/*
+ * This script uses nodejs to generate a JSON file from a DICOM study folder.
+ * You need to have dcmjs installed in your project.
+ * The JSON file can be used to load the study into the OHIF Viewer. You can get more detail
+ * in the DICOM JSON Data source on docs.ohif.org
+ *
+ * Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath>
+ *
+ * params:
+ * - studyFolder: path to the study folder
+ * - urlPrefix: prefix to the url that will be used to load the study into the viewer. For instance
+ *   we use https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data as the urlPrefix for the
+ *   example since the data is hosted on S3 and each study is in a folder. So the url in the generated
+ *   json file for the first instance of the first series of the first study will be
+ *   dicomweb:https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data/Series1/Instance1
+ * - outputJSONPath: path to the output JSON file
+ */
+const dcmjs = require('dcmjs');
+const path = require('path');
+const fs = require('fs').promises;
+
+const args = process.argv.slice(2);
+const [studyDirectory, urlPrefix, outputPath] = args;
+
+if (args.length !== 3) {
+  console.error('Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath>');
+  process.exit(1);
+}
+
+const model = {
+  studies: [],
+};
+
+async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath) {
+  try {
+    const files = await recursiveReadDir(studyDirectory);
+    console.debug('Processing...');
+
+    for (const file of files) {
+      if (!file.includes('.DS_Store') && !file.includes('.xml')) {
+        const arrayBuffer = await fs.readFile(file);
+        const dicomDict = dcmjs.data.DicomMessage.readFile(arrayBuffer.buffer);
+        const instance = dcmjs.data.DicomMetaDictionary.naturalizeDataset(dicomDict.dict);
+
+        instance.fileLocation = createImageId(file, urlPrefix, studyDirectory);
+        processInstance(instance);
+      }
+    }
+
+    console.log('Successfully loaded data');
+
+    model.studies.forEach(study => {
+      study.NumInstances = findInstancesNumber(study);
+      study.Modalities = findModalities(study).join('/');
+    });
+
+    await fs.writeFile(outputPath, JSON.stringify(model, null, 2));
+    console.log('JSON saved');
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function recursiveReadDir(dir) {
+  let results = [];
+  const list = await fs.readdir(dir);
+  for (const file of list) {
+    const filePath = path.resolve(dir, file);
+    const stat = await fs.stat(filePath);
+    if (stat.isDirectory()) {
+      const res = await recursiveReadDir(filePath);
+      results = results.concat(res);
+    } else {
+      results.push(filePath);
+    }
+  }
+  return results;
+}
+
+function createImageId(fileLocation, urlPrefix, studyDirectory) {
+  const relativePath = path.relative(studyDirectory, fileLocation);
+  const normalizedPath = path.normalize(relativePath).replace(/\\/g, '/');
+  return `dicomweb:${urlPrefix}${normalizedPath}`;
+}
+
+function processInstance(instance) {
+  const { StudyInstanceUID, SeriesInstanceUID } = instance;
+  let study = getStudy(StudyInstanceUID);
+
+  if (!study) {
+    study = createStudyMetadata(StudyInstanceUID, instance);
+    model.studies.push(study);
+  }
+
+  let series = getSeries(StudyInstanceUID, SeriesInstanceUID);
+
+  if (!series) {
+    series = createSeriesMetadata(instance);
+    study.series.push(series);
+  }
+
+  const instanceMetaData =
+    instance.NumberOfFrames > 1
+      ? createInstanceMetaDataMultiFrame(instance)
+      : createInstanceMetaData(instance);
+
+  series.instances.push(...[].concat(instanceMetaData));
+}
+
+function getStudy(StudyInstanceUID) {
+  return model.studies.find(study => study.StudyInstanceUID === StudyInstanceUID);
+}
+
+function getSeries(StudyInstanceUID, SeriesInstanceUID) {
+  const study = getStudy(StudyInstanceUID);
+  return study
+    ? study.series.find(series => series.SeriesInstanceUID === SeriesInstanceUID)
+    : undefined;
+}
+
+const findInstancesNumber = study => {
+  let numInstances = 0;
+  study.series.forEach(aSeries => {
+    numInstances = numInstances + aSeries.instances.length;
+  });
+  return numInstances;
+};
+
+const findModalities = study => {
+  let modalities = new Set();
+  study.series.forEach(aSeries => {
+    modalities.add(aSeries.Modality);
+  });
+  return Array.from(modalities);
+};
+
+function createStudyMetadata(StudyInstanceUID, instance) {
+  return {
+    StudyInstanceUID,
+    StudyDescription: instance.StudyDescription,
+    StudyDate: instance.StudyDate,
+    StudyTime: instance.StudyTime,
+    PatientName: instance.PatientName,
+    PatientID: instance.PatientID || '1234', // this is critical to have
+    AccessionNumber: instance.AccessionNumber,
+    PatientAge: instance.PatientAge,
+    PatientSex: instance.PatientSex,
+    PatientWeight: instance.PatientWeight,
+    series: [],
+  };
+}
+function createSeriesMetadata(instance) {
+  return {
+    SeriesInstanceUID: instance.SeriesInstanceUID,
+    SeriesDescription: instance.SeriesDescription,
+    SeriesNumber: instance.SeriesNumber,
+    SeriesTime: instance.SeriesTime,
+    Modality: instance.Modality,
+    SliceThickness: instance.SliceThickness,
+    instances: [],
+  };
+}
+function commonMetaData(instance) {
+  return {
+    Columns: instance.Columns,
+    Rows: instance.Rows,
+    InstanceNumber: instance.InstanceNumber,
+    SOPClassUID: instance.SOPClassUID,
+    AcquisitionNumber: instance.AcquisitionNumber,
+    PhotometricInterpretation: instance.PhotometricInterpretation,
+    BitsAllocated: instance.BitsAllocated,
+    BitsStored: instance.BitsStored,
+    PixelRepresentation: instance.PixelRepresentation,
+    SamplesPerPixel: instance.SamplesPerPixel,
+    PixelSpacing: instance.PixelSpacing,
+    HighBit: instance.HighBit,
+    ImageOrientationPatient: instance.ImageOrientationPatient,
+    ImagePositionPatient: instance.ImagePositionPatient,
+    FrameOfReferenceUID: instance.FrameOfReferenceUID,
+    ImageType: instance.ImageType,
+    Modality: instance.Modality,
+    SOPInstanceUID: instance.SOPInstanceUID,
+    SeriesInstanceUID: instance.SeriesInstanceUID,
+    StudyInstanceUID: instance.StudyInstanceUID,
+    WindowCenter: instance.WindowCenter,
+    WindowWidth: instance.WindowWidth,
+    RescaleIntercept: instance.RescaleIntercept,
+    RescaleSlope: instance.RescaleSlope,
+  };
+}
+
+function conditionalMetaData(instance) {
+  return {
+    ...(instance.ConceptNameCodeSequence && {
+      ConceptNameCodeSequence: instance.ConceptNameCodeSequence,
+    }),
+    ...(instance.SeriesDate && { SeriesDate: instance.SeriesDate }),
+    ...(instance.ReferencedSeriesSequence && {
+      ReferencedSeriesSequence: instance.ReferencedSeriesSequence,
+    }),
+    ...(instance.SharedFunctionalGroupsSequence && {
+      SharedFunctionalGroupsSequence: instance.SharedFunctionalGroupsSequence,
+    }),
+    ...(instance.PerFrameFunctionalGroupsSequence && {
+      PerFrameFunctionalGroupsSequence: instance.PerFrameFunctionalGroupsSequence,
+    }),
+    ...(instance.ContentSequence && { ContentSequence: instance.ContentSequence }),
+    ...(instance.ContentTemplateSequence && {
+      ContentTemplateSequence: instance.ContentTemplateSequence,
+    }),
+    ...(instance.CurrentRequestedProcedureEvidenceSequence && {
+      CurrentRequestedProcedureEvidenceSequence: instance.CurrentRequestedProcedureEvidenceSequence,
+    }),
+    ...(instance.CodingSchemeIdentificationSequence && {
+      CodingSchemeIdentificationSequence: instance.CodingSchemeIdentificationSequence,
+    }),
+    ...(instance.RadiopharmaceuticalInformationSequence && {
+      RadiopharmaceuticalInformationSequence: instance.RadiopharmaceuticalInformationSequence,
+    }),
+    ...(instance.ROIContourSequence && {
+      ROIContourSequence: instance.ROIContourSequence,
+    }),
+    ...(instance.StructureSetROISequence && {
+      StructureSetROISequence: instance.StructureSetROISequence,
+    }),
+    ...(instance.ReferencedFrameOfReferenceSequence && {
+      ReferencedFrameOfReferenceSequence: instance.ReferencedFrameOfReferenceSequence,
+    }),
+    ...(instance.CorrectedImage && { CorrectedImage: instance.CorrectedImage }),
+    ...(instance.Units && { Units: instance.Units }),
+    ...(instance.DecayCorrection && { DecayCorrection: instance.DecayCorrection }),
+    ...(instance.AcquisitionDate && { AcquisitionDate: instance.AcquisitionDate }),
+    ...(instance.AcquisitionTime && { AcquisitionTime: instance.AcquisitionTime }),
+    ...(instance.PatientWeight && { PatientWeight: instance.PatientWeight }),
+    ...(instance.NumberOfFrames && { NumberOfFrames: instance.NumberOfFrames }),
+    ...(instance.FrameTime && { FrameTime: instance.FrameTime }),
+    ...(instance.EncapsulatedDocument && { EncapsulatedDocument: instance.EncapsulatedDocument }),
+    ...(instance.SequenceOfUltrasoundRegions && {
+      SequenceOfUltrasoundRegions: instance.SequenceOfUltrasoundRegions,
+    }),
+  };
+}
+
+function createInstanceMetaData(instance) {
+  const metadata = {
+    ...commonMetaData(instance),
+    ...conditionalMetaData(instance),
+  };
+  return { metadata, url: instance.fileLocation };
+}
+
+function createInstanceMetaDataMultiFrame(instance) {
+  const instances = [];
+  const commonData = commonMetaData(instance);
+  const conditionalData = conditionalMetaData(instance);
+
+  for (let i = 1; i <= instance.NumberOfFrames; i++) {
+    const metadata = { ...commonData, ...conditionalData };
+    const result = { metadata, url: instance.fileLocation + `?frame=${i}` };
+    instances.push(result);
+  }
+  return instances;
+}
+
+convertDICOMToJSON(studyDirectory, urlPrefix, outputPath);
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -31,6 +31,6 @@
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {},
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/.webpack/rules/stylusToJavaScript.js b/.webpack/rules/stylusToJavaScript.js
@@ -0,0 +1,10 @@
+const stylusToJavaScript = {
+  test: /\.styl$/,
+  use: [
+    { loader: 'style-loader' }, // 3. Style nodes from JS Strings
+    { loader: 'css-loader' }, // 2. CSS to CommonJS
+    { loader: 'stylus-loader' }, // 1. Stylus to CSS
+  ],
+};
+
+module.exports = stylusToJavaScript;
diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js
@@ -18,6 +18,7 @@ const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
+const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
 
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -112,6 +113,9 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
           },
         },
         cssToJavaScript,
+        // Note: Only uncomment the following if you are using the old style of stylus in v2
+        // Also you need to uncomment this platform/app/.webpack/rules/extractStyleChunks.js
+        // stylusToJavaScript,
         {
           test: /\.wasm/,
           type: 'asset/resource',