diff --git a/README.md b/README.md index a969db7..83bfe71 100644 --- a/README.md +++ b/README.md @@ -96,12 +96,12 @@ Use path settings to customize where USWDS Compile looks for USWDS source and ou ### Additional settings -| Setting | Default | Description | -| --------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `sprite.projectIconsOnly` | `false` | Include _only_ the icons in `paths.src.projectIcons` in the icon sprite. | -| `settings.compile.browserslist` | `["> 2%", "last 2 versions", "IE 11", "not dead"]` | Define the [browserslist query](https://github.com/browserslist/browserslist?tab=readme-ov-file#queries) for CSS prefixes generated by [autoprefixer](https://github.com/postcss/autoprefixer). | -| `settings.compile.sassSourcemaps` | `true` | Include sourcemap when compiling SASS to CSS. | -| `settings.compile.sassDeprecationWarnings` | `false` | Show USWDS Sass deprecation warnings. When set to `true`, Sass will output deprecation warnings for USWDS code in the terminal during compilation. Deprecation warnings for non-USWDS Sass will output even when this value is set to `false`. | +| Setting | Default | Description | +| --------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `sprite.projectIconsOnly` | `false` | Include _only_ the icons in `paths.src.projectIcons` in the icon sprite. | +| `settings.compile.browserslist` | `["> 2%", "last 2 versions", "IE 11", "not dead"]` | Define the [browserslist query](https://github.com/browserslist/browserslist?tab=readme-ov-file#queries) for CSS prefixes generated by [autoprefixer](https://github.com/postcss/autoprefixer). | +| `settings.compile.sassSourcemaps` | `true` | Include sourcemap when compiling SASS to CSS. | +| `settings.compile.sassOptions` | `{quietDeps: true, style: "compressed"}` | Configure [sass-embedded options](https://sass-lang.com/documentation/js-api/interfaces/options/). By default SASS deprecation warnings arising from USWDS source are hidden and output CSS is minified. These options can be overridden and additional options specified. When `loadPaths` is defined, the paths are appended to those necessary for USWDS compilation. The `watch` script will also watch these directories for changes. | ### Functions diff --git a/gulpfile.js b/gulpfile.js index 027c5e2..eb3dba4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -68,7 +68,19 @@ let settings = { }, browserslist: ["> 2%", "last 2 versions", "IE 11", "not dead"], sassSourcemaps: true, - sassDeprecationWarnings: false, + /** + * @type {boolean | undefined} + * @deprecated Set `sassOptions.quietDeps` instead. */ + sassDeprecationWarnings: undefined, + /** + * @type {import('sass-embedded').Options<"async">} + * @default + * { + * quietDeps: true, + * style: "compressed" + * } + */ + sassOptions: {}, }, sprite: { width: 24, @@ -190,7 +202,9 @@ function buildSass() { grid: true, overrideBrowserslist: settings.compile.browserslist, }), - csso({ forceMediaMerge: false }), + ...(settings.compile.sassOptions.style === "expanded" + ? [] + : [csso({ forceMediaMerge: false })]), ], includes: [ // 1. local theme files @@ -209,9 +223,16 @@ function buildSass() { }) .pipe( sass({ - outputStyle: "compressed", - includePaths: buildSettings.includes, - quietDeps: !settings.compile.sassDeprecationWarnings, + style: "compressed", + ...settings.compile.sassOptions, + loadPaths: [ + ...buildSettings.includes, + ...(settings.compile.sassOptions.loadPaths ?? []), + ], + quietDeps: + settings.compile.sassDeprecationWarnings !== undefined + ? !settings.compile.sassDeprecationWarnings + : settings.compile.sassOptions.quietDeps ?? true, }).on("error", handleError) ) .pipe(replace(/\buswds @version\b/g, `based on uswds v${pkg}`)) @@ -228,6 +249,9 @@ function watchSass() { [ `${paths.dist.theme}/**/*.scss`.replace("//", "/"), `${paths.src.projectSass}/**/*.scss`.replace("//", "/"), + ...(settings.compile.sassOptions.loadPaths ?? []).map((loadPath) => + `${loadPath}/**/*.scss`.replace("//", "/") + ), ], buildSass ); diff --git a/package-lock.json b/package-lock.json index 0fd06b9..b084ba1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "gulp-postcss": "9.0.1", "gulp-rename": "2.0.0", "gulp-replace": "1.1.4", - "gulp-sass": "5.1.0", + "gulp-sass": "6.0.1", "gulp-svgstore": "9.0.0", "postcss": "8.5.2", "postcss-csso": "6.0.1", @@ -1260,9 +1260,9 @@ } }, "node_modules/gulp-sass": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.1.0.tgz", - "integrity": "sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-6.0.1.tgz", + "integrity": "sha512-4wonidxB8lGPHvahelpGavUBJAuERSl+OIVxPCyQthK4lSJhZ/u3/qjFcyAtnMIXDl6fXTn34H4BXsN7gt54kQ==", "license": "MIT", "dependencies": { "lodash.clonedeep": "^4.5.0", diff --git a/package.json b/package.json index c921068..6e15ad0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "gulp-postcss": "9.0.1", "gulp-rename": "2.0.0", "gulp-replace": "1.1.4", - "gulp-sass": "5.1.0", + "gulp-sass": "6.0.1", "gulp-svgstore": "9.0.0", "postcss": "8.5.2", "postcss-csso": "6.0.1",