Added the ability to generate both compressed and expanded css

scripts/render-scss.js will now create dist/css/styles.css and dist/css/styles.min.css with it defaulting to the minified css when linking the stylesheet.
ericsizemore · Mar 11, 2024 · bb858fe · bb858fe
1 parent a228547
commit bb858fe
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 36 deletions.
diff --git a/dist/401.html b/dist/401.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>404 Error - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body>

diff --git a/dist/404.html b/dist/404.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>404 Error - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body>

diff --git a/dist/500.html b/dist/500.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>404 Error - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body>

diff --git a/dist/charts.html b/dist/charts.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Charts - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="sb-nav-fixed">

diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/index.html b/dist/index.html
@@ -8,7 +8,7 @@
         <meta name="author" content="" />
         <title>Dashboard - SB Admin</title>
         <link href="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.0/dist/style.min.css" rel="stylesheet" />
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="sb-nav-fixed">

diff --git a/dist/layout-sidenav-light.html b/dist/layout-sidenav-light.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Sidenav Light - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="sb-nav-fixed">

diff --git a/dist/layout-static.html b/dist/layout-static.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Static Navigation - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body>

diff --git a/dist/login.html b/dist/login.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Login - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="bg-primary">

diff --git a/dist/password.html b/dist/password.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Password Reset - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="bg-primary">

diff --git a/dist/register.html b/dist/register.html
@@ -7,7 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Register - SB Admin</title>
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="bg-primary">

diff --git a/dist/tables.html b/dist/tables.html
@@ -8,7 +8,7 @@
         <meta name="author" content="" />
         <title>Tables - SB Admin</title>
         <link href="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.0/dist/style.min.css" rel="stylesheet" />
-        <link href="css/styles.css" rel="stylesheet" />
+        <link href="css/styles.min.css" rel="stylesheet" />
         <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
     </head>
     <body class="sb-nav-fixed">

diff --git a/package-lock.json b/package-lock.json
diff --git a/scripts/build-scss.js b/scripts/build-scss.js
@@ -3,3 +3,4 @@
 const renderSCSS = require('./render-scss');
 
 renderSCSS();
+renderSCSS(true);
diff --git a/scripts/render-scss.js b/scripts/render-scss.js
@@ -1,19 +1,22 @@
 'use strict';
-const autoprefixer = require('autoprefixer')
+const autoprefixer = require('autoprefixer');
 const fs = require('fs');
 const packageJSON = require('../package.json');
 const upath = require('upath');
-const postcss = require('postcss')
+const postcss = require('postcss');
 const sass = require('sass');
 const sh = require('shelljs');
 
 const stylesPath = '../src/scss/styles.scss';
 const destPath = upath.resolve(upath.dirname(__filename), '../dist/css/styles.css');
+const destPathMin = upath.resolve(upath.dirname(__filename), '../dist/css/styles.min.css');
 const loadPaths = upath.resolve(upath.dirname(__filename), '../node_modules');
 
-module.exports = function renderSCSS() {
+module.exports = function renderSCSS(compress) {
+    const sassStyle = compress === true ? 'compressed' : 'expanded';
 
     const results = sass.compileString(entryPoint, {
+        style: sassStyle,
         loadPaths: [
             loadPaths
         ],
@@ -29,9 +32,8 @@ module.exports = function renderSCSS() {
         result.warnings().forEach(warn => {
             console.warn(warn.toString())
         })
-        fs.writeFileSync(destPath, result.css.toString());
-    })
-
+        fs.writeFileSync(compress === true ? destPathMin : destPath, result.css.toString(), () => true);
+    });
 };
 
 const entryPoint = `/*!

diff --git a/src/pug/layouts/includes/head/css.pug b/src/pug/layouts/includes/head/css.pug
@@ -1,2 +1,3 @@
 block css
-    link(href='css/styles.css', rel='stylesheet')
+    //- link(href='css/styles.css', rel='stylesheet')
+    link(href='css/styles.min.css', rel='stylesheet')