Visitar URL original
USWDS-Sandbox - Test: USWDS custom breakpoints feature by mejiaj · Pull Request #148 · uswds/uswds-sandbox · GitHub
Skip to content

USWDS-Sandbox - Test: USWDS custom breakpoints feature - #148

Closed
mejiaj wants to merge 2 commits into
mainfrom
test-uswds-breakpoints-5985
Closed

USWDS-Sandbox - Test: USWDS custom breakpoints feature#148
mejiaj wants to merge 2 commits into
mainfrom
test-uswds-breakpoints-5985

Conversation

@mejiaj

@mejiaj mejiaj commented Aug 27, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Testing uswds/uswds#5985.

Testing

Using REM

This builds fine without issues.

Input

@use "uswds-core" with (
  $theme-show-compile-warnings: false,
  $theme-show-notifications: false,
  $theme-utility-breakpoints-custom: (
    // 3840px
    "custom-widescreen-lg": 240rem,
  )
);

Output

@media all and (min-width: 240em) {
  .custom-widescreen-lg\:border-1px {
    border: 1px solid;
  }

  .custom-widescreen-lg\:hover\:border-1px:hover {
    border: 1px solid;
  }

  // etc…
}
Using pixels (error)

Input

@use "uswds-core" with (
  $theme-show-compile-warnings: false,
  $theme-show-notifications: false,
  $theme-utility-breakpoints-custom: (
    // Doesn't work with unitless `3840` either.
    "custom-widescreen-lg": 3840px,
  )
);

Output

Compiling with USWDS 3.8.1
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss
Error: 3840px*em/rem isn't a valid CSS value.
   ╷
19 │     @media all and (min-width: #{$bp}) {
   │                                  ^^^
   ╵
  node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss 19:34  at-media()
  uswds-core/src/styles/mixins/_utility-builder.scss 363:7                                     render-utilities-in()
  uswds-utilities/src/_index.scss 11:1                                                         @forward
  _index.scss 55:1                                                                             @forward
  src/_styles/styles.scss 2:1
Using EM (error) 

Compiling with USWDS 3.8.1
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss
Error: 240em*em/rem isn't a valid CSS value.
   ╷
19 │     @media all and (min-width: #{$bp}) {
   │                                  ^^^

CSS compilation size

File Before After
styles.min.css 524KB 578KB
styles.css 755KB 826KB

@mejiaj mejiaj closed this Sep 23, 2024
@mejiaj

mejiaj commented Sep 23, 2024

Copy link
Copy Markdown
Contributor Author

Closing because a new PR [uswds/uswds#6048] has been opened in favor of this work.

@mejiaj
mejiaj deleted the test-uswds-breakpoints-5985 branch September 23, 2024 18:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@mejiaj