@videinfra/static-website-builder 1.15.1 → 1.15.2

package/init/test/src/html/data/global.js

@@ -6,4 +6,5 @@
  */
 module.exports = {
     'world': 'World',
+    'hostFromGlobalJS': process.env.host,
 };

package/init/test/src/html/env.twig

@@ -3,4 +3,5 @@
 
 {% block body %}
     <p>HOST: {{ host }}</p>
+    <p>HOST FROM GLOBAL JS: {{ hostFromGlobalJS }}</p>
 {% endblock %}

package/init/test/src/stylesheets/env-test.scss

@@ -1,3 +1,3 @@
 .env-test:before {
-    content: $env-host;
+    content: map-get($env, host);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {

package/tasks/data/get-data.js

@@ -16,6 +16,11 @@ function getData () {
     const loaders = getConfig.getTaskConfig('data', 'loaders');
     const ignore = getConfig.getTaskConfig('data', 'ignore');
     const group = getConfig.getTaskConfig('data', 'groupByFileName');
+    const envData = getEnvData();
+
+    // Merge into process.env before loading data because these may be used
+    // in data
+    merge(process.env, envData.env);
 
     const data = reduce(folders, (data, folder) => {
         getFileNamesSync(folder).forEach(fileName => {
@@ -62,7 +67,7 @@ function getData () {
     }, {});
 
     // Merge with env variables
-    return merge(data, getEnvData().twig);
+    return merge(data, envData.twig);
 }
 
 

package/tasks/env/get-env.js

@@ -14,12 +14,12 @@ function escapeJSVariable (value) {
 function getEnvData () {
     const envVariables = {};
     const twigVariables = {};
-    const scssVariables = {};
+    const scssVariables = { env: {} };
     const jsVariables = {};
+    const envOutVariables = {};
 
     const envFiles = paths.getPathConfig().env.map((path) => paths.getProjectPath(path));
 
-
     dotenv.config({
         // dotenv file order is reversed, values in first file overwrite all other
         // file values
@@ -36,8 +36,9 @@ function getEnvData () {
             const camelCase = map[key];
             const kebabCase = map[key].replace(/([a-z])([A-Z])/g, '$1-$2').replace(/_([a-z])/ig, '-$1').toLowerCase();
             twigVariables[camelCase] = value;
+            envOutVariables[camelCase] = value;
             jsVariables[`process.env.${ camelCase }`] = escapeJSVariable(value);
-            scssVariables[`env-${ kebabCase }`] = value;
+            scssVariables.env[kebabCase] = value;
         }
     });
 
@@ -45,6 +46,7 @@ function getEnvData () {
         twig: twigVariables,
         sass: scssVariables,
         js: jsVariables,
+        env: envOutVariables,
     }
 }
 

package/tests/build/build.test.js

@@ -109,6 +109,12 @@ test('.env and .env.local files loaded', () => {
     ]);
 });
 
+test('process.env available in html/data', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'env.html'), {'encoding': 'utf8'}).then((html) => {
+        expect(html.indexOf('<p>HOST FROM GLOBAL JS: https://test-local.tld</p>')).not.toBe(-1);
+    });
+});
+
 test('icons generated', () => {
     return fsPromises.readFile(path.resolve(publicPath, 'assets/images/icons.svg'), {'encoding': 'utf8'}).then((svg) => {
         expect(svg.indexOf('<symbol id="example-arrow">')).not.toBe(-1);

package/tests/sass-stringify.test.js

@@ -0,0 +1,24 @@
+const sassStingify = require('../vendor/gulp-sass/sass-stringify');
+
+test('SASS stringify boolean', () => {
+    expect(sassStingify(true)).toEqual('true');
+    expect(sassStingify(false)).toEqual('false');
+});
+
+test('SASS stringify number', () => {
+    expect(sassStingify(0)).toEqual('0');
+    expect(sassStingify(-123)).toEqual('-123');
+    expect(sassStingify(123.456)).toEqual('123.456');
+});
+
+test('SASS stringify falsy', () => {
+    expect(sassStingify(null)).toEqual('false');
+    expect(sassStingify(undefined)).toEqual('false');
+});
+
+test('SASS stringify object', () => {
+    const obj1 = {env: {key1: 'value1', key2: null, key3: undefined, arr: ['a', 123, true] }};
+    const out1 = "$env: (key1: 'value1', key2: false, key3: false, arr: ('a',123,true));";
+
+    expect(sassStingify(obj1)).toEqual(out1);
+});

package/vendor/gulp-sass/index.js

@@ -9,6 +9,7 @@ const replaceExtension = require('replace-ext');
 const stripAnsi = require('strip-ansi');
 const clonedeep = require('lodash.clonedeep');
 const applySourceMap = require('vinyl-sourcemaps-apply');
+const sassStingify = require('./sass-stringify')
 
 const PLUGIN_NAME = 'gulp-sass';
 
@@ -129,19 +130,7 @@ const gulpSass = (options, sync) => {
 
     // Stringiyfy variables
     if (options.data) {
-        const scssVariables = [];
-
-        if (typeof options.data === 'string') {
-            // Assume it's valid SCSS
-            scssVariables.push(options.data);
-        } else {
-            for (let key in options.data) {
-                const value = escapeSCSSVariable(options.data[key]);
-                scssVariables.push(`$${key}: ${value};`);
-            }
-        }
-
-        opts.data = scssVariables.join('') + opts.data;
+        opts.data = sassStingify(options.data) + opts.data;
     }
 
     // We set the file path here so that libsass can correctly resolve import paths

package/vendor/gulp-sass/sass-stringify.js

@@ -0,0 +1,32 @@
+module.exports = function sassStingify (data, isDeep = false) {
+    if (data === null || data === undefined) {
+        return 'false';
+    } else if (data !== '' && (data === true || data === false || !isNaN(data))) {
+        // Convert to simple value
+        return String(data);
+    } else if (Array.isArray(data)) {
+        const out = data.map((item) => sassStingify(item, true));
+        return `(${ out })`;
+    } else if (data && typeof data === 'object') {
+        const out = [];
+        for (let key in data) {
+            out.push(`${key}: ${sassStingify(data[key], true)}`);
+        }
+
+        if (out.length) {
+            if (isDeep) {
+                return `(${ out.join(', ') })`;
+            } else {
+                return `$${ out.join(';$') };`;
+            }
+        } else {
+            return '';
+        }
+    } else {
+        // Convert to string
+        return "'" + data.toString()
+            .replace(/\\/g, '\\\\')
+            .replace(/'/g, '\\\'')
+            .replace(/\n/g, '\\n') + "'";
+    }
+};