Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
cgalpin opened this issue Feb 15, 2023 · 0 comments
Open

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

cgalpin opened this issue Feb 15, 2023 · 0 comments
Labels
Affects: Compiling Related to compiling Sass or JavaScript Needs: Confirmation We need to confirm that this is an issue

Comments

@cgalpin
Copy link

cgalpin commented Feb 15, 2023

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);
});
@mejiaj mejiaj added Needs: Confirmation We need to confirm that this is an issue Affects: Compiling Related to compiling Sass or JavaScript labels Mar 16, 2023
@mejiaj mejiaj added the Type: Bug A problem in the code label Jun 22, 2023
@brunerae brunerae moved this to Needs refinement in USWDS Core Project Data May 13, 2024
@dct2023 dct2023 moved this from Needs refinement to Backlog in USWDS Core Project Data Feb 5, 2025
@dct2023 dct2023 removed the Type: Bug A problem in the code label Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Affects: Compiling Related to compiling Sass or JavaScript Needs: Confirmation We need to confirm that this is an issue
Projects
USWDS Core Project Data
Status: Backlog
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cgalpin @mejiaj @dct2023