USWDS - Sass: Fix output Sass directory pathing #6418
+42
−33
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mahoneycm
commented
Feb 18, 2025
| exports.compileString = (styles, loadPaths) => { | ||
| sass.compileString(styles, { | ||
| loadPaths, | ||
| silenceDeprecations: ["mixed-decls", "import"], |
Contributor
Author
There was a problem hiding this comment.
note: Silencing deprecations to minimize output in terminal as tests run.
mixed-declsdeprecations will be resolved in USWDS - Sass 2.0.0: Mixed declarations deprecation #5980importdeprecations will be resolved in USWDS - Sass 3.0.0:@importand global built-in functions deprecation #6216@importin favor of@forward)
Comment on lines
+19
to
+22
| // Function expression required to use this.timeout() and prevent test from timing out | ||
| before(async function buildSass() { | ||
| this.timeout(10000) | ||
| await runGulp("buildUSWDS"); |
Contributor
Author
There was a problem hiding this comment.
note: Due to the time needed to compile, I needed to increase the timeout to 10 seconds. Since it's a good bit longer, I opted to do it just for this test.
We can alternatively update .mocharc.json to increase the default timeout for all tests. (Currently 4000)
| copySass() { | ||
| dutil.logMessage("copySass", "Copying Sass stylesheets to /dist/scss"); | ||
| return src("src/**/**/*.scss").pipe(dest("dist/scss")); | ||
| return src("src/stylesheets/**/*.scss").pipe(dest("dist/scss")); |
Contributor
Author
There was a problem hiding this comment.
note: This change allows the directory levels between dist scss and packages to match src scss and packages.
This allows the @include "../../uswds.scss"@forward "../../uswds.scss" found in src/stylesheets/uswds.scss to continue to work after compilation.
Contributor
There was a problem hiding this comment.
@mahoneycm where is that @include ".." set? Should that be @import?
Contributor
Author
There was a problem hiding this comment.
Updated my comment to reflect that the uswds.scss sheet actually uses @forward
uswds/src/stylesheets/uswds.scss
Line 1 in a74f8aa
mejiaj
reviewed
Feb 20, 2025
Contributor
mejiaj
left a comment
mejiaj
left a comment
There was a problem hiding this comment.
@mahoneycm I've read the description and followed the testing steps, but some things are still unclear to me.
1. Breaking change
Is there an example we can use to show developers where the change happened or where they should make changes in?
2. Problem statement
Based on this:
Current sass output does not have the correct pathing to point to packages. Following our Install the package directly from GitHub guidance, users are likely to run into pathing issues.
What error would we be seeing?
Our unit test to check that users can use @include "uswds" is also non-functional. This test should confirm the Sass structure is correct.
Using @include is deprecated, so not sure why we want to fix the test for this.
3. Solution
Step 1 - Where did this happen? How does it affect this work? I see the code block, but there's no mention of what file it's in. The step that follows also lists 1.
Step 2 - Thanks for updating this.
Step 3 - This is where it was broken before, correct?
3. Testing and review
I've run the test, but it's not clear what's being tested and if it was successful.
Sample output
uswds on cm-fix-include-test [$] via v22.13.1
→
> @uswds/uswds@3.11.0 build
> gulp
[14:28:27] Using gulpfile ~/web/uswds/gulpfile.js
[14:28:27] Starting 'default'...
[14:28:27] Starting '<anonymous>'...
[14:28:27] USWDS v3.11.0
[14:28:27]
[14:28:27] * * * * * ========================
[14:28:27] * * * * * ========================
[14:28:27] * * * * * ========================
[14:28:27] * * * * * ========================
[14:28:27] ==================================
[14:28:27] ==================================
[14:28:27] ==================================
[14:28:27]
[14:28:27] build Creating distribution directories.
[14:28:27] Finished '<anonymous>' after 6.24 ms
[14:28:27] Starting '<anonymous>'...
[14:28:27] clean-dist Removing distribution directories.
[14:28:27] Finished '<anonymous>' after 3.63 ms
[14:28:27] Starting 'copyTheme'...
[14:28:27] Starting 'copyImages'...
[14:28:27] Starting 'copyFonts'...
[14:28:27] Starting 'copyIcons'...
[14:28:27] Starting 'copySass'...
[14:28:27] copyTheme Copying theme settings files to /dist/theme
[14:28:27] copyImages Copying images to /dist/img
[14:28:27] copyFonts Copying fonts to /dist/fonts
[14:28:27] copyIcons Copying Material icons to dist/img/material-icons
[14:28:27] copySass Copying Sass stylesheets to /dist/scss
(node:35172) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
[14:28:27] Finished 'copyTheme' after 178 ms
[14:28:27] Finished 'copySass' after 248 ms
[14:28:27] Finished 'copyImages' after 249 ms
[14:28:27] Finished 'copyFonts' after 277 ms
[14:28:28] Finished 'copyIcons' after 694 ms
[14:28:28] Starting 'cleanIcons'...
[14:28:28] Finished 'cleanIcons' after 1.22 ms
[14:28:28] Starting 'collectIcons'...
[14:28:28] collectIcons Collecting default icon set in dist/img/usa-icons
[14:28:28] Finished 'collectIcons' after 78 ms
[14:28:28] Starting 'buildSprite'...
[14:28:28] Finished 'buildSprite' after 53 ms
[14:28:28] Starting 'renameSprite'...
[14:28:28] Finished 'renameSprite' after 1.6 ms
[14:28:28] Starting 'cleanSprite'...
[14:28:28] Finished 'cleanSprite' after 1.74 ms
[14:28:28] Starting 'compileJS'...
[14:28:28] javascript Compiling JavaScript
[14:28:29] Finished 'compileJS' after 1.24 s
[14:28:29] Starting 'compileSass'...
[14:28:29] sass Compiling Sass
Warning:
--------------------------------------------------------------------
✉ USWDS Notifications
--------------------------------------------------------------------
3.0.0
- Settings: We deprecated the $output-all-utilities setting.
Control utility output with $output-these-utilities.
See designsystem.digital.gov/documentation/settings for more.
--------------------------------------------------------------------
3.1.0
- Accessibility: We added `type='button'` to all buttons that
do not submit a form. All your non-form project buttons will
need `type='button'`.
- Accessibility: We updated the markup in the usa-password package
to use a <button> element instead of an anchor element.
- Accessibility: Elements that get `aria-disabled` instead of
`disabled` are now styled as disabled.
- Compatibility: We're using some CSS selectors not supported
by IE11.
- Deprecated: We deprecated the embed-container() mixin.
- Display: We removed the outline circle from social media icons.
- Settings: We changed the default value of $theme-hero-image.
Teams that use the default image (hero.png) will need to get the
new image (hero.jpg) from the distribution package.
--------------------------------------------------------------------
3.2.0
- Accessibility: We changed `div.usa-identifier__identity` to
`section.usa-identifier__identity` (we changed the div to a
section) so the ARIA label is associated with an non-div element.
- Accessibility: We updated the aria-label in English versions of
section.usa-banner to 'Official website of the United States
government' to reduce ambiguity in screen reader vocalizations.
Previously, 'An official' could be misunderstood as 'unofficial'.
- Accessibility: We added `aria-hidden='true'` to the parent div
of `p.usa-banner__header-text` in usa-banner. We also
removed `aria-hidden='true'` from `p.usa-banner__header-action`.
Together these assure that the proper elements are read in the
banner.
- Accessibility: In the lock icon SVG in usa-banner, we changed the
value of aria-labelledby to
`aria-labelledby='banner-lock-description'` and updated the value
of desc#banner-lock-description to `'Locked padlock'` to simplify
the vocalization.
- Accessibility: We added `aria-hidden='true' to
`img.usa-banner__header-flag` in usa-banner since this is a
decorative image.
--------------------------------------------------------------------
3.4.0
- Compatibility: We no longer include ttf and woff fonts in our
@font-face rules. If you need these files for IEll compatibility,
add `$theme-font-browser-compatibility: true` to your project
settings.
--------------------------------------------------------------------
3.5.0
- Sass: Removed `usa-prose-` mixins and placeholders from Sass.
This is a breaking change only if your project Sass uses
`usa-prose-` mixins and placeholders. Users should instead use
`typeset-` mixins in their place.
- Settings: Now adjusting a single Sass map setting will no
longer set all other values in the map to `false`. Users can
now update only the map values they wish to change. This is a
breaking change only if your project deactivated mapped
settings by not declaring them.
- Accessibility: [form controls] We improved the consistency and
visibility of disabled styles. Teams should check disabled form
elements to assure that the new styles are working in their
layouts.
- Accessibility: [usa-pagination] Replace the
`role="presentation"` with `aria-label="ellipsis indicating
non-visible pages" in `usa-pagination__overflow` items.
- Accessibility: [usa-card] Use link elements in
any card component for calls to action instead of buttons. Use
`<a href="#" class="usa-button"></a>` for these
call-to-action links.
- Content: [usa-identifier] We updated the accessibility statement
link text. Use the text "Accessibility statement" (EN)
or "Declaración de accesibilidad" (ES) for the required
link to an accessibility statement.
- Guidance [usa-link]: We now suggest using the `rel="noreferrer"`
property on external links. This prevents the browser from leaking
information about the original web address.
- Guidance [usa-form]: We now suggest identifying both required
and optional fields in forms. Label required fields with a red
asterisk and optional fields with the word "optional".
--------------------------------------------------------------------
3.6.0
- Settings: This release updates USWDS disabled color settings
and tokens to conform to our standard naming convention.
If your project configures disabled color settings
or uses disabled color tokens, you probably need to update your
code. Details: github.com/uswds/uswds/releases/tag/v3.6.0
--------------------------------------------------------------------
3.7.0
Release notes: github.com/uswds/uswds/releases/tag/v3.7.0
- Accessibility: [usa-identifier] We updated the markup to improve
how screen readers read the phrase 'An official'.
- Accessibility: [usa-range] We updated the markup to remove
redundant ARIA attributes and improve the screen reader experience.
- Accessibility: [usa-range] We added optional data attributes that
allow adding units to screen reader output.
--------------------------------------------------------------------
3.8.0
Release notes: github.com/uswds/uswds/releases/tag/v3.8.0
- Accessibility: [usa-layout-docs__sidenav] BREAKING: By default, we
no longer support using CSS to reorder the sidenav position at mobile
widths. We suggest that teams update their sidenav markup to better
support tab order at mobile widths. See the release notes for more
details on how to do this.
To temporarily support the old CSS order functionality,
set `$theme-sidenav-reorder: true` in your project settings.
- Settings: We added `$theme-sidenav-reorder`. When `true` this setting
uses CSS to reorder the sidenav to follow the page text at mobile widths.
This setting can introduce usability issues, so we suggest that teams
update their sidenav markup instead. See the release notes for more detail.
--------------------------------------------------------------------
3.8.1
Release notes: github.com/uswds/uswds/releases/tag/v3.8.1
- Content: [usa-identifier] We fixed a bug that added the English word
"An" to Spanish variants of the identifier in our component
documentation. If you've recently updated the Spanish text of your
identifier, check to make sure the "official website" text begins
with "Un sitio web oficial de...".
--------------------------------------------------------------------
3.9.0
Release notes: github.com/uswds/uswds/releases/tag/v3.9.0
- Accessibility, Display: [usa-header] Removed the CSS order property from the mobile
view in standard variants of the header component. Now, the visual order of the
component matches the tab order.
- Accessibility, Markup: [usa-footer] Added the autocomplete="email" attribute to
the big footer variant and the "Create an account" template. This attribute allows
the components to meet the standards outlined in WCAG 1.3.5. Teams should update their
markup if they use an email field in their big footer.
- Accessibility, Markup: [usa-identifier] Updated the USA.gov link in Spanish versions
of the identifier. The link text now reads "Visite USAGov en Español" and the link
url is now "https://www.usa.gov/es/". Teams should update this text if they use the
Spanish-language identifier.
- Accessibility, Markup: [usa-memorable-date] Removed numeric representation of
months in the memorable date component. Recent usability testing indicated that having
both numbers and names to represent months was confusing for screen reader users.
Teams should update their memorable date component to remove the leading numbers.
- Display: [usa-alert, usa-site-alert] Fixed a bug that caused
$theme-site-margins-width to unexpectedly adjust the alignment inside the alert and
site alert components. Alignment on the alert and site alert components will likely
shift from this change. Confirm that your implementation of the component aligns
as expected.
- Display: [usa-button] Updated the width of unstyled buttons at narrow screen widths.
Now, unstyled buttons receive a width of auto to better match USWDS link styles.
Users should confirm that the variant visually displays as expected in their projects.
- Display: [usa-card] Fixed a bug that caused the component to ignore the
$theme-card-font-family setting. Confirm that your implementation of the card
component displays with the expected font family.
--------------------------------------------------------------------
3.10.0
Release notes: github.com/uswds/uswds/releases/tag/v3.10.0
- Assets: [usa-checkbox] Removed inline style tags from indeterminate checkbox SVGs.
These style tags were unnecessary and caused a conflict with Cypress automated
testing.
✏️ Teams should update the `checkbox-indeterminate.svg` and
`checkbox-indeterminate-alt.svg` files in their projects.
- Accessibility, Markup: [usa-step-indicator] Removed the aria-label from the wrapper
of the step indicator component. This resolves an automated testing error related to
having an invalid attribute on a div element.
✏️ Teams should remove the the `aria-label` from the `.usa-step-indicator` element in
their step indicator markup.
- Accessibility, Markup: [usa-time-picker] Updated the time picker hint text to
improve clarity. This update allows the component to meet the success criteria in
WCAG 3.3.2.
✏️ Teams should replace the words `hh:mm` in the time picker hint text with
`Select a time from the dropdown. Type into the input to filter options.`
--------------------------------------------------------------------
3.11.0
Release notes: github.com/uswds/uswds/releases/tag/v3.11.0
- Assets, Markup: [usa-button, usa-collection, usa-icon-list, usa-file-input,
usa-icon, usa-input-prefix-suffix, usa-modal, usa-pagination]
Replaced deprecated `xlink:href` references with `href`.
✏️ Teams should replace `xlink:href` references with `href`
in their components and pull in the updated `loader.svg` file.
- Accessibility: [usa-file-input] Fixed a bug that prevented screen readers
from announcing the invalid file type error message.
- Accessibility: [usa-footer] Removed `overflow: hidden` from `usa-footer`
to allow the full focus outline to show.
--------------------------------------------------------------------
These are notifications from the USWDS team, not necessarily a
problem with your code.
Disable notifications using `$theme-show-notifications: false`.
--------------------------------------------------------------------
../../../../packages/uswds-core/src/styles/_notifications.scss 222:3 @forward
../../../../packages/uswds-core/src/styles/_index.scss 8:1 @forward
_index.scss 1:1 @forward
_index.scss 2:1 @forward
../../packages/_index.scss 5:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
14 │ @if unit($grid-in-rem) != "rem" {
│ ^^^^^^^^^^^^^^^^^^
╵
../../../../packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss 14:7 rem-to-user-em()
../../../../packages/uswds-core/src/styles/mixins/helpers/at-media.scss 17:12 at-media()
../../../../packages/usa-display/src/styles/_usa-display.scss 7:3 @forward
../../../../packages/usa-display/src/styles/_index.scss 4:1 @forward
_index.scss 5:1 @forward
_index.scss 5:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss
34 │ content: "";
│ ^^^^^^^^^^^ declaration
╵
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/icon.scss
158 │ ┌ @supports (mask: url("")) {
159 │ │ background: none;
160 │ │ background-color: if($color == currentColor, $color, color($color));
161 │ │ mask-image: url("#{$path}/usa-icons/#{$filename-base}.svg"),
162 │ │ linear-gradient(transparent, transparent);
163 │ │ mask-position: $position-x $position-y;
164 │ │ mask-repeat: no-repeat;
165 │ │ mask-size: $width $height;
166 │ │
167 │ │ @if $color-hover {
168 │ │ &:hover {
169 │ │ background-color: color($color-hover);
170 │ │ }
171 │ │ }
172 │ │ }
│ └─── nested rule
╵
../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss 34:5 external-link()
../../../../packages/usa-link/src/styles/_usa-link.scss 12:3 @forward
../../../../packages/usa-link/src/styles/_index.scss 4:1 @forward
_index.scss 6:1 @forward
_index.scss 7:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss
35 │ display: inline;
│ ^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/icon.scss
158 │ ┌ @supports (mask: url("")) {
159 │ │ background: none;
160 │ │ background-color: if($color == currentColor, $color, color($color));
161 │ │ mask-image: url("#{$path}/usa-icons/#{$filename-base}.svg"),
162 │ │ linear-gradient(transparent, transparent);
163 │ │ mask-position: $position-x $position-y;
164 │ │ mask-repeat: no-repeat;
165 │ │ mask-size: $width $height;
166 │ │
167 │ │ @if $color-hover {
168 │ │ &:hover {
169 │ │ background-color: color($color-hover);
170 │ │ }
171 │ │ }
172 │ │ }
│ └─── nested rule
╵
../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss 35:5 external-link()
../../../../packages/usa-link/src/styles/_usa-link.scss 12:3 @forward
../../../../packages/usa-link/src/styles/_index.scss 4:1 @forward
_index.scss 6:1 @forward
_index.scss 7:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss
36 │ margin-top: 0.7ex;
│ ^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/icon.scss
158 │ ┌ @supports (mask: url("")) {
159 │ │ background: none;
160 │ │ background-color: if($color == currentColor, $color, color($color));
161 │ │ mask-image: url("#{$path}/usa-icons/#{$filename-base}.svg"),
162 │ │ linear-gradient(transparent, transparent);
163 │ │ mask-position: $position-x $position-y;
164 │ │ mask-repeat: no-repeat;
165 │ │ mask-size: $width $height;
166 │ │
167 │ │ @if $color-hover {
168 │ │ &:hover {
169 │ │ background-color: color($color-hover);
170 │ │ }
171 │ │ }
172 │ │ }
│ └─── nested rule
╵
../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss 36:5 external-link()
../../../../packages/usa-link/src/styles/_usa-link.scss 12:3 @forward
../../../../packages/usa-link/src/styles/_index.scss 4:1 @forward
_index.scss 6:1 @forward
_index.scss 7:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss
37 │ margin-left: 2px;
│ ^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/icon.scss
158 │ ┌ @supports (mask: url("")) {
159 │ │ background: none;
160 │ │ background-color: if($color == currentColor, $color, color($color));
161 │ │ mask-image: url("#{$path}/usa-icons/#{$filename-base}.svg"),
162 │ │ linear-gradient(transparent, transparent);
163 │ │ mask-position: $position-x $position-y;
164 │ │ mask-repeat: no-repeat;
165 │ │ mask-size: $width $height;
166 │ │
167 │ │ @if $color-hover {
168 │ │ &:hover {
169 │ │ background-color: color($color-hover);
170 │ │ }
171 │ │ }
172 │ │ }
│ └─── nested rule
╵
../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss 37:5 external-link()
../../../../packages/usa-link/src/styles/_usa-link.scss 12:3 @forward
../../../../packages/usa-link/src/styles/_index.scss 4:1 @forward
_index.scss 6:1 @forward
_index.scss 7:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss
38 │ padding-left: 1.75ex;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../packages/uswds-core/src/styles/mixins/general/icon.scss
158 │ ┌ @supports (mask: url("")) {
159 │ │ background: none;
160 │ │ background-color: if($color == currentColor, $color, color($color));
161 │ │ mask-image: url("#{$path}/usa-icons/#{$filename-base}.svg"),
162 │ │ linear-gradient(transparent, transparent);
163 │ │ mask-position: $position-x $position-y;
164 │ │ mask-repeat: no-repeat;
165 │ │ mask-size: $width $height;
166 │ │
167 │ │ @if $color-hover {
168 │ │ &:hover {
169 │ │ background-color: color($color-hover);
170 │ │ }
171 │ │ }
172 │ │ }
│ └─── nested rule
╵
../../../../packages/uswds-core/src/styles/mixins/general/external-link.scss 38:5 external-link()
../../../../packages/usa-link/src/styles/_usa-link.scss 12:3 @forward
../../../../packages/usa-link/src/styles/_index.scss 4:1 @forward
_index.scss 6:1 @forward
_index.scss 7:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.has-key instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
45 │ @if map-has-key($our-breakpoints, $quoted-bp) {
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../../../packages/uswds-core/src/styles/mixins/helpers/at-media.scss 45:7 at-media-max()
../../../../packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 18:5 usa-table-styles()
../../../../packages/usa-prose/src/styles/_usa-prose.scss 8:5 @forward
../../../../packages/usa-prose/src/styles/_index.scss 4:1 @forward
_index.scss 5:1 @forward
_index.scss 10:1 @forward
../../packages/_index.scss 13:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
24 │ $accordion-button-unopen-hc-icon: map-merge(
│ ┌───────────────────────────────────^
25 │ │ $accordion-icon-map-defaults,
26 │ │ (
27 │ │ "name": "add",
28 │ │ )
29 │ │ );
│ └─^
╵
../../../../packages/usa-accordion/src/styles/_usa-accordion.scss 24:35 @forward
usa-accordion/src/_index.scss 1:1 @forward
../../packages/_index.scss 14:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
31 │ $accordion-button-open-hc-icon: map-merge(
│ ┌─────────────────────────────────^
32 │ │ $accordion-icon-map-defaults,
33 │ │ (
34 │ │ "name": "remove",
35 │ │ )
36 │ │ );
│ └─^
╵
../../../../packages/usa-accordion/src/styles/_usa-accordion.scss 31:33 @forward
usa-accordion/src/_index.scss 1:1 @forward
../../packages/_index.scss 14:1 @forward
- 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
24 │ $banner-icon-chevron-up: map-merge(
│ ┌──────────────────────────^
25 │ │ $banner-icon-chevron,
26 │ │ (
27 │ │ "name": "expand_less",
28 │ │ )
29 │ │ );
│ └─^
╵
../../../../packages/usa-banner/src/styles/_usa-banner.scss 24:26 @forward
usa-banner/src/_index.scss 4:1 @forward
../../packages/_index.scss 16:1 @forward
- 1:1 root stylesheet
Warning: 446 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
[14:28:33] Finished 'compileSass' after 3.87 s
[14:28:33] Finished 'default' after 5.95 sMy understanding so far is we should be testing:
- If SCSS compile is successful
- Users should be able to pull
dist/scssdirectory and it should compile correctly out-of-the-box - Using
@import "uswds"shouldn't fail, but since it's deprecated it doesn't make sense to test?
Contributor
Author
|
@mejiaj Thanks for the insight! Here's an explanation for each. 1. Breaking changeI think a changelog item on the Documentation page might be an appropriate place to mark this change since that is where the guidance on Package download and Sass compilation live. 2. Problem statementPathing issueWith the current dist package structure, when you try to compile the sass --load-path=src/assets/packages/ src/assets/dist/scss/stylesheets/uswds.scss dist/css/test.css
Error: Can't find stylesheet to import.
╷
1 │ @forward "../../packages/uswds";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/dist/scss/stylesheets/uswds.scss 1:1 root stylesheetI've updated the PR description to include this error message
|
Contributor
|
@mahoneycm thanks for clarifying.
That was essentially my question. Does testing deprecated Any improvements we can make to clarity are always good. I'd start small and focus inside the tests themselves before renaming files. |
mahoneycm
commented
Feb 24, 2025
Contributor
Author
There was a problem hiding this comment.
question: I noticed this util.js file is only used for our build unit tests. I'm curious if it would make sense to move it to the /src/test directory since it's not needed by uswds-core
Contributor
Author
|
@mejiaj Changing to |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Updates compiled Sass directory to correctly point to
packagesdirectory that holds component styles.This organization matches our
/srcdirectory and allows the Sass to be used as instructed in the Install the package directly from GitHub guidance.Breaking change
While the file structure is changed, the current structure fails to point to the right packages directory, which causes Sass compilation errors.
It’s possible users have made changed their file structure to resolve this locally.
Related issue
Closes #6414
Closes #6287
Related pull requests
Related to #6417. Neither PR should block each other.
Preview link
Preview link →
Problem statement
Current sass output does not have the correct pathing to point to
packages. Following our Install the package directly from GitHub guidance, users are likely to run into pathing issues.Our unit test to check that users can use
@import "uswds"is also non-functional. This test should confirm the Sass structure is correct.Solution
packagesdir:renderSyncwith moderncompileandcompileStringfunctionsinclude.spec.jsto properly build output Sass directory and confirm Sass is usable.Major changes
uswds.scssproperly points to packages dir when installed vianpmor downloading directly from GHincludeTeststest script intest.jsnpm run test:sassIncludescript@forwardinstead of@importTesting and review
/distdirectorynpm run test:sassInclude/distdirectory is rebuilt@forward "uswds"in either test ininclude.spec.js