fp-stylus - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

package.json

 {
   "name": "fp-stylus",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Stylus extension for Fepper",
@@ -5,0 +5,0 @@ "main": "stylus~extend.js",

stylus~extend.js

 'use strict';
 
+const path = require('path');
+
+const fs = require('fs-extra');
 const gulp = require('gulp');
+const gulpStylus = require('gulp-stylus');
 const runSequence = require('run-sequence');
-const stylus = require('gulp-stylus');
+const stylus = require('stylus');
 const utils = require('fepper-utils');
@@ -13,2 +17,150 @@
 
+function diffThenRender(commentBool, cb) {
+  const cssFilesBld = fs.readdirSync(cssBldDir);
+  let hasComments = false;
+  let i = cssFilesBld.length;
+
+  while (i--) {
+    const cssFileBld = `${cssBldDir}/${cssFilesBld[i]}`;
+    const stat = fs.statSync(cssFileBld);
+
+    if (!stat.isFile()) {
+      continue;
+    }
+
+    const cssOld = fs.readFileSync(cssFileBld, conf.enc);
+
+    hasComments = /^\/\* line \d+ : /m.test(cssOld) && /\.styl \*\/$/m.test(cssOld);
+
+    if (hasComments) {
+      break;
+    }
+  }
+
+  if (hasComments) {
+    if (commentBool) {
+      runSequence(
+        'stylus:write-tmp',
+        'stylus',
+        cb
+      );
+    }
+    else {
+      runSequence(
+        'stylus:write-tmp',
+        'stylus:no-comment',
+        cb
+      );
+    }
+
+    return;
+  }
+
+  const stylDir = `${cssSrcDir}/stylus`;
+  const stylFiles = fs.readdirSync(stylDir);
+  i = stylFiles.length;
+
+  while (i--) {
+    const stylFile = `${stylDir}/${stylFiles[i]}`;
+    const stylFileObj = path.parse(stylFile);
+
+    if (stylFileObj.ext !== '.styl') {
+      if (i === 0) {
+        cb();
+      }
+
+      continue;
+    }
+
+    const stat = fs.statSync(stylFile);
+
+    if (!stat.isFile()) {
+      if (i === 0) {
+        cb();
+      }
+
+      continue;
+    }
+
+    const stylFileStr = fs.readFileSync(stylFile, conf.enc);
+
+    stylus(stylFileStr)
+      .set('filename', stylFile)
+      .set('linenos', false)
+      .render(
+        ((iteration) => {
+          return (err, cssNew) => {
+            if (err) {
+              utils.error(err);
+            }
+            else {
+              // Declare tmp file for comparison.
+              const cssFileTmp = `${cssSrcDir}/${stylFileObj.name}.css`;
+              let cssFileTmpStr = '';
+
+              if (fs.existsSync(cssFileTmp)) {
+                cssFileTmpStr = fs.readFileSync(cssFileTmp, conf.enc);
+              }
+
+              // Compare newly rendered css with the contents of the tmp file.
+              // Exit if there has been no change. This is the case for users who only edit bld css and do not modify
+              // Stylus files.
+              if (cssFileTmpStr === cssNew) {
+                if (iteration === 0) {
+                  cb();
+                }
+
+                return;
+              }
+
+              // Output tmp file for future comparison.
+              fs.outputFileSync(cssFileTmp, cssNew);
+
+              // Now, compare against bld css.
+              const cssFileBld = `${cssBldDir}/${stylFileObj.name}.css`;
+              const stat = fs.statSync(cssFileBld);
+
+              if (stat.isFile()) {
+                const cssOld = fs.readFileSync(cssFileBld, conf.enc);
+
+                // The first time 'stylus:diff-then-comment' is run, cssNew should equal cssOld.
+                // cssFileTmp will have been written at this point and will be used for future comparisons.
+                // If users only edit bld css and do not modify Stylus files, they should never get to this point.
+                if (cssNew !== cssOld) {
+                  stylus(stylFileStr)
+                    .set('filename', stylFile)
+                    .set('linenos', commentBool)
+                    .render(
+                      ((iteration1) => {
+                        return (err1, cssNew1) => {
+                          if (err1) {
+                            utils.error(err1);
+                          }
+                          else {
+                            fs.outputFileSync(cssFileBld, cssNew1);
+                          }
+
+                          if (iteration1 === 0) {
+                            cb();
+                          }
+                        };
+                      })(iteration)
+                    );
+                }
+              }
+            }
+
+            if (iteration === 0) {
+              cb();
+            }
+          };
+        })(i)
+      );
+
+    if (i === 0) {
+      cb();
+    }
+  }
+}
+
 function handleError(err) {
@@ -21,3 +173,3 @@ utils.error(err.toString());
   return gulp.src(cssSrcDir + '/stylus/*.styl')
-    .pipe(stylus({
+    .pipe(gulpStylus({
       linenos: true
@@ -29,4 +181,18 @@ }))
 
-gulp.task('stylus:once', ['stylus']);
+// This first checks if the old bld CSS has line comments. If so, it runs the 'stylus' task and returns.
+// If there are no line comments, it processes Stylus without line comments, to compare the new CSS with the old CSS.
+// If there's a difference, it then processes Stylus again with line comments and writes that CSS to the bld directory.
+// Otherwise, it leaves the old bld CSS alone.
+// The intended result is for users who use Fepper defaults never to notice Stylus being processed if they never edit
+// Stylus files, and for users who do edit Stylus files to have Stylus process as expected.
+// Power-users should replace this with the 'stylus:once' or 'stylus:no-comment' task for better performance.
+gulp.task('stylus:diff-then-comment', function (cb) {
+  diffThenRender(true, cb);
+});
 
+// Same as 'stylus:diff-then-comment' but with no line comments in rendered CSS.
+gulp.task('stylus:diff-then-no-comment', function (cb) {
+  diffThenRender(false, cb);
+});
+
 // This runs the CSS processor without outputting line comments.
@@ -36,3 +202,3 @@ // You probably want this to process CSS destined for production.
   return gulp.src(cssSrcDir + '/stylus/*.styl')
-    .pipe(stylus({
+    .pipe(gulpStylus({
       linenos: false
@@ -46,3 +212,3 @@ }))
   runSequence(
-    'stylus:no-comment',
+    'stylus:diff-then-no-comment',
     'ui:copy-styles',
@@ -53,4 +219,20 @@ cb
 
+gulp.task('stylus:once', ['stylus']);
+
+// This outputs tmp files without line comments to check for modifications to Stylus code.
+gulp.task('stylus:write-tmp', function () {
+  return gulp.src(cssSrcDir + '/stylus/*.styl')
+    .pipe(gulpStylus({
+      linenos: false
+    }))
+    .on('error', handleError)
+    .pipe(gulp.dest(cssSrcDir));
+});
+
 gulp.task('stylus:watch', function () {
   gulp.watch('stylus/**/*', {cwd: cssSrcDir}, ['stylus']);
 });
+
+gulp.task('stylus:watch-write-tmp', function () {
+  gulp.watch('stylus/**/*', {cwd: cssSrcDir}, ['stylus:write-tmp', 'stylus']);
+});

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9333

increased by138.27%

Lines of code

191

increased by365.85%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes