Bug: Design System variable declaration issue

[yesenia-gtz]

Issue flagged via email from Guzman, Danny@CIO <Danny.Guzman@state.ca.gov>

"I'll send more issues as I come across them, for now this is the biggest issue and there's no workaround until this gets fixed. Just using these 2 components as examples but this is on every component.

When the files are compiled together, the const style statement causes coding errors since you can't redeclare a constant variable.

Not sure if we can get someone to correct this soon, but currently accordion, feature card, link grid, page navigation and page alerts are available Design System Gutenberg blocks, so if we can get them to at least fix these 5 then I and Konstantin can continue building out GovOps and Drought"

[zakiya]

Just a note that we don't recommend using Gulp because it has a security vulnerability and hasn't had a new release since 2019.

However we should

1. Clarify in the README the best way to compile several packages.
2. Reopen and work on CDN install instructions #324

[xjensen]

I've put some work into this at #915. Some notes.

The following components have been modified.

• accordion
• back-to-top
• combined-css
• page-alert
• page-feedback
• page-navigation
• pagination

Notably, a couple components mentioned in the report are unaffected by this (no JS), so I didn't touch them.

• feature-card
• link-grid

I'm not sure if there's an easy way to document package compilation, since it can be so specific to each tool (Webpack, Rollup, Esbuild, Parcel, Fusebox, Browserify, Vite, Snowpack, and so on). It would probably be good to put together examples of all these arrangements as part of that old "integrations" concept we used to talk about. A convenient, hosted, a la carte bundler tool would also be good to have here.

[yesenia-gtz]

@Danny-Guzman @rkojik @artuoma please review the items of note above, these components have been modified.

[Danny-Guzman]

@yesenia-gtz There are only 2 vulnerabilities for gulpjs and we don't use the glob-parent or copy-props packages so we are not affected. Can't review the changes made until the PR submitted by @xjensen gets approved and merged

https://www.cvedetails.com/vulnerability-list/vendor_id-24145/Gulpjs.html

[zakiya]

@xjensen To start, we can recommend the lightest weight solution (Rollup or Esbuild probably?). And build out the other examples once we have better data on usage -- or maybe even ask others to contribute their solutions. Having even minimal instructions is a signal that we expect people to use some kind of compiler.

A hosted bundler is definitely still on the table.

[Danny-Guzman]

@zakiya Maybe I don't understand, but what do you mean by hosted bundler???

[zakiya]

@Danny-Guzman My comment was in response to @xjensen comment "A convenient, hosted, a la carte bundler tool would also be good to have here." We've long had the idea of building a tool - possibly with a UI, where developers can choose which components they want to include and generate a download.

#718 describes an MVP version
Ideally, we'd have something similar to what Bootstrap is doing here for Less files

[xjensen]

Updates to the affected packages have been merged into the release branch and published to NPM.

Here are the NPM package names and new version numbers.

@cagov/ds-combined-css@2.0.3
@cagov/ds-pagination@2.0.2
@cagov/ds-page-navigation@2.1.3
@cagov/ds-page-feedback@1.1.3
@cagov/ds-page-alert@2.0.2
@cagov/ds-back-to-top@2.0.2
@cagov/ds-accordion@2.0.3

Let us know if this helps. If so, we can close this. If not, we may need some additional information about build tools, error messages, etc.

[Danny-Guzman]

So far, variable declarations seem to be working with no issues.

In the CSS can we use relative paths instead of absolute paths where fonts are being loaded? This will allow fonts to load no matter what the file structure is so long as the fonts are one level up from where the CSS is.

css
-- colorscheme.css

fonts
-- publicsans-extralight-webfont.woff2

Example
https://github.com/cagov/design-system/blob/main/components/base-css/src/_fonts.scss#L8

src: url("/fonts/publicsans-extralight-webfont.woff2") format("woff2"); should be
src: url("../fonts/publicsans-extralight-webfont.woff2") format("woff2");

[xjensen]

@Danny-Guzman Good to hear the variable problems are solved.

We've taken your suggestion regarding fonts and opened up a separate issue at #922. Let's move the font problem discussion over to that thread.

Otherwise, I think we can go ahead and close this Issue.