feat: build sass files using parcel instead of grunt

added sass watch command for auto building sass on file changes, cleaned up IE7 fallback css
winter0019 · May 23, 2022 · 5cf76c5 · 5cf76c5
1 parent fb0592d
commit 5cf76c5
Show file tree

Hide file tree

Showing 15 changed files with 165 additions and 462 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,6 @@ node_modules
 .parcel-cache
 .sass-cache
 .eslintcache
-stylesheets/*.css.map
 /dist
 .DS_Store
 config/local.json
@@ -13,9 +12,6 @@ release/
 *.sublime*
 sql/
 
-# generated files
-stylesheets/*.css
-
 # React / TypeScript
 ts/**/*.js
 ts/protobuf/*.d.ts

diff --git a/.prettierignore b/.prettierignore
@@ -11,7 +11,6 @@ test/ts/**/*.js
 ts/**/*.js
 ts/protobuf/*.d.ts
 ts/protobuf/*.js
-stylesheets/manifest.css
 ts/util/lint/exceptions.json
 ts/test/automation/notes
 

diff --git a/.sassrc.json b/.sassrc.json
@@ -0,0 +1,9 @@
+{
+  "includePaths": [
+    "node_modules/sanitize.css",
+    "node_modules/emoji-mart/css",
+    "node_modules/react-h5-audio-player/lib",
+    "node_modules/react-contexify/dist",
+    "node_modules/react-toastify/dist"
+  ]
+}
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,26 +1,8 @@
-const importOnce = require('node-sass-import-once');
-const sass = require('node-sass');
-
 /* eslint-disable more/no-then, no-console  */
 
 module.exports = grunt => {
-  grunt.loadNpmTasks('grunt-sass');
-
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    sass: {
-      options: {
-        implementation: sass,
-        sourceMap: true,
-        importer: importOnce,
-      },
-
-      dist: {
-        files: {
-          'stylesheets/manifest.css': 'stylesheets/manifest.scss',
-        },
-      },
-    },
     exec: {
       transpile: {
         cmd: 'yarn transpile',
@@ -63,11 +45,5 @@ module.exports = grunt => {
   });
 
   grunt.registerTask('date', ['gitinfo']);
-  grunt.registerTask('default', [
-    'exec:build-protobuf',
-    'sass',
-    'exec:transpile',
-    'date',
-    'getCommitHash',
-  ]);
+  grunt.registerTask('default', ['exec:build-protobuf', 'exec:transpile', 'date', 'getCommitHash']);
 };
diff --git a/about.html b/about.html
@@ -14,7 +14,7 @@
             script-src 'self' 'unsafe-inline';
             style-src 'self' 'unsafe-inline';"
     />
-    <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+    <link href="dist/manifest.css" rel="stylesheet" type="text/css" />
     <style>
       body {
         text-align: center;

diff --git a/background.html b/background.html
@@ -25,7 +25,7 @@
     />
     <title>Session</title>
     <link href="images/sesion/session_icon_128.png" rel="shortcut icon" />
-    <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+    <link href="dist/manifest.css" rel="stylesheet" type="text/css" />
   </head>
 
   <body id="body">

diff --git a/debug_log.html b/debug_log.html
@@ -14,7 +14,7 @@
             script-src 'self' 'unsafe-inline';
             style-src 'self' 'unsafe-inline';"
     />
-    <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+    <link href="dist/manifest.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -14,10 +14,16 @@
   },
   "main": "ts/mains/main_node.js",
   "targets": {
+    "sass": {
+      "source": "stylesheets/manifest.scss",
+      "distDir": "dist",
+      "optimize": true,
+      "sourceMap": true
+    },
     "util-worker": {
       "source": "ts/webworker/workers/util.worker.ts",
       "distDir": "./ts/webworker/workers/",
-      "optimize" : true,
+      "optimize": true,
       "sourceMap": false,
       "context": "web-worker"
     }
@@ -28,7 +34,7 @@
     "grunt": "yarn clean-transpile  && grunt",
     "generate": "yarn grunt --force",
     "build-release": "run-script-os",
-    "build-release-non-linux": "yarn generate && cross-env SIGNAL_ENV=production electron-builder --config.extraMetadata.environment=production --publish=never --config.directories.output=release",
+    "build-release-non-linux": "yarn sass && yarn generate && cross-env SIGNAL_ENV=production electron-builder --config.extraMetadata.environment=production --publish=never --config.directories.output=release",
     "build-release:win32": "yarn build-release-non-linux",
     "build-release:macos": "yarn build-release-non-linux",
     "build-release:linux": "yarn sedtoDeb; yarn build-release-non-linux && yarn sedtoAppImage && yarn build-release-non-linux && yarn sedtoDeb",
@@ -50,6 +56,8 @@
     "ready": "yarn grunt && yarn lint-full && yarn test",
     "sedtoAppImage": "sed -i 's/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/\"target\": \"AppImage\"/g' package.json",
     "sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json",
+    "sass": "rimraf 'dist' && parcel build --target sass --no-autoinstall",
+    "sass:watch": "parcel watch --target sass",
     "parcel-util-worker": "rimraf ts/webworker/workers/util.worker.js && parcel build --target util-worker --no-autoinstall --no-cache"
   },
   "dependencies": {
@@ -91,7 +99,6 @@
     "mustache": "2.3.0",
     "nan": "2.14.2",
     "node-fetch": "2.3.0",
-    "node-sass": "6.0.1",
     "os-locale": "5.0.0",
     "p-retry": "^4.2.0",
     "pify": "3.0.0",
@@ -124,6 +131,7 @@
     "uuid": "3.3.2"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "2.4.1",
     "@playwright/test": "1.16.3",
     "@types/backbone": "1.4.2",
     "@types/better-sqlite3": "7.4.0",
@@ -190,15 +198,13 @@
     "grunt-contrib-watch": "1.0.0",
     "grunt-exec": "3.0.0",
     "grunt-gitinfo": "0.1.7",
-    "grunt-sass": "3.0.1",
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
     "mocha": "4.1.0",
     "mocha-testcheck": "1.0.0-rc.0",
     "node-bindings-loader": "^1.5.0",
     "node-gyp": "3.8.0",
     "node-loader": "^2.0.0",
-    "node-sass-import-once": "1.2.0",
     "parcel": "^2.4.1",
     "patch-package": "^6.4.7",
     "path-browserify": "^1.0.1",
@@ -268,7 +274,11 @@
         "StartupWMClass": "Session"
       },
       "asarUnpack": "node_modules/spellchecker/vendor/hunspell_dictionaries",
-      "target": ["deb", "rpm", "freebsd"],
+      "target": [
+        "deb",
+        "rpm",
+        "freebsd"
+      ],
       "icon": "build/icon-linux.icns"
     },
     "asarUnpack": [
@@ -299,7 +309,7 @@
       "js/**",
       "ts/**/*.js",
       "ts/*.js",
-      "stylesheets/*.css",
+      "dist/**",
       "!js/register.js",
       "js/views/standalone_registration_view.js",
       "preload.js",
@@ -349,4 +359,4 @@
       "!dev-app-update.yml"
     ]
   }
-}
+}
diff --git a/password.html b/password.html
@@ -14,7 +14,7 @@
             script-src 'self' 'unsafe-inline';
             style-src 'self' 'unsafe-inline';"
     />
-    <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+    <link href="dist/manifest.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <div id="root">

diff --git a/stylesheets/_debugLog.scss b/stylesheets/_debugLog.scss
@@ -35,8 +35,9 @@
       max-width: $group-max-width;
     }
 
-    $open-pad-x: ($open-width - $button-height - 2) / 2;
-    $open-pad-y: ($open-height - $button-height - 2) / 2;
+    $open-pad-x: calc(($open-width - $button-height - 2px) / 2);
+    $open-pad-y: calc(($open-height - $button-height - 2px) / 2);
+
     .open {
       float: left;
       display: inline-block;

diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
@@ -3,9 +3,6 @@ span.emoji {
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: baseline;
-  *vertical-align: auto;
-  *zoom: 1;
-  *display: inline;
   width: 1em;
   height: 1em;
   background-size: 1em;
@@ -24,7 +21,6 @@ span.emoji-sizer {
 span.emoji-outer {
   display: -moz-inline-box;
   display: inline-block;
-  *display: inline;
   height: 1em;
   width: 1em;
 }
@@ -36,8 +32,6 @@ span.emoji-inner {
   width: 100%;
   height: 100%;
   vertical-align: baseline;
-  *vertical-align: auto;
-  *zoom: 1;
 }
 
 img.emoji {

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
@@ -202,7 +202,7 @@
 
     textarea {
       font-family: $session-font-default;
-      min-height: $composition-container-height / 3;
+      min-height: calc($composition-container-height / 3);
       max-height: 3 * $composition-container-height;
       margin-right: $session-margin-md;
       color: var(--color-text);

diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
@@ -77,4 +77,4 @@ $border-radius: 5px;
 $message-container-border-radius: 16px;
 
 $font-size: 14px;
-$font-size-small: (13/14) + em;
+$font-size-small: calc(13/14) + em;
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
@@ -1,12 +1,12 @@
 // Modules
-@import 'node_modules/emoji-mart/css/emoji-mart.css';
-@import 'node_modules/react-h5-audio-player/lib/styles.css';
-@import 'node_modules/react-contexify/dist/ReactContexify.min.css';
-@import 'node_modules/react-toastify/dist/ReactToastify.css';
-
-@import 'node_modules/sanitize.css/sanitize.css';
-@import 'node_modules/sanitize.css/forms.css';
-@import 'node_modules/sanitize.css/typography.css';
+@import '../node_modules/emoji-mart/css/emoji-mart.css';
+@import '../node_modules/react-h5-audio-player/lib/styles.css';
+@import '../node_modules/react-contexify/dist/ReactContexify.min.css';
+@import '../node_modules/react-toastify/dist/ReactToastify.css';
+
+@import '../node_modules/sanitize.css/sanitize.css';
+@import '../node_modules/sanitize.css/forms.css';
+@import '../node_modules/sanitize.css/typography.css';
 
 // Global Settings, Variables, and Mixins
 @import 'session_constants';