Rename all.scss to uswds.scss; add version comment by shawnbot · Pull Request #1530 · uswds/uswds

shawnbot · 2016-10-19T19:20:59Z

Sass entrypoint: `uswds`

This PR renames src/stylesheets/all.scss to uswds.scss, which fixes #1417 by making it possible to import in Sass by adding the src/stylesheets directory to their include path and importing it with:

@import 'uswds';

For users of the existing all.scss, I've included a fallback _all.scss that prevents breakage for users of the old Sass entrypoint via @import 'all';.

CSS version comment

I've also included a fix for #1529 in the form of a CSS comment at the top of both the un-minified and minified CSS files that looks like this:

/*! uswds v0.13.1 */

where 0.13.1 will be whatever our version field specifies in package.json. I've placed this comment at the top of our uswds.scss file, so any users who import this file will get the comment in their CSS, which can help us debug future issues in user-generated CSS.

ℹ️ The ! is a convention that suggests minifiers preserve the comment, and ensures that it isn't stripped in uswds.min.css.

Tests!

There are tests for all of this:

The "sass/build" tests confirm that running gulp build generates the expected uswds.css and uswds.min.css files, and that both of them contain the expected version string.

⚠️ This slows down the tests because we're shelling out to gulp build (which is "wasting" time also building the JavaScript), but I think that it's worth it. We may need to play with the 15-second timeout a bit if the build ends up taking longer on CI than on my computer.
The "sass/include" tests confirm that rendering raw Sass that imports either uswds or all from our include path doesn't generate an error.

juliasolorzano · 2016-10-19T19:27:31Z

@shawnbot a few things:

We need to update our documentation to state that we are making this change: https://github.com/18F/web-design-standards/blob/staging/README.md
Let's open a PR in https://github.com/18F/web-design-standards-docs that correlates with this change so that we don't run into any breakage on the site (e.g. gulp tasks)

shawnbot · 2016-10-19T19:47:34Z

Yes, agreed! The docs state in this file that:
The main Sass (SCSS) source file is here:
```
node_modules/uswds/src/stylesheets/all.scss
```
And this just needs to be changed to say uswds.scss.
I've tested it locally, and it doesn't require a change because of the _all.scss fallback. But yes, we should point it at the right file. 😄

shawnbot · 2016-10-20T21:26:35Z

Okay, so I've got some updates locally that add a version comment (fixing #1529) to the generated CSS, as well as some tests to confirm that the build process is generating the right files and including the version comment in each. I'll update the description accordingly.

~~I can't push these because it looks like United is blocking whatever port git uses, so for now I'm marking this as WIP.~~

shawnbot · 2016-10-20T21:38:56Z

Okay, ready for your review, @juliaelman! I think we can handle the documentation updates separately once this is merged.

juliasolorzano

Looks fantastic! Just a few typos and we're gtg.

juliasolorzano · 2016-10-27T15:05:33Z

+
+describe('build output', function () {
+
+  it('generates CSS at dist/css/uwsds.css', function () {


s uwsds.css/uswds.css

juliasolorzano · 2016-10-27T15:06:25Z

+    );
+  });
+
+  it('generates minified CSS at dist/css/uwsds.min.css', function () {


s uwsds.css/uswds.css

Refactor all variables as defaults

shawnbot · 2016-10-27T18:33:19Z

Okay, fixed those typos @juliaelman! 😬

juliasolorzano · 2016-10-27T18:47:53Z

🚀

rename all.scss to uswds.scss

871abcd

Shawn Allen added 5 commits October 20, 2016 16:54

ignore all npm debug logs

5485162

add version placeholder to uswds.scss

cfc9076

replace @Version placeholder w/package.version

abb0357

add tests to confirm that sass @imports work

0dd0f70

add tests to confirm that CSS files are output

19ac21b

shawnbot changed the title ~~Rename all.scss to uswds.scss~~ [WIP] Rename all.scss to uswds.scss Oct 20, 2016

Shawn Allen added 3 commits October 20, 2016 17:11

add version comment to minified css

04dbbdc

add test for version comment in minified css

1a59559

add "!" to preserve version comment

5a2c682

shawnbot changed the title ~~[WIP] Rename all.scss to uswds.scss~~ [WIP] Rename all.scss to uswds.scss; add version comment Oct 20, 2016

rename containsVersion() -> checkVersion()

e06c1e3

shawnbot changed the title ~~[WIP] Rename all.scss to uswds.scss; add version comment~~ Rename all.scss to uswds.scss; add version comment Oct 20, 2016

shawnbot assigned juliasolorzano Oct 20, 2016

shawnbot mentioned this pull request Oct 24, 2016

Eliminate SCSS variable duplication #1535

Closed

Shawn Allen added 6 commits October 24, 2016 14:52

import _variables instead of _defaults

3a08653

depreceate _defaults.scss

668e21c

convert all variables to defaults

9798a52

nix grid-settings import

ac8acc6

move grid settings to _variables

ffef7da

deprecate grid-settings

6a87368

This was referenced Oct 24, 2016

Refactor all variables as defaults #1536

Merged

Update README to better accommodate Windows implementation #1539

Merged

juliasolorzano suggested changes Oct 27, 2016

View reviewed changes

Julia Elman and others added 2 commits October 27, 2016 11:17

Merge pull request #1536 from 18F/refactor-variables

2bb6792

Refactor all variables as defaults

fix uswds typos

784bf6c

juliasolorzano approved these changes Oct 27, 2016

View reviewed changes

juliasolorzano merged commit abd3d1a into staging Oct 27, 2016

shawnbot deleted the rename-scss branch October 27, 2016 19:33

This was referenced Oct 27, 2016

[Sass] Easier use with node-sass include paths #1417

Closed

Identify version in CSS comments #1529

Closed

donjo unassigned juliasolorzano Jan 22, 2018

mahoneycm mentioned this pull request Jan 30, 2025

USWDS - Unit Tests: Build and Include unit tests are not being ran. #6294

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rename all.scss to uswds.scss; add version comment#1530

Rename all.scss to uswds.scss; add version comment#1530
juliasolorzano merged 18 commits into
stagingfrom
rename-scss

shawnbot commented Oct 19, 2016 •

edited

Loading

Uh oh!

juliasolorzano commented Oct 19, 2016

Uh oh!

shawnbot commented Oct 19, 2016

Uh oh!

shawnbot commented Oct 20, 2016 •

edited

Loading

Uh oh!

shawnbot commented Oct 20, 2016

Uh oh!

juliasolorzano left a comment

Uh oh!

juliasolorzano Oct 27, 2016

Uh oh!

juliasolorzano Oct 27, 2016

Uh oh!

shawnbot Oct 27, 2016

Uh oh!

shawnbot commented Oct 27, 2016

Uh oh!

juliasolorzano commented Oct 27, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		describe('build output', function () {

		it('generates CSS at dist/css/uwsds.css', function () {

Uh oh!

Conversation

shawnbot commented Oct 19, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sass entrypoint: uswds

CSS version comment

Tests!

Uh oh!

juliasolorzano commented Oct 19, 2016

Uh oh!

shawnbot commented Oct 19, 2016

Uh oh!

shawnbot commented Oct 20, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shawnbot commented Oct 20, 2016

Uh oh!

juliasolorzano left a comment

Choose a reason for hiding this comment

Uh oh!

juliasolorzano Oct 27, 2016

Choose a reason for hiding this comment

Uh oh!

juliasolorzano Oct 27, 2016

Choose a reason for hiding this comment

Uh oh!

shawnbot Oct 27, 2016

Choose a reason for hiding this comment

Uh oh!

shawnbot commented Oct 27, 2016

Uh oh!

juliasolorzano commented Oct 27, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shawnbot commented Oct 19, 2016 •

edited

Loading

Sass entrypoint: `uswds`

shawnbot commented Oct 20, 2016 •

edited

Loading