✨ Load debug CSS in local dev only

frontend/gulpfile.js

@@ -1,6 +1,6 @@
 import fs from "fs";
 import l from "lodash";
-import path from "path"
+import path from "path";
 
 import gulp from "gulp";
 import gulpConcat from "gulp-concat";
@@ -9,8 +9,8 @@ import gulpMustache from "gulp-mustache";
 import gulpPostcss from "gulp-postcss";
 import gulpRename from "gulp-rename";
 
-import * as sass from 'sass';
-import gsass from 'gulp-sass';
+import * as sass from "sass";
+import gsass from "gulp-sass";
 const gulpSass = gsass(sass);
 
 import svgSprite from "gulp-svg-sprite";
@@ -204,6 +204,7 @@ function templatePipeline(options) {
       manifest: manifest,
       translations: JSON.stringify(locales),
       themes: JSON.stringify(themes),
+      isDebug: process.env.NODE_ENV !== "production",
     });
 
     return gulp.src(input).pipe(tmpl).pipe(gulpRename(name)).pipe(gulp.dest(output)).pipe(touch());
@@ -238,7 +239,7 @@ gulp.task("scss:modules", function () {
             const dir = path.dirname(filename);
             const name = path.basename(filename, ".css");
             const parts = dir.split("/");
-            const rootIdx = parts.findIndex(s => s === ROOT_NAME);
+            const rootIdx = parts.findIndex((s) => s === ROOT_NAME);
             return parts.slice(rootIdx + 1).join("_") + "_" + name + "__" + selector;
           },
         }),
@@ -249,13 +250,15 @@ gulp.task("scss:modules", function () {
 });
 
 gulp.task("scss:main", function () {
+  const sources = [`${paths.resources}styles/main-default.scss`, `${paths.resources}styles/debug.scss`];
+
   return gulp
-    .src(paths.resources + "styles/main-default.scss")
-    .pipe(gulpSass.sync({
-      includePaths: [
-        "./node_modules/animate.css"
-      ]
-    }))
+    .src(sources)
+    .pipe(
+      gulpSass.sync({
+        includePaths: ["./node_modules/animate.css"],
+      }),
+    )
     .pipe(gulpPostcss([autoprefixer]))
     .pipe(gulp.dest(paths.output + "css/"));
 });

frontend/resources/styles/common/base.scss

@@ -17,9 +17,6 @@ body {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-
-  background-color: red; //debugger colors
-  color: yellow; //debugger colors
 }
 
 #app {

frontend/resources/styles/debug.scss

@@ -0,0 +1,15 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// NOTE: This CSS only gets included when the NODE_ENV env var
+//       is *not* set to `production`.
+//       It is useful to have some styles that are useful in local dev, like
+//       debugging.
+
+body {
+  background-color: red;
+  color: yellow;
+}

frontend/resources/templates/index.mustache

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Penpot - Design Freedom for Teams</title>
+
     <meta name="description" content="The open-source solution for design and prototyping.">
     <meta property="og:locale" content="en_US">
     <meta property="og:title" content="Penpot | Design Freedom for Teams">
@@ -17,6 +18,9 @@
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
+    {{#isDebug}}
+    <link href="css/debug.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
+    {{/isDebug}}
 
     <link rel="icon" href="images/favicon.png" />