@texastribune/queso-tools

Node task runners for compiling CSS, creating SVGs, and more.

This repo accompanies our CSS+icons framework, queso-ui. Use the the task runners here, to compile the assets in that framework.

Install

npm install @texastribune/queso-tools --save-dev

or

yarn add @texastribune/queso-tools --dev

Tools

| modules | params | | ----------- | ----------| | styles | dirs, manifest (manifest is optional if you want files with hashed names)| | icons | dirs | | copy | dirs |

Using these tasks in the wild

Most of the tasks expect an array of directories or files with an input, in: key, and output, out: key. To set this up, create a file called paths.js and declare your map of paths.

Example:

// paths.js
const SCSS_DIR = './scss';
const CSS_OUTPUT_DIR = './css/';
const SVG_LIB_DIR = './node_modules/@texastribune/queso-ui/icons/base';
const SVG_OUTPUT_DIR = './templates/includes';

const CSS_MAP = [
  {
    in: `${SCSS_DIR}/styles.scss`,
    out: CSS_OUTPUT_DIR,
  },
  {
    in: `${SCSS_DIR}/styles2.scss`,
    out: CSS_OUTPUT_DIR,
  },
];
// The "in" key for icons should be an array; you can mix and match icons from @texastribune/queso-ui and some stored locally
const SVG_MAP = [
  {
    in: [
      `${SVG_LIB_DIR}/twitter.svg`,
      `${SVG_LIB_DIR}/facebook.svg`,
      './icons/custom-icon.svg',
      './icons/other-icon.svg'
    ],
    out: `${SVG_OUTPUT_DIR}/my-svg-sprite.html`,
  },
];

// copy contents of a directory into another directory
// and/or copy a directory/file into another-directory/file
const COPY_MAP = [
  {
    in: SVG_LIB_DIR,
    out: SVG_OUTPUT_DIR,
  },
  {
    in: `${SVG_LIB_DIR}/twitter.svg`,
    out: `${SVG_OUTPUT_DIR}/twitter.svg`,
  },
];
// use if you'd like the outputted CSS to have hashed file names
const MANIFEST_FILE = `${CSS_OUTPUT_DIR}styles.json`;


module.exports = {
  CSS_MAP,
  SVG_MAP,
  MANIFEST_FILE,
  COPY_MAP
};

Now create a build.js file in that same folder where you'll reference these paths and begin to call the various tasks in this package.

That could look something like the following:

// build.js
const { styles, icons, copy } = require('@texastribune/queso-tools');
const { CSS_MAP, MANIFEST_FILE, SVG_MAP, COPY_MAP } = require('./paths');

async function build() {
  await styles(CSS_MAP, MANIFEST_FILE);
  // OR (use await if you had to glob to get your map)
  // const stylesArr = await CSS_MAP();
  // await styles(stylesArr, MANIFEST_FILE);
  await icons(SVG_MAP);
  await copy(COPY_MAP);
}

build()
  .catch((err) => {
    // eslint-disable-next-line no-console
    console.error(err.message);
    process.exit(1);
  });

Now run node build.js in your local environment to fire the build script.

Publishing

Make sure you're authenticated for npm publishing.

1. npm login - then follow the prompts
2. npm run release