@geoapps/sass2css - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

.gitlab-ci.yml

+image: node:lts-alpine
+
+stages:
+  - test
+
+before_script:
+  - yarn
+
+lint:
+  stage: test
+  script:
+    - yarn lint

bin/cli.js

@@ -20,2 +20,6 @@ #!/usr/bin/env node
       })
+      .option('input-img-dir-name', {
+        describe: 'Relative path to directory with source images',
+        type: 'string'
+      })
       .option('output-dir-name', {
@@ -25,15 +29,23 @@ describe: 'Relative path to output directory',
       })
-      .option('compress', {
-        describe: 'Whether to compress output CSS file',
-        type: 'boolean'
+      .option('output-img-dir-name', {
+        describe: 'Relative path to output directory for images',
+        type: 'string'
       })
+      .option('modes', {
+        describe: 'Output modes',
+        type: 'array'
+      })
       .default('base-path', '.')
       .default('input-dir-name', 'src/sass')
       .default('input-file-name', 'index.sass')
+      .default('input-img-dir-name', 'src/img')
       .default('output-dir-name', 'dist/css')
-      .default('compress', false);
+      .default('output-img-dir-name', 'dist/img')
+      .default('modes', ['development', 'production']);
   }, options => {
-    const mode = process.env.NODE_ENV || 'development';
-    const compress = mode === 'production';
-    sass2Css({ ...options, compress });
+    const modes = process.env.NODE_ENV ? [process.env.NODE_ENV] : options.modes;
+    sass2Css({ ...options, modes }).catch(error => {
+      console.error(error);
+      process.exit(-1);
+    });
   })
@@ -40,0 +52,0 @@ .wrap(null)

CHANGELOG.md

 ## Changelog
 
-### 0.1.0
+### 0.2.0 (2019-02-07)
 
+- `compress` option is replaced by `modes`.
+- Copying image files is supported.
+- Gitlab CI support is added.
+
+### 0.1.0 (2019-02-06)
+
 - First release.

index.js

 const fs = require('fs');
 const path = require('path');
+
 const sass = require('node-sass');
+const jsonfile = require('jsonfile');
+const copyFiles = require('copyfiles');
 const mkdirp = require('mkdirp');
+const chalk = require('chalk');
 
 const nodeModulesImportRegExp = /^~(.+)$/;
 
+const availableModes = ['development', 'production'];
+
 /**
@@ -15,6 +21,8 @@ * Convert SASS to CSS
  * @param {String} [options.inputFileName=index.sass] Name of input SASS file
+ * @param {String} [options.inputImgDirName=src/img] Relative path to directory with source images
  * @param {String} [options.outputDirName=dist/css] Relative path to output directory
- * @param {Boolean} [options.compress=false] Whether to compress output CSS file
+ * @param {String} [options.outputImgDirName=dist/img] Relative path to output directory for images
+ * @param {Array} [options.modes=['development', 'production']] Output modes
  */
-function sass2Css(options = {}) {
+async function sass2Css(options = {}) {
   const {
@@ -24,4 +32,6 @@ basePath = '.',
     inputFileName = 'index.sass',
+    inputImgDirName = 'src/img',
     outputDirName = 'dist/css',
-    compress = false
+    outputImgDirName = 'dist/img',
+    modes = ['development', 'production']
   } = options;
@@ -34,3 +44,3 @@
   try {
-    const packageJson = require(packageJsonPath);
+    const packageJson = await jsonfile.readFile(packageJsonPath);
     packageName = packageJson.name;
@@ -42,31 +52,72 @@ }
 
-  const { outputFileName = `${packageName}${compress ? '.min' : ''}.css` } = options;
-
   const inputDirPath = path.resolve(baseDirPath, inputDirName);
   const inputFilePath = path.resolve(inputDirPath, inputFileName);
+  const inputImgDirPath = path.resolve(baseDirPath, inputImgDirName);
   const outputDirPath = path.resolve(baseDirPath, outputDirName);
-  const outputFilePath = path.resolve(outputDirPath, outputFileName);
+  const outputImgDirPath = path.resolve(baseDirPath, outputImgDirName);
   const nodeModulesPath = path.resolve(baseDirPath, 'node_modules');
 
-  sass.render({
-    file: inputFilePath,
-    outFile: outputFilePath,
-    outputStyle: compress ? 'compressed' : 'nested',
-    importer: (url, prev, done) => {
-      const file = url.replace(nodeModulesImportRegExp, `${nodeModulesPath}/$1`);
-      done({ file });
+  if (await directoryExists(inputImgDirPath)) {
+    await copyDir(inputImgDirPath, outputImgDirPath);
+    console.log(chalk.green.bold('Image files are copied.'));
+  }
+
+  const renderSass = options => {
+    const { outputFilePath, outputStyle } = options;
+    return new Promise((resolve, reject) => {
+      sass.render({
+        file: inputFilePath,
+        outFile: outputFilePath,
+        outputStyle,
+        importer: (url, prev, done) => {
+          const file = url.replace(nodeModulesImportRegExp, `${nodeModulesPath}/$1`);
+          done({ file });
+        }
+      }, (error, result) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        mkdirp.sync(outputDirPath);
+        fs.writeFile(outputFilePath, result.css, error => {
+          if (error) {
+            reject(error);
+          }
+          else {
+            resolve();
+          }
+        });
+      });
+    });
+  };
+
+  for (let i = 0; i < modes.length; i++) {
+    const mode = modes[i];
+    if (!availableModes.includes(mode)) {
+      return Promise.reject(`Mode "${mode}" is not supported.`);
     }
-  }, (error, result) => {
-    if (error) {
-      console.error('Unable to transform SASS to CSS.');
-      console.error(error);
-      return;
+
+    const { outputFileName = `${packageName}${mode === 'production' ? '.min' : ''}.css` } = options;
+    const outputFilePath = path.resolve(outputDirPath, outputFileName);
+    const outputStyle = mode === 'production' ? 'compressed' : 'nested';
+
+    try {
+      await renderSass({ outputFilePath, outputStyle });
+      console.log(chalk.yellow.bold(`Output CSS file "${outputFilePath}" is written.`));
     }
-    mkdirp.sync(outputDirPath);
-    fs.writeFile(outputFilePath, result.css, error => {
+    catch (e) {
+      console.error(chalk.red.bold(`Unable to write output CSS file "${outputFilePath}".`));
+    }
+  }
+}
+
+function copyDir(inputDir, outputDir) {
+  return new Promise((resolve, reject) => {
+    copyFiles([`${inputDir}/**/*`, outputDir], { up: inputDir.split(path.sep).length }, error => {
       if (error) {
-        console.error(`Unable to write output CSS file "${outputFilePath}".`);
-        return;
+        reject(error);
       }
-      console.log(`Output CSS file "${outputFilePath}" is written.`);
+      else {
+        resolve();
+      }
     });
@@ -76,2 +127,15 @@ });
 
+function getFileItemStats(fileItemPath) {
+  return new Promise(resolve => fs.stat(fileItemPath, (error, stats) => resolve(error ? false : stats)));
+}
+
+async function directoryExists(dirPath) {
+  try {
+    return (await getFileItemStats(dirPath)).isDirectory();
+  }
+  catch (e) {
+    return false;
+  }
+}
+
 module.exports = sass2Css;

package.json

 {
   "name": "@geoapps/sass2css",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Converting library SASS to CSS",
@@ -21,2 +21,5 @@ "main": "index.js",
   "dependencies": {
+    "chalk": "^2.4.2",
+    "copyfiles": "^2.1.0",
+    "jsonfile": "^5.0.0",
     "mkdirp": "^0.5.1",
@@ -23,0 +26,0 @@ "node-sass": "^4.11.0",

README.md

@@ -41,4 +41,6 @@ # @geoapps/sass2css
 - `--input-file-name` (`inputFileName`) Name of input SASS file (default is `index.sass`).
+- `--input-img-dir-name` (`inputImgDirName`) Relative path to directory with source images (default is `src/img`).
 - `--output-dir-name` (`outputDirName`) Relative path to output directory (default is `dist/css`).
-- `--compress` (`compress`) Whether to compress output CSS file (default is `false`).
+- `--output-img-dir-name` (`outputImgDirName`) Relative path to output directory for images (default is `dist/img`).
+- `--modes` (`modes`) Output modes (default is `['development', 'production']`).
 
@@ -45,0 +47,0 @@ ## Changelog

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

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

8571

52.54%

Number of package files

6

20%

Lines of code

180

60.71%

Number of lines in readme file

49

4.26%

Worsened metrics

Dependency count

6

100%

Dependency changes

• + Added

  chalk@^2.4.2

• + Added

  copyfiles@^2.1.0

• + Added

  jsonfile@^5.0.0

• + Added

  ansi-regex@5.0.1
  (transitive)

• + Added

  ansi-styles@4.3.0
  (transitive)

• + Added

  chalk@2.4.2
  (transitive)

• + Added

  cliui@7.0.4
  (transitive)

• + Added

  color-convert@2.0.1
  (transitive)

• + Added

  color-name@1.1.4
  (transitive)

• + Added

  copyfiles@2.4.1
  (transitive)

• + Added

  emoji-regex@8.0.0
  (transitive)

• + Added

  escalade@3.2.0
  (transitive)

• + Added

  has-flag@3.0.0
  (transitive)

• + Added

  is-fullwidth-code-point@3.0.0
  (transitive)

• + Added

  isarray@0.0.1
  (transitive)

• + Added

  jsonfile@5.0.0
  (transitive)

• + Added

  mkdirp@1.0.4
  (transitive)

• + Added

  noms@0.0.0
  (transitive)

• + Added

  readable-stream@1.0.34
  (transitive)

• + Added

  string-width@4.2.3
  (transitive)

• + Added

  string_decoder@0.10.31
  (transitive)

• + Added

  strip-ansi@6.0.1
  (transitive)

• + Added

  supports-color@5.5.0
  (transitive)

• + Added

  through2@2.0.5
  (transitive)

• + Added

  universalify@0.1.2
  (transitive)

• + Added

  untildify@4.0.0
  (transitive)

• + Added

  wrap-ansi@7.0.0
  (transitive)

• + Added

  xtend@4.0.2
  (transitive)

• + Added

  y18n@5.0.8
  (transitive)

• + Added

  yargs@16.2.0
  (transitive)

• + Added

  yargs-parser@20.2.9
  (transitive)