Load utility classes after components (#212)

* Load utility classes after components

**Why**: To match USWDS intended load order of stylesheets, to allow utility classes to take precedent over component styles, and to facilitate a potential future use of USWDS 2.11.0 package subsetting.

* Use symlink to point to uswds dependency for src files

**Why**: Avoid changing file structure for built output, while retaining the ability to point to dependency source in development in a way that's compatible with the copied dependency in the build distributable. Also, nicer paths.

* Ignore USWDS files for lint

* Run copy-scss tasks in series

**Why**: Guarantee USWDS always takes precedent over symlink

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Reduce the border width of the normal outline button to the intended width of `1px` (previously `2px`). The big variant of the outline button is unaffected by this change, and remains `2px`.
 - Fix rounded corners on sidebar current page item.
 - Fix unintentional rounded corners on search text field.
+- Fix utility classes not always applying as expected when applied to components. For example, using `margin-` utility classes on an unstyled button would previously unexpectedly conflict with and not take precedent over the button's own margins.
 
 ## 5.0.3
 

gulpfile.js

@@ -10,7 +10,6 @@ const gulpif = require('gulp-if');
 const sass = require('gulp-sass');
 const gulpStylelint = require('gulp-stylelint');
 const sourcemaps = require('gulp-sourcemaps');
-const uswds = require('uswds-gulp/config/uswds');
 const browserify = require('browserify');
 const babel = require('gulp-babel');
 const source = require('vinyl-source-stream');
@@ -99,7 +98,7 @@ gulp.task('build-js', () => {
 gulp.task('watch-js', () => gulp.watch(`${PROJECT_JS_SRC}/**/*.js`, gulp.series('build-js')));
 
 gulp.task('lint-sass', () =>
-  gulp.src(`${PROJECT_SASS_SRC}/**/*.scss`).pipe(
+  gulp.src([`${PROJECT_SASS_SRC}/**/*.scss`, `!${PROJECT_SASS_SRC}/uswds/**/*.scss`]).pipe(
     gulpStylelint({
       failAfterError: true,
       reporters: [{ formatter: 'string', console: true }],
@@ -122,11 +121,7 @@ gulp.task('build-sass', () => {
     .src([`${PROJECT_SASS_SRC}/*.scss`])
     .pipe(replace(/\buswds @version\b/g, `uswds v${uswdsPkg.version}`))
     .pipe(sourcemaps.init({ largeFile: true }))
-    .pipe(
-      sass({
-        includePaths: [PROJECT_SASS_SRC, `${uswds}/scss`, `${uswds}/scss/packages`],
-      }).on('error', notificationOptions.handler),
-    )
+    .pipe(sass().on('error', notificationOptions.handler))
     .pipe(postcss(plugins))
     .pipe(gulp.dest(CSS_DEST))
     .pipe(notify(notificationOptions.success));
@@ -146,21 +141,20 @@ const underscorePrefix = () => gulpif((f) => f.basename[0] !== '_', rename({ pre
 gulp.task('copy-login-scss', () =>
   gulp
     .src([`${PROJECT_SASS_SRC}/**/*.scss`])
-    .pipe(replace("@import 'uswds'", "@import 'uswds/uswds'"))
     .pipe(replaceUrls())
     .pipe(underscorePrefix())
     .pipe(gulp.dest(SCSS_DEST)),
 );
 
 gulp.task('copy-uswds-scss', () =>
   gulp
-    .src([`${uswds}/scss/**/*.scss`])
+    .src(['node_modules/uswds/dist/scss/**/*.scss'])
     .pipe(replaceUrls())
     .pipe(underscorePrefix())
     .pipe(gulp.dest(`${SCSS_DEST}/uswds`)),
 );
 
-gulp.task('copy-scss', gulp.parallel('copy-login-scss', 'copy-uswds-scss'));
+gulp.task('copy-scss', gulp.series('copy-login-scss', 'copy-uswds-scss'));
 
 gulp.task('lint', gulp.parallel('lint-js', 'lint-sass'));
 

package.json

@@ -100,7 +100,6 @@
     "serve": "^11.3.2",
     "stylelint": "^13.7.2",
     "stylelint-scss": "^3.18.0",
-    "uswds-gulp": "github:uswds/uswds-gulp",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "wait-on": "^5.3.0",

src/scss/styles.scss

@@ -8,7 +8,9 @@
 @import 'uswds-theme/utilities';
 @import 'uswds-theme/components';
 
-@import 'uswds';
+@import 'uswds/packages/required';
+@import 'uswds/packages/global';
+@import 'uswds/packages/uswds-components';
 
 @import 'functions/focus';
 
@@ -27,3 +29,5 @@
 @import 'components/spinner';
 @import 'components/typography';
 @import 'components/verification-badge';
+
+@import 'uswds/packages/uswds-utilities';

src/scss/uswds

@@ -0,0 +1 @@
+../../node_modules/uswds/dist/scss