@videinfra/static-website-builder 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.5.0] - 2022-04-13
+### Fixed
+- Read files in `data` folder recursively
+
+## [1.4.3] - 2022-03-08
+### Fixed
+- Fixed negative glob paths not working
+
+## [1.4.2] - 2021-08-27
+### Fixed
+- Fixed postcss-ignore-plugin only removing and adding content in unrelated files
+
 ## [1.4.1] - 2021-05-20
 ### Fixed
 - Enabled postcss-ignore-plugin only when cssnano is used

package/lib/camelize-file-name.js

@@ -0,0 +1,21 @@
+/**
+ * Camelize filename
+ *
+ * @param {string} str File name
+ * @returns {string} Camelized name
+ */
+module.exports = function camelizeFileName (str) {
+    return str
+         // Remove extension
+        .replace(/(.+?)\..*$/ig, '$1')
+        // Remove dot
+        .replace(/\./g, '')
+        // Replace non alpha-numeric characters
+        .replace(/[^a-z0-9]/ig, ' ')
+        // Uppercase words
+        .replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+             return index === 0 ? word.toLowerCase() : word.toUpperCase();
+        })
+        // Remove empty spaces
+        .replace(/\s+/g, '');
+}

package/lib/get-file-names.js

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Returns list of filenames in folder recursively
+ *
+ * @param {string} folder Folder path
+ * @param {string} [subFolder=''] Subfolder path
+ * @returns {array} List of filenames, relative to folder
+ */
+module.exports = function getFileNamesSync (folder, subFolder = '') {
+    let fileNames = []
+
+    fs.readdirSync(folder, { withFileTypes: true }).forEach(file => {
+        if (file.isDirectory()) {
+            fileNames = fileNames.concat(getFileNamesSync(path.join(folder, file.name), path.join(subFolder, file.name)));
+        } else {
+            fileNames.push(path.join(subFolder, file.name))
+        }
+    });
+
+    return fileNames;
+}

package/lib/globs-helper.js

@@ -22,7 +22,10 @@ class GlobObject {
             if (this.pathsArr.length) {
                 this.map((basePath) => {
                     return pathsArr.map((subPath) => {
-                        return path.join(basePath, subPath);
+                        // If subpath starts with specia character "!" then prepend that to the begining of full paths
+                        const negativePath = subPath[0] === '!' ? '!' : '';
+                        const subPathNormalized = negativePath ? subPath.substr(1) : subPath;
+                        return negativePath + path.join(basePath, subPathNormalized);
                     });
                 });
             } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {
@@ -51,7 +51,6 @@
     "gulp-twig": "^1.2.0",
     "minimist": "^1.2.5",
     "nano-memoize": "^1.2.1",
-    "postcss-ignore-plugin": "^0.2.1",
     "webpack": "^4.44.2",
     "webpack-stream": "^5.2.1"
   },

package/tasks/data/data-loader-js.js

@@ -1,5 +1,5 @@
-module.exports = function dataLoaderJS (fileName) {
-    // Re-load script each time this function is called
-    delete require.cache[require.resolve(fileName)];
-    return require(fileName);
-};
+module.exports = function dataLoaderJS (fileName) {
+    // Re-load script each time this function is called
+    delete require.cache[require.resolve(fileName)];
+    return require(fileName);
+};

package/tasks/data/get-data.js

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const path = require('path');
 const reduce = require('lodash/reduce');
 const micromatch = require('micromatch'); // gulp dependency
@@ -7,26 +6,9 @@ const merge = require('../../lib/merge');
 const getPaths = require('../../lib/get-path');
 const getConfig = require('../../lib/get-config');
 const logError = require('../../lib/log-error');
+const getFileNamesSync = require('../../lib/get-file-names');
+const camelizeFileName = require('../../lib/camelize-file-name');
 
-/**
- * Camelize filename
- *
- * @param {string} str File name
- * @returns {string} Camelized name
- */
-function camelizeFileName (str) {
-    return str
-         // Remove extension
-        .replace(/\.[^.]+$/ig, '')
-        // Replace non alpha-numeric characters
-        .replace(/[^a-z0-9]/ig, ' ')
-        // Uppercase words
-        .replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
-             return index === 0 ? word.toLowerCase() : word.toUpperCase();
-        })
-        // Remove empty spaces
-        .replace(/\s+/g, '');
-}
 
 module.exports = function getData () {
     const folders = getPaths.getSourcePaths('data');
@@ -36,7 +18,7 @@ module.exports = function getData () {
     const group = getConfig.getTaskConfig('data', 'groupByFileName');
 
     const data = reduce(folders, (data, folder) => {
-        fs.readdirSync(folder).forEach(fileName => {
+        getFileNamesSync(folder).forEach(fileName => {
             // Ignore files matching 'ignore' list
             if (ignore.length && micromatch.isMatch(fileName, ignore)) {
                 return;

package/tasks/stylesheets/preprocess-config.js

@@ -18,17 +18,17 @@ module.exports = function processStylesheetsConfig (config, fullConfig) {
     if (config && config.postcss) {
         config.postcss.plugins = config.postcss.plugins || [];
 
-        if (config.cssnano) {
-            // Add ignore plugin only if there is nano / minification
-            config.postcss.plugins.unshift(require('postcss-ignore-plugin/dist/remove').default);
-        }
-
         // Add autoprefixer
         if (config.autoprefixer && !find(config.postcss.plugins, {'postcssPlugin': 'autoprefixer'})) {
             config.postcss.plugins.push(autoprefixer(config.autoprefixer));
         }
 
-        // Add CSS nano
+        if (config.cssnano) {
+            // Add ignore plugin only if there is nano / minification
+            config.postcss.plugins.unshift(require('../../vendor/postcss-ignore-plugin/dist/remove').default);
+        }
+
+        // // Add CSS nano
         if (config.cssnano && !find(config.postcss.plugins, {'postcssPlugin': 'cssnano'})) {
             config.postcss.plugins.push(cssnano({
                 preset: [config.cssnano.preset, config.cssnano]
@@ -37,7 +37,7 @@ module.exports = function processStylesheetsConfig (config, fullConfig) {
 
         if (config.cssnano) {
             // Add ignore plugin only if there is nano / minification
-            config.postcss.plugins.push(require('postcss-ignore-plugin/dist/add').default);
+            config.postcss.plugins.push(require('../../vendor/postcss-ignore-plugin/dist/add').default);
         }
     }
 

package/tasks/stylesheets/task.js

@@ -1,69 +1,69 @@
-const gulp = require('gulp');
-const gulpif = require('gulp-if');
-const postcss = require('gulp-postcss');
-const sourcemaps = require('gulp-sourcemaps');
-const memoize = require('nano-memoize');
-const cached = require('gulp-cached');
-const dependents = require('gulp-dependents');
-
-const globs = require('./../../lib/globs-helper');
-const getPaths = require('../../lib/get-path');
-const getConfig = require('../../lib/get-config');
-
-const taskStart = require('../../lib/gulp/task-start');
-const taskEnd = require('../../lib/gulp/task-end');
-const taskBeforeDest = require('../../lib/gulp/task-before-dest');
-const taskWatch = require('../../lib/gulp/task-watch');
-
-
-const getGlobPaths = memoize(function () {
-    const sourcePaths = getPaths.getSourcePaths('stylesheets');
-    const extensions = getConfig.getTaskConfig('stylesheets', 'extensions');
-    const ignore = getConfig.getTaskConfig('stylesheets', 'ignore');
-
-    return globs.generate(
-        globs.paths(sourcePaths).filesWithExtensions(extensions), // Files to watch
-        globs.paths(sourcePaths).paths(ignore).ignore(),          // List of files which to ignore
-    );
-});
-
-
-const getEngine = memoize(function () {
-    const engine = getConfig.getTaskConfig('stylesheets', 'engine');
-    return engine ? engine() : (() => {});
-});
-
-
-function stylesheets () {
-    // console.log(getConfig.getTaskConfig('stylesheets', 'dependents'));
-    return gulp.src(getGlobPaths())
-        .pipe(taskStart())
-
-        // Faster incremental builds, skip files which didn't changed or their dependencies didn't changed
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'dependents'), cached('stylesheets')))
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'dependents'), dependents(getConfig.getTaskConfig('dependents'))))
-
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'sourcemaps'), sourcemaps.init(getConfig.getTaskConfig('stylesheets', 'sourcemaps', 'init')))) // Start Sourcemaps
-
-        // Engine
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'engine'), getEngine()))
-
-        // Autoprefixer, postcss
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'postcss'), postcss(getConfig.getTaskConfig('stylesheets', 'postcss', 'plugins'), getConfig.getTaskConfig('stylesheets', 'postcss', 'options'))))
-
-        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'sourcemaps'), sourcemaps.write('.', getConfig.getTaskConfig('stylesheets', 'sourcemaps', 'write'))))
-
-        .pipe(taskBeforeDest())
-        .pipe(gulp.dest(getPaths.getDestPath('stylesheets')))
-
-        // Reload on change
-        .pipe(taskEnd());
-}
-
-function stylesheetsWatch () {
-    return taskWatch(getGlobPaths(), stylesheets);
-}
-
-
-exports.build = stylesheets;
-exports.watch = stylesheetsWatch;
+const gulp = require('gulp');
+const gulpif = require('gulp-if');
+const postcss = require('gulp-postcss');
+const sourcemaps = require('gulp-sourcemaps');
+const memoize = require('nano-memoize');
+const cached = require('gulp-cached');
+const dependents = require('gulp-dependents');
+
+const globs = require('./../../lib/globs-helper');
+const getPaths = require('../../lib/get-path');
+const getConfig = require('../../lib/get-config');
+
+const taskStart = require('../../lib/gulp/task-start');
+const taskEnd = require('../../lib/gulp/task-end');
+const taskBeforeDest = require('../../lib/gulp/task-before-dest');
+const taskWatch = require('../../lib/gulp/task-watch');
+
+
+const getGlobPaths = memoize(function () {
+    const sourcePaths = getPaths.getSourcePaths('stylesheets');
+    const extensions = getConfig.getTaskConfig('stylesheets', 'extensions');
+    const ignore = getConfig.getTaskConfig('stylesheets', 'ignore');
+
+    return globs.generate(
+        globs.paths(sourcePaths).filesWithExtensions(extensions), // Files to watch
+        globs.paths(sourcePaths).paths(ignore).ignore(),          // List of files which to ignore
+    );
+});
+
+
+const getEngine = memoize(function () {
+    const engine = getConfig.getTaskConfig('stylesheets', 'engine');
+    return engine ? engine() : (() => {});
+});
+
+
+function stylesheets () {
+    // console.log(getConfig.getTaskConfig('stylesheets', 'dependents'));
+    return gulp.src(getGlobPaths())
+        .pipe(taskStart())
+
+        // Faster incremental builds, skip files which didn't changed or their dependencies didn't changed
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'dependents'), cached('stylesheets')))
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'dependents'), dependents(getConfig.getTaskConfig('dependents'))))
+
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'sourcemaps'), sourcemaps.init(getConfig.getTaskConfig('stylesheets', 'sourcemaps', 'init')))) // Start Sourcemaps
+
+        // Engine
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'engine'), getEngine()))
+
+        // Autoprefixer, postcss
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'postcss'), postcss(getConfig.getTaskConfig('stylesheets', 'postcss', 'plugins'), getConfig.getTaskConfig('stylesheets', 'postcss', 'options'))))
+
+        .pipe(gulpif(!!getConfig.getTaskConfig('stylesheets', 'sourcemaps'), sourcemaps.write('.', getConfig.getTaskConfig('stylesheets', 'sourcemaps', 'write'))))
+
+        .pipe(taskBeforeDest())
+        .pipe(gulp.dest(getPaths.getDestPath('stylesheets')))
+
+        // Reload on change
+        .pipe(taskEnd());
+}
+
+function stylesheetsWatch () {
+    return taskWatch(getGlobPaths(), stylesheets);
+}
+
+
+exports.build = stylesheets;
+exports.watch = stylesheetsWatch;

package/tests/camelize-file-name.test.js

@@ -0,0 +1,11 @@
+const camelizeFileName = require('../lib/camelize-file-name');
+
+test('Camelize file name', () => {
+    expect(camelizeFileName('test-file-name')).toBe('testFileName');
+    expect(camelizeFileName('testFileName')).toBe('testFileName');
+    expect(camelizeFileName('testFile_name')).toBe('testFileName');
+    expect(camelizeFileName('test-file-name.jpg')).toBe('testFileName');
+    expect(camelizeFileName('testFileName.jpg')).toBe('testFileName');
+    expect(camelizeFileName('test-āēūīķļ-name.jpg.png')).toBe('testName');
+    expect(camelizeFileName('.gitignore')).toBe('gitignore');
+});

package/tests/glob-helper.test.js

@@ -84,6 +84,11 @@ test('glob map', () => {
     expect(output2).toEqual(['/a/some/folder/b', '/a/other/folder/b']);
 });
 
+test('glob negative', () => {
+    const output = glob.paths('/some/folder').paths('!/assets/**/*.*').generate();
+    expect(output).toEqual(['!/some/folder/assets/**/*.*']);
+});
+
 test('glob generate', () => {
     const output = glob.generate(
         glob.paths(['/a', '/b']).allFiles(),

package/vendor/postcss-ignore-plugin/README.md

@@ -0,0 +1,124 @@
+# postcss-ignore-plugin
+
+![CI tests](https://github.com/anikethsaha/postcss-ignore-plugin/workflows/CI%20tests/badge.svg?branch=master&event=push)
+![CI Integration tests](https://github.com/anikethsaha/postcss-ignore-plugin/workflows/CI%20Integration%20tests/badge.svg?branch=master&event=push)
+
+Ignore postcss plugins operations in lines using comments
+
+## Getting started
+
+`$ yarn add postcss-ignore-plugin -D`
+
+and add this it in your `postcss` config
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-ignore-plugin/remove'), // Important to keep this at the top of the plugins
+    require('cssnano'),
+    require('autoprefixer'),
+    require('stylelint'),
+    require('postcss-ignore-plugin/add'), // Important to keep it at the end
+  ],
+};
+```
+
+Now use the following comments whenever you want to ignore any operation for other plugins
+
+- for ignoring a particular line or declaration (css properties) inside of css rule
+
+  ```css
+  /* postcss-ignore-line */
+  ```
+
+  > Dont use `/* postcss-ignore-line */` for css rules
+
+- for ignoring a whole rule
+
+  ```css
+  /* postcss-ignore */
+  ```
+
+## How it works
+
+Currently we support only for declaration statement, that mean you can add this comment over CSS declaration line not over the selector list in Rule declaration
+
+`example`
+
+```css
+.classname {
+  margin: auto;
+  /* postcss-ignore-line */
+  color: red;
+}
+
+/* postcss-ignore */
+.classname {
+  margin: auto;
+  color: red;
+}
+
+@media screen and (min-width: 480px) {
+  ul {
+    /* postcss-ignore-line */
+    list-style: none;
+  }
+
+  /* postcss-ignore */
+  p {
+    font-size: 10px;
+  }
+}
+```
+
+It simple remove the next line before running the other plugins and then add them at the end.
+
+## Rules
+
+Use [`stylelint-postcss-ignore`](https://github.com/anikethsaha/stylelint-postcss-ignore) for rules regarding this plugin 's better use
+
+## Tests
+
+this plugins are tested with
+
+- cssnano
+- Autoprefixer
+- postcss-preset-env
+- stylelint
+- some custom plugins meant to fail the op
+- Indivial tests for each plugins
+
+> There are not many test cases. More will be added soon
+
+## FAQ
+
+- **Can we ignore a whole css `atrules` (like media queries) ?**
+
+  No, you need to use `/* postcss-ignore */` before each rule inside the `atrules`
+
+- **will those ignore rules/properties (declarations) will come back to there original position after all operations?**
+
+  No, both. rules and atrules will append at the end. declarations (rules's properties) will append at the rule itself. and if you have used `/* postcss-ignore */` for a rule inside of atrules, it will get appended for that atrule at the end
+
+- **Does it effect the performance like the build time?**
+
+  Yes _(sometimes for code with many ignore comments )_, but not at a huge level. It slightly decreases the performance as there are 2-3 nested looks so you can notices some issue with huge code with many ignore comments
+
+## Contributing Guidelines
+
+Simply click on this
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/anikethsaha/postcss-ignore-plugin)
+
+and starting working in it !
+
+**OR**
+
+- clone the repo
+- Install the dependenices `yarn install`
+- Build the code `yarn build`
+- run the tests before working `yarn test:only` and `yarn test:integrations`
+- start working
+
+If you add a new feature or did some breaking change , update [`stylelint-postcss-ignore`](https://github.com/anikethsaha/stylelint-postcss-ignore) for consistency

package/vendor/postcss-ignore-plugin/dist/add.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = require("postcss");
+
+var _default = (0, _postcss.plugin)('postcss-ignore-plugin-add', () => {
+  return (root, result) => {
+    if (result.messages.type !== 'postcss-ignore-plugin') {
+      return;
+    }
+
+    const msgs = result.messages;
+    let declToAdd = [],
+        rulesToAdd = [];
+    msgs.forEach(msg => {
+      if (msg['postcss-ignore-plugin'] !== undefined) {
+        msg['postcss-ignore-plugin'].ignoredLineData.forEach(ignoreData => {
+          if (root.source.input.file === ignoreData.fileName) {
+            declToAdd.push(ignoreData);
+          }
+        });
+        msg['postcss-ignore-plugin'].ignoreRulesData.forEach(ignoredRule => {
+          if (root.source.input.file === ignoredRule.fileName) {
+            rulesToAdd.push(ignoredRule);
+          }
+        });
+      }
+    }); // add decl to  atrules
+
+    root.walkAtRules(atRules => {
+      declToAdd.forEach(decl => {
+        if (decl.atRule !== undefined && atRules.name === decl.atRule.name && atRules.params === decl.atRule.params) {
+          atRules.walkRules(rules => {
+            if (rules.selector === decl.selector) {
+              rules.append({
+                prop: decl.prop,
+                value: decl.value
+              });
+            }
+          });
+        }
+      });
+    }); // add decl only those with no atrules
+
+    root.walkRules(rules => {
+      declToAdd.forEach(decl => {
+        if (rules.selector === decl.selector && decl.atRule === undefined) {
+          rules.append({
+            prop: decl.prop,
+            value: decl.value
+          });
+        }
+      });
+    }); // add rules
+
+    rulesToAdd = rulesToAdd.filter(rule => {
+      if (rule.parent.type !== 'atrule') {
+        root.append(rule.rule);
+        return false;
+      }
+
+      return true;
+    }); // add rules to artules
+
+    root.walkAtRules(atrule => {
+      rulesToAdd = rulesToAdd.filter(rule => {
+        if (atrule.params === rule.parent.params) {
+          atrule.append(rule.rule);
+          return false;
+        }
+
+        return true;
+      });
+    });
+  };
+});
+
+exports.default = _default;

package/vendor/postcss-ignore-plugin/dist/remove.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = require("postcss");
+
+var _default = (0, _postcss.plugin)('postcss-ignore-plugin-remove', () => {
+  let ignoredLineData = [];
+  let commentsIgnoredRule = [];
+  let ignoreRulesData = []; // Work with options here
+
+  return (root, result) => {
+    // Transform CSS AST here
+    root.walkRules(rule => {
+      // Transform each rule here
+      rule.walkComments(comment => {
+        if (comment.text === 'postcss-ignore-line') {
+          let commentData = {
+            fileName: comment.source.input.file,
+            commentedLine: comment.source.start.line,
+            ignoredLine: comment.source.start.line + 1
+          };
+          comment.remove();
+          ignoredLineData.push(commentData);
+        }
+      });
+    });
+    root.walkComments(comment => {
+      if (comment.text === 'postcss-ignore') {
+        commentsIgnoredRule.push({
+          fileName: comment.source.input.file,
+          commentLine: comment.source.start,
+          ruleIgnoreLineNo: comment.source.start.line + 1
+        });
+
+        comment.remove();
+      }
+    });
+    root.walkRules(rule => {
+      rule.walkDecls(decl => {
+        const declLine = decl.source.start.line;
+        ignoredLineData.forEach(ignoreData => {
+          if (decl.source.input.file === ignoreData.fileName && ignoreData.ignoredLine === declLine) {
+            ignoreData.selector = decl.parent.selector;
+            ignoreData.prop = decl.prop;
+            ignoreData.value = decl.value;
+
+            if (decl.parent.parent.type === 'atrule') {
+              ignoreData.atRule = {
+                name: decl.parent.parent.name,
+                params: decl.parent.parent.params
+              };
+            }
+
+            decl.remove();
+          }
+        });
+      });
+      commentsIgnoredRule.forEach(data => {
+        if (rule.source.input.file === data.fileName && rule.source.start.line === data.ruleIgnoreLineNo) {
+          ignoreRulesData.push({
+            rule,
+            parent: rule.parent,
+            fileName: data.fileName
+          });
+          rule.remove();
+        }
+      });
+    });
+    result.messages.type = 'postcss-ignore-plugin';
+    result.messages.push({
+      'postcss-ignore-plugin': {
+        ignoredLineData,
+        ignoreRulesData
+      }
+    });
+  };
+});
+
+exports.default = _default;