Merge pull request #133 from fullstackedorg/sass-version

Publish scripts and Sass version display

README.md

@@ -4,38 +4,38 @@
 
 [Docs](https://docs.fullstacked.org) | [Demo](https://demo.fullstacked.org) | [Figma](https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups)
 
-Create local-first web-like apps on any platform.
+Create local-first web-like projects on any platform.
 
 ### Create
 
-Build, run and share applications all within the same environment.
+Build, run and share projects all within the same environment.
 
 ### Local-First
 
-No server needed. Make multi-user functionalities with the built-in peer-to-peer connectivity.
+No server needed.
 
-### Web-Like Apps
+### Web-Like
 
 Use some of the most popular tools to rapidly build.
 
--   JavaScript
--   TypeScript
--   git
--   HTML
--   CSS
--   SASS
--   React
--   MUI
--   ThreeJS
--   Yjs
+- JavaScript
+- TypeScript
+- esbuild
+- git
+- Sass
+- HTML
+- CSS
+- npm
+    - React
+    - MUI
+    - ThreeJS
+    - Yjs
 
 ### On Any Platform
 
 Available on
 
--   iOS/iPadOS
--   Android
--   MacOS
--   Windows
--   Linux
--   Docker
+- iOS/iPadOS
+- Android
+- MacOS
+- Windows

editor/index.scss

@@ -4,34 +4,34 @@ https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
 */
 
 // globals
-@import "./style/globals/colors.scss";
-@import "./style/globals/spacing.scss";
-@import "./style/globals/typography.scss";
-@import "./style/globals/input.scss";
-@import "./style/globals/list.scss";
-@import "./style/globals/winbox.scss";
+@use "style/globals/colors.scss";
+@use "style/globals/spacing.scss";
+@use "style/globals/typography.scss";
+@use "style/globals/input.scss";
+@use "style/globals/list.scss";
+@use "style/globals/winbox.scss";
 
 // components
-@import "./components/primitives/badge.scss";
-@import "./components/primitives/button.scss";
-@import "./components/primitives/icon.scss";
-@import "./components/primitives/inputs.scss";
-@import "./components/top-bar.scss";
-@import "./components/view-scrollable.scss";
-@import "./components/popover.scss";
-@import "./components/loader.scss";
-@import "./components/dialog.scss";
-@import "./components/message.scss";
-@import "../lib/components/snackbar.scss";
+@use "components/primitives/badge.scss";
+@use "components/primitives/button.scss";
+@use "components/primitives/icon.scss";
+@use "components/primitives/inputs.scss";
+@use "components/top-bar.scss";
+@use "components/view-scrollable.scss";
+@use "components/popover.scss";
+@use "components/loader.scss";
+@use "components/dialog.scss";
+@use "components/message.scss";
+@use "../lib/components/snackbar.scss";
 
 // views
-@import "./views/projects/index.scss";
-@import "./views/project-settings.scss";
-@import "./views/add-project/index.scss";
-@import "./views/settings/index.scss";
-@import "./views/project/index.scss";
-@import "./views/project/git/index.scss";
-@import "./views/packages/index.scss";
+@use "views/projects/index.scss";
+@use "views/project-settings.scss";
+@use "views/add-project/index.scss" as index2;
+@use "views/settings/index.scss" as index3;
+@use "views/project/index.scss" as index4;
+@use "views/project/git/index.scss" as index5;
+@use "views/packages/index.scss" as index6;
 
 * {
     -webkit-font-smoothing: antialiased;

editor/views/project/code-editor.ts

@@ -44,8 +44,7 @@ export function CodeEditor(project: Project) {
 
     const onBuildErrors = (errors: BuildError[]) => {
         clearBuildErrors();
-        1;
-        buildErrors = errors.filter(({ file }) => file.startsWith(project.id));
+        buildErrors = errors.filter(({ file }) => file?.startsWith(project.id));
         buildErrors.forEach((err) => {
             Store.editor.codeEditor.openFile(err.file);
             Store.editor.codeEditor.focusFile(err.file);

editor/views/settings/version.ts

@@ -5,14 +5,20 @@ import { Badge } from "../../components/primitives/badge";
 import esbuild from "../../lib/esbuild";
 import { WorkerTS } from "../../typescript";
 import semver from "semver";
+import * as sass from "sass";
 
 export function Version() {
     const container = document.createElement("div");
     container.classList.add("version");
 
     container.innerHTML = `<h2>Version</h2>`;
 
-    container.append(EditorVersion(), EsbuildVersion(), TypescriptVersion());
+    container.append(
+        EditorVersion(),
+        EsbuildVersion(),
+        TypescriptVersion(),
+        SassVersion()
+    );
 
     return container;
 }
@@ -108,6 +114,17 @@ function TypescriptVersion() {
     return container;
 }
 
+function SassVersion() {
+    const container = document.createElement("div");
+
+    container.innerHTML = `
+        <label>Sass</label>
+        <div>${sass.info.match(/\d+\.\d+\.\d+/)[0]}</div>
+    `;
+
+    return container;
+}
+
 const td = new TextDecoder();
 
 function getVersionJSON(): Promise<{