uswds / uswds-compile

Simple Gulp 5 functions for copying USWDS static assets and transforming USWDS Sass into browser-readable CSS.
Other
20 stars 13 forks source link

gulpfile.js uswds.paths.dist.* path settings not honored #57

Open cgalpin opened 1 year ago

cgalpin commented 1 year ago

Describe the bug

When I attempt to customize USWDS settings by editing gulpfile.js to configure path settings (e.g., uswds.paths.dist.img), it causes an error because the path specified is not used.

Steps to reproduce the bug

Install USWDS and USWDS Compile Run npx gulp init to install the initial USWDS Compile files, initially not changing any paths and test. You should see no errors in the developer console, and the images rendered and appropriate fonts used.

mkdir uswds-test
cd uswds-test
npm init -y
npm install express --save
npm install @uswds/uswds --save
npm install @uswds/compile --save-dev
vi gulpfile.js
npx gulp init
vi index.html
vi server.js
node server.js

Then delete any generated files (assets and sass) and try changing the paths to differ from the default generated paths, run npx gulp init again, update the path to styles.css in index.html, and re-test. You will see errors in the browser console where the images, fonts etc are not found due to uswds looking for them in unexpected places.

Examples

Use something other than img for the dist.img path

// generates where specified but fails
// (looks for images in src/assets/uswds/img)
uswds.paths.dist.theme = './src/sass/uswds';
uswds.paths.dist.img =   './src/assets/uswds/images';
uswds.paths.dist.fonts = './src/assets/uswds/fonts';
uswds.paths.dist.js =    './src/assets/uswds/js';
uswds.paths.dist.css =   './src/assets/uswds/css';

Use something other than fonts for the dist.font path

// generates where specified but fails
// (looks for fonts in src/assets/uswds/fonts)
uswds.paths.dist.theme = './src/sass/uswds';
uswds.paths.dist.img =   './src/assets/uswds/img';
uswds.paths.dist.fonts = './src/assets/uswds/font';
uswds.paths.dist.js =    './src/assets/uswds/js';
uswds.paths.dist.css =   './src/assets/uswds/css';

Use only the two settings given in the documention as an example, with a slight change to use src since frameworks do not allow serving content outside of the src dir.

// generates
// assets/uswds/{fonts,img,js}
// src/assets/uswds/css
// src/sass/uswds
//
// But fails to load fonts (expects them to be in src/assets/uswds/fonts)
uswds.paths.dist.css =   './src/assets/uswds/css';
uswds.paths.dist.theme = './src/sass/uswds';

I did not try changing dist.js or dis.css to other endings, but you get the idea.

Expected Behavior

The paths specified in gulpfile.js are used and work.

Test files used

gulpfile.js

/**
* Import uswds-compile
*/
const uswds = require("@uswds/compile");

/**
* USWDS version
* Set the major version of USWDS you're using
* (Current options are the numbers 2 or 3)
*/
uswds.settings.version = 3;

/**
* Path settings
* Set as many as you need
*/
//uswds.paths.dist.css = './assets/css';
//uswds.paths.dist.theme = './sass/uswds';

/**
* Exports
* Add as many as you need
*/
exports.init = uswds.init;
exports.compile = uswds.compile;
exports.watch = uswds.watch;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="src/assets/uswds/css/styles.css">
  <title>USWDS Test</title>
</head>
<body>
  <div class="ui container">
    <h1>Test</h1>

    <div class="usa-alert usa-alert--info">
      <div class="usa-alert__body">
        <h4 class="usa-alert__heading">Informative status</h4>
        <p class="usa-alert__text">
          Lorem ipsum dolor sit amet,
          <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
          elit, sed do eiusmod.
        </p>
      </div>
    </div>

  </div>
</body>
</html>

server.js

const express = require('express');

const app = express();
const port = process.env.PORT || 3000;

// Set folder as root
app.use(express.static('./'));

// Listen for HTTP requests on port 3000
app.listen(port, () => {
  console.log('listening on %d', port);
});