@videinfra/static-website-builder 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.8.0] - 2023-08-10
+### Updated
+- Dependencies
+### Removed
+- postcss-ignore-plugin
+### Added
+- CSS tests
+
 ## [1.7.0] - 2023-05-25
 ### Updated
 - Depedencies

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

@@ -0,0 +1,4 @@
+:root {
+    --yes: ;
+    --no: initial;
+}

package/init/test/src/stylesheets/nested-calc-test.scss

@@ -0,0 +1,3 @@
+body {
+    padding-top: calc(10vw + calc(10vh * 1.5));
+}

package/lib/get-path.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 const getConfig = require('./get-config');
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {
@@ -27,13 +27,14 @@
   "dependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
-    "autoprefixer": "^9.8.8",
+    "@csstools/postcss-nested-calc": "^3.0.0",
+    "autoprefixer": "^10.4.14",
     "babel-loader": "^8.3.0",
     "browser-sync": "^2.29.3",
     "chalk": "4.0.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
+    "cssnano": "^6.0.1",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-cached": "^1.1.1",
@@ -43,7 +44,7 @@
     "gulp-if": "^3.0.0",
     "gulp-ignore": "^3.0.0",
     "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.1",
     "gulp-sass": "^5.1.0",
     "gulp-sizereport": "^1.2.1",
     "gulp-sourcemaps": "^3.0.0",
@@ -51,13 +52,13 @@
     "gulp-svgstore": "^9.0.0",
     "gulp-twig": "^1.2.0",
     "minimist": "^1.2.8",
-    "nano-memoize": "1.3.0",
-    "node-sass": "^7.0.1",
-    "sass": "^1.62.1",
+    "nano-memoize": "3.0.13",
+    "node-sass": "^7.0.3",
+    "sass": "^1.65.1",
     "webpack": "^4.46.0",
     "webpack-stream": "^5.2.1"
   },
   "devDependencies": {
-    "jest": "^27.5.1"
+    "jest": "^29.6.2"
   }
 }

package/plugins/example/task.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const globs = require('@videinfra/example-website-builder/lib/globs-helper');
 const getConfig = require('@videinfra/example-website-builder/lib/get-config');

package/tasks/fonts/task.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const globs = require('./../../lib/globs-helper');
 const getPaths = require('./../../lib/get-path');

package/tasks/html/task.js

@@ -2,7 +2,7 @@ const gulp = require('gulp');
 const data = require('gulp-data');
 const gulpif = require('gulp-if');
 const htmlmin = require('gulp-htmlmin')
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 const cached = require('gulp-cached');
 const dependents = require('gulp-dependents');
 const ignore = require('gulp-ignore');

package/tasks/icons/task.js

@@ -2,7 +2,7 @@ const gulp = require('gulp');
 const gulpif = require('gulp-if');
 const svgstore = require('gulp-svgstore');
 const svgmin = require('gulp-svgmin');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const globs = require('./../../lib/globs-helper');
 const getPaths = require('./../../lib/get-path');

package/tasks/images/task.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const globs = require('./../../lib/globs-helper');
 const getPaths = require('./../../lib/get-path');

package/tasks/javascripts/task.js

@@ -1,7 +1,7 @@
 const gulp = require('gulp');
 const webpack = require('webpack');
 const gulpWebpack = require('webpack-stream');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const merge = require('../../lib/merge');
 const globs = require('./../../lib/globs-helper');

package/tasks/static/task.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const memoize = require('nano-memoize');
+const memoize = require('nano-memoize').default;
 
 const globs = require('./../../lib/globs-helper');
 const getPaths = require('./../../lib/get-path');

package/tasks/stylesheets/config.js

@@ -15,6 +15,12 @@ exports.stylesheets = {
     autoprefixer: {
     },
 
+    // PostCSS Nested Calc
+    // see https://www.npmjs.com/package/@csstools/postcss-nested-calc
+    nestedCalc: {
+        preserve: false,
+    },
+
     // PostCSS plugins and options
     // see https://github.com/postcss/postcss
     postcss: {

package/tasks/stylesheets/preprocess-config.js

@@ -1,5 +1,6 @@
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
+const postcssNestedCalc = require('@csstools/postcss-nested-calc');
 const find = require('lodash/find');
 
 /**
@@ -18,27 +19,22 @@ module.exports = function processStylesheetsConfig (config, fullConfig) {
     if (config && config.postcss) {
         config.postcss.plugins = config.postcss.plugins || [];
 
+        // Add nestedCalc
+        if (config.nestedCalc) {
+            config.postcss.plugins.push(postcssNestedCalc(config.nestedCalc));
+        }
+
         // Add autoprefixer
         if (config.autoprefixer && !find(config.postcss.plugins, {'postcssPlugin': 'autoprefixer'})) {
             config.postcss.plugins.push(autoprefixer(config.autoprefixer));
         }
 
-        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]
             }));
         }
-
-        if (config.cssnano) {
-            // Add ignore plugin only if there is nano / minification
-            config.postcss.plugins.push(require('../../vendor/postcss-ignore-plugin/dist/add').default);
-        }
     }
 
     return config;

package/tasks/stylesheets/task.js

@@ -2,7 +2,7 @@ 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 memoize = require('nano-memoize').default;
 const cached = require('gulp-cached');
 const dependents = require('gulp-dependents');
 

package/tests/build/build.test.js

@@ -23,13 +23,13 @@ test('SASS variable test', () => {
 
 test('SASS import test', () => {
     return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/import-test.css'), {'encoding': 'utf8'}).then((css) => {
-        expect(css).toBe('.btn{color:#fff;background:#222}');
+        expect(css).toBe('.btn{background:#222;color:#fff}');
     });
 });
 
 test('SASS sub-folder import test', () => {
     return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/sub-folder/import-test.css'), {'encoding': 'utf8'}).then((css) => {
-        expect(css).toBe('.btn{color:#fff;background:#222}');
+        expect(css).toBe('.btn{background:#222;color:#fff}');
     });
 });
 
@@ -39,6 +39,18 @@ test('SASS autoprefixer test', () => {
     });
 });
 
+test('CSS nano ignore test', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/ignore-test.css'), {'encoding': 'utf8'}).then((css) => {
+        expect(css).toBe(':root{--yes: ;--no:initial}');
+    });
+});
+
+test('CSS nano nested calc test', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/nested-calc-test.css'), {'encoding': 'utf8'}).then((css) => {
+        expect(css).toBe('body{padding-top:calc(10vw + (10vh * 1.5))}');
+    });
+});
+
 test('Font file woff copied', () => {
     expect.assertions(1);
     return expect(fsPromises.access(path.resolve(publicPath, 'assets/fonts/font.woff'))).resolves.toBe(undefined);

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

@@ -1,124 +0,0 @@
-# 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

@@ -1,82 +0,0 @@
-"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

@@ -1,83 +0,0 @@
-"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;