@texastribune/queso-tools - npm Package Compare versions

Comparing version 1.1.0-0 to 1.1.1-1

lib/amp.js

 const fs = require('fs');
 const path = require('path');
 const ora = require('ora');
-const CleanCSS = require('clean-css');
 const amphtmlValidator = require('amphtml-validator');
+const compile = require('./compile');
 const { logMessage } = require('./utils');
@@ -12,14 +12,9 @@ const { AMP_BOILERPLATE, AMP_SUCCESS } = require('./constants');
 const processAMP = async dirs => {
-  // get css file contents
-  let css = await fs.readFileSync(dirs.in);
-
-  // minify css
-  const cssCleaner = new CleanCSS({
-    returnPromise: true,
+  // compile SCSS with isAMP set to true
+  let css = await compile({
+    isAmp: true,
+    outFile: dirs.out,
+    sourceMapOn: false,
+    file: dirs.in,
   });
-  const { styles: minified } = await cssCleaner.minify(css);
-  css = minified;
-
-  // prep for amp and html
-  css = css.replace(/!important/g, '');
   css = `<style amp-custom>${css}</style>`;
@@ -62,4 +57,4 @@
 module.exports = async dirs => {
-  spinner.start('Building AMP styles');
-  let resp = {};
+  spinner.start('Build AMP styles');
+  let resp = [];
 
@@ -66,0 +61,0 @@ try {

lib/icons.js

@@ -75,3 +75,3 @@ // utility packages
 module.exports = async dirs => {
-  spinner.start('Building icons');
+  spinner.start('Build icons');
 
@@ -78,0 +78,0 @@ return Promise.all(dirs.map(dirMap => processSVGs(dirMap)))

lib/styles.js

@@ -1,150 +0,52 @@
-// utility packages
+const ora = require('ora');
 const fs = require('fs-extra');
-const path = require('path');
-const ora = require('ora');
-
-// css packages
-const postCSS = require('postcss');
-const sass = require('sass');
-const autoprefixer = require('autoprefixer');
-const CleanCSS = require('clean-css');
-
-// internal
 const { isProductionEnv } = require('./env');
-const { bustCache, getBundles } = require('./utils');
 const { SCSS_SUCCESS } = require('./constants');
+const compile = require('./compile');
+const hashFiles = require('./hash-files');
 
 const spinner = ora();
 
-// postCSS plugins
-// @todo: Add linting when further along in CSS cleanup.
-const postCSSInstance = postCSS([autoprefixer({ grid: true })]);
-
-const processSass = async (dirMap, oldBundles) => {
-  // get input and output
-  const filePath = dirMap.in;
-  const outputPath = dirMap.out;
-  const outputDir = path.dirname(outputPath);
-
-  const bustedObj = bustCache(outputPath);
-  const { baseName } = bustedObj;
-  let { bustedName, bustedLocation } = bustedObj;
-
-  // compile the sass file
-  let compiled = {};
-  const doShowSourceMaps = !isProductionEnv;
+const processSass = async dirMap => {
+  const file = dirMap.in;
+  const { out } = dirMap;
   try {
-    compiled = await sass.renderSync({
-      file: filePath,
-      includePaths: ['node_modules', './node_modules'],
-      outFile: bustedLocation,
-      sourceComments: doShowSourceMaps,
-      sourceMap: doShowSourceMaps,
-      sourceMapEmbed: doShowSourceMaps,
-    });
-  } catch (err) {
-    throw err;
-  }
+    if (fs.existsSync(file)) {
+      // compile scss
+      const css = await compile({
+        isMin: isProductionEnv,
+        outFile: out,
+        sourceMapOn: !isProductionEnv,
+        isAmp: false,
+        file,
+      });
 
-  // grab CSS of compiled object
-  let { css } = compiled;
+      // write out compiled css specified output directory
+      try {
+        await fs.outputFile(out, css);
+        spinner.info(`Compiled: ${out}`);
+      } catch (err) {
+        throw new Error(err.message);
+      }
 
-  // pass CSS through postcss plugins declared in postCSSInstance
-  try {
-    const processed = await postCSSInstance.process(css, {
-      from: filePath,
-    });
-    css = processed.toString();
-  } catch (err) {
-    throw err;
-  }
-
-  // on prod (build), run our CSS through a cleaner
-  if (isProductionEnv) {
-    const cssCleaner = new CleanCSS({
-      returnPromise: true,
-      level: 2,
-    });
-    const { styles: minified } = await cssCleaner.minify(css);
-    css = minified;
-  }
-
-  // check if this css is same as last
-  if (typeof oldBundles[baseName] !== 'undefined') {
-    try {
-      const oldName = oldBundles[baseName];
-      const oldLocation = `${outputDir}/${oldName}`;
-      const oldVersion = await fs.readFileSync(oldLocation, 'utf8');
-      if (oldVersion === css) {
-        bustedName = oldName;
-        bustedLocation = oldLocation;
-      }
-    } catch (err) {
-      throw err;
+      // generate cache busted files
+    } else {
+      spinner.warn(`${file} does not exist.`);
     }
-  }
-
-  // write out compiled css or html to specified output directory without hash
-  try {
-    await fs.outputFile(outputPath, css);
   } catch (err) {
-    throw err;
+    throw new Error(err.message);
   }
-
-  // write out compiled css or html to specified output directory with hash name
-  try {
-    await fs.outputFile(bustedLocation, css);
-  } catch (err) {
-    throw err;
-  }
-
-  const obj = {};
-  obj[baseName] = bustedName;
-  return obj;
 };
 
-const processManifest = async (bustedMap, manifest) => {
-  const bustedMapObj = {};
-  bustedMap.forEach(file => {
-    bustedMapObj[Object.keys(file)] = file[Object.keys(file)];
-  });
-  try {
-    await fs.outputFile(manifest, JSON.stringify(bustedMapObj, null, 2));
-  } catch (err) {
-    throw err;
-  }
-};
-
 module.exports = async (dirs, manifest) => {
-  spinner.start('Compiling SCSS');
+  spinner.start('Compile SCSS');
+  await Promise.all(dirs.map(dirMap => processSass(dirMap)));
+  spinner.succeed();
 
-  // first grab old bundle map for no-change events
-  let oldBundles = {};
-  try {
-    oldBundles = await getBundles(manifest);
-  } catch (error) {
-    spinner.warn('No prior CSS bundles found.');
+  // if manifest, assume hashed files are needed
+  if (typeof manifest !== 'undefined') {
+    await hashFiles(dirs, manifest);
   }
 
-  // loop through each file found and process our sass
-  let bustedMap = [];
-  try {
-    bustedMap = await Promise.all(
-      dirs.map(dirMap => processSass(dirMap, oldBundles))
-    );
-  } catch (error) {
-    spinner.fail();
-    throw new Error(error.message);
-  }
-
-  // write a manifest to locate files
-  try {
-    await processManifest(bustedMap, manifest);
-  } catch (error) {
-    spinner.fail();
-    throw new Error(error.message);
-  }
-
-  spinner.succeed();
   return SCSS_SUCCESS;
 };

lib/utils.js

 const fs = require('fs-extra');
 const path = require('path');
 
-const bustCache = file => {
-  const ext = path.extname(file);
-  const baseName = path.basename(file, ext);
-  const bustedName = `${baseName}.${Date.now()}${ext}`;
-  const bustedLocation = `${path.dirname(file)}/${bustedName}`;
-  return {
-    baseName,
-    bustedName,
-    bustedLocation,
-  };
-};
-
-const getBundles = mapLocation => fs.readJson(mapLocation);
-
 const appDirectory = fs.realpathSync(process.cwd());
@@ -47,6 +33,4 @@
 module.exports = {
-  bustCache,
-  getBundles,
   resolveApp,
   logMessage,
 };

package.json

 {
   "name": "@texastribune/queso-tools",
-  "version": "1.1.0-0",
+  "version": "1.1.1-1",
   "description": "Node task runners for common front-end tasks",
@@ -85,2 +85,3 @@ "main": "./lib/index.js",
     "postcss": "^7.0.17",
+    "postcss-amp": "^1.4.0",
     "sass": "^1.21.0",
@@ -87,0 +88,0 @@ "svgo": "^1.2.2",

No alert changes

Improved metrics

Total package byte prevSize

17326

increased by4.63%

Number of package files

12

increased by20%

Lines of code

379

increased by6.16%

Worsened metrics

Dependency count

11

increased by10%

Number of low supply chain risk alerts

5

increased by25%

Dependency changes

• + Addedpostcss-amp@^1.4.0

• + Addedpostcss-amp@1.4.0(transitive)