Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace sassc-rails with cssbundling-rails + sass #5862

Merged
merged 7 commits into from Jan 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -84,6 +84,8 @@ saml_*.key
/kitchen/data_bags/config/databag_secrets.json
/public/assets
/public/packs
/app/assets/builds/*
!/app/assets/builds/.keep
**/node_modules
yarn-debug.log*
yarn-error.log*
Expand Down
2 changes: 1 addition & 1 deletion Gemfile
Expand Up @@ -16,6 +16,7 @@ gem 'blueprinter', '~> 0.25.3'
gem 'bootsnap', '~> 1.9.0', require: false
gem 'browser'
gem 'connection_pool'
gem 'cssbundling-rails'
gem 'devise', '~> 4.8'
gem 'dotiw', '>= 4.0.1'
gem 'faraday'
Expand Down Expand Up @@ -55,7 +56,6 @@ gem 'ruby-progressbar'
gem 'ruby-saml'
gem 'safe_target_blank', '>= 1.0.2'
gem 'saml_idp', github: '18F/saml_idp', tag: '0.15.0-18f'
gem 'sassc-rails', '~> 2.1.2'
gem 'scrypt'
gem 'secure_headers', '~> 6.3'
gem 'simple_form', '>= 5.0.2'
Expand Down
13 changes: 3 additions & 10 deletions Gemfile.lock
Expand Up @@ -220,6 +220,8 @@ GEM
crass (1.0.6)
css_parser (1.11.0)
addressable
cssbundling-rails (1.0.0)
railties (>= 6.0.0)
debug_inspector (1.1.0)
derailed_benchmarks (1.8.1)
benchmark-ips (~> 2)
Expand Down Expand Up @@ -572,14 +574,6 @@ GEM
errbase (>= 0.1.1)
safety_net_attestation (0.4.0)
jwt (~> 2.0)
sassc (2.4.0)
ffi (~> 1.9)
Comment on lines -575 to -576
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

YESSSSSS 🔥 🔥 🔥

sassc-rails (2.1.2)
railties (>= 4.0.0)
sassc (>= 2.0)
sprockets (> 3.0)
sprockets-rails
tilt
sawyer (0.8.2)
addressable (>= 2.3.5)
faraday (> 0.8, < 2.0)
Expand Down Expand Up @@ -625,7 +619,6 @@ GEM
unicode-display_width (>= 1.1.1, < 3)
thor (1.2.1)
thread_safe (0.3.6)
tilt (2.0.10)
tpm-key_attestation (0.10.0)
bindata (~> 2.4)
openssl-signature_algorithm (~> 1.0)
Expand Down Expand Up @@ -715,6 +708,7 @@ DEPENDENCIES
capybara-screenshot (>= 1.0.23)
capybara-selenium (>= 0.0.6)
connection_pool
cssbundling-rails
derailed_benchmarks (~> 1.8)
devise (~> 4.8)
dotiw (>= 4.0.1)
Expand Down Expand Up @@ -782,7 +776,6 @@ DEPENDENCIES
ruby-saml
safe_target_blank (>= 1.0.2)
saml_idp!
sassc-rails (~> 2.1.2)
scrypt
secure_headers (~> 6.3)
shoulda-matchers (~> 4.0)
Expand Down
3 changes: 2 additions & 1 deletion Procfile
@@ -1,4 +1,5 @@
web: WEBPACK_PORT=${WEBPACK_PORT:-3035} bundle exec rackup config.ru --port ${PORT:-3000} --host ${FOREMAN_HOST:-${HOST:-localhost}}
worker: bundle exec good_job start
mailcatcher: mailcatcher -f
js: WEBPACK_PORT=${WEBPACK_PORT:-3035} yarn webpack $([ -n "$HTTPS" ] && echo "--watch" || echo "serve")
js: WEBPACK_PORT=${WEBPACK_PORT:-3035} yarn webpack $([ -n "$HTTPS" ] && echo "--watch" || echo "serve")
css: yarn build:css --watch
Empty file added app/assets/builds/.keep
Empty file.
4 changes: 1 addition & 3 deletions app/assets/config/manifest.js
@@ -1,9 +1,6 @@
//= link_tree ../images
//= link application.js
//= link application.css
//= link document-capture.css

//= link email.css
//= link es5-shim.min.js
//= link html5shiv.js
//= link respond.min.js
Expand All @@ -13,3 +10,4 @@

//= link_tree ../../../node_modules/identity-style-guide/dist/assets/img
//= link_tree ../../../node_modules/identity-style-guide/dist/assets/fonts
//= link_tree ../builds
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/_file-input.scss
Expand Up @@ -50,7 +50,7 @@
line-height: 1.5;
// For content to appear as vertically centered, offset the larger line-height of the banner to
// match the space below the drag text.
margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) / 2;
margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) * 0.5;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this an int vs float issue?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slash as division is deprecated in Sass, so this is just to avoid noisy deprecation messages.

https://sass-lang.com/documentation/breaking-changes/slash-div

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we're on Dart Sass, we could alternatively swap it with the new math module function, as in d492148.

text-transform: uppercase;

+ .usa-file-input__drag-text {
Expand Down
10 changes: 5 additions & 5 deletions app/assets/stylesheets/components/_icon.scss
Expand Up @@ -10,19 +10,19 @@
}

&.ico-copy::before {
background-image: url(image-path('ico-copy.svg'));
background-image: url('ico-copy.svg');
}

&.ico-download::before {
background-image: url(image-path('ico-download.svg'));
background-image: url('ico-download.svg');
}

&.ico-refresh::before {
background-image: url(image-path('ico-refresh.svg'));
background-image: url('ico-refresh.svg');
}

&.ico-print::before {
background-image: url(image-path('ico-print.svg'));
background-image: url('ico-print.svg');
}
}

Expand All @@ -33,7 +33,7 @@

&-success {
&::before {
background-image: url(image-path('alert/success.svg'));
background-image: url('alert/success.svg');
content: '';
display: block;
height: $h4;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/_list.scss
Expand Up @@ -31,7 +31,7 @@
padding: 1rem 1rem 1rem 0;

&::before {
background-image: url(image-path('alert/success.svg'));
background-image: url('alert/success.svg');
background-repeat: no-repeat;
content: '';
display: inline-block;
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/components/_modal.scss
Expand Up @@ -53,7 +53,7 @@
position: relative;

&.key-badge::before {
background-image: url(image-path('p-key.svg'));
background-image: url('p-key.svg');
background-repeat: no-repeat;
content: '';
height: 60px;
Expand Down Expand Up @@ -88,7 +88,7 @@

.modal-timeout {
&::before {
background-image: url(image-path('clock.svg'));
background-image: url('clock.svg');
}

hr {
Expand All @@ -98,7 +98,7 @@

.modal-warning {
&::before {
background-image: url(image-path('alert/warning-lg.svg'));
background-image: url('alert/warning-lg.svg');
}

hr {
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/components/_personal-key.scss
@@ -1,5 +1,5 @@
.key-badge::before {
background-image: url(image-path('p-key.svg'));
background-image: url('p-key.svg');
background-repeat: no-repeat;
content: '';
height: 60px;
Expand Down Expand Up @@ -39,13 +39,13 @@

.bg-pk-box {
background-color: $blue-lightest;
background-image: image-url('personal-key/pkey-block.svg');
background-image: url('personal-key/pkey-block.svg');
background-position: center;
background-repeat: no-repeat;
}

.bg-personal-key {
background: image-url('personal-key/shield.svg');
background: url('personal-key/shield.svg');
background-color: $blue-lightest;
background-position: center 3.3rem;
background-repeat: no-repeat;
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/components/_phone-input.scss
Expand Up @@ -6,11 +6,11 @@ lg-phone-input {
}

.iti__flag {
background-image: image-url('intl-tel-input/build/img/flags.png');
background-image: url('intl-tel-input/build/img/flags.png');

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: image-url('intl-tel-input/build/img/flags@2x.png');
background-image: url('intl-tel-input/build/img/flags@2x.png');
}
}

Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/components/_step-indicator.scss
Expand Up @@ -107,19 +107,19 @@ $step-indicator-pending-color: #a8b6c6;

.step-indicator__step--complete:not(.step-indicator__step--pending)::before {
background-color: color('white');
background-image: url(image-path('alert/success.svg'));
background-image: url('alert/success.svg');
}

.step-indicator__step--pending::before {
background-image: url(image-path('alert/pending.svg'));
background-image: url('alert/pending.svg');
}

.step-indicator__step:not(:last-child)::after {
background-color: color('base-lighter');
content: '';
height: $step-indicator-line-height;
left: calc(50% + 0.5rem + #{$step-indicator-line-height});
margin-top: -$step-indicator-line-height / 2;
margin-top: -0.5 * $step-indicator-line-height;
position: absolute;
top: 0.5rem;
width: calc(100% - 1rem - #{$step-indicator-line-height * 2});
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/email.css.scss
@@ -1,6 +1,6 @@
@import 'variables/colors';
@import 'variables/email';
@import 'foundation-emails';
@import 'foundation-emails/scss/foundation-emails';

.gray {
&:active,
Expand Down
31 changes: 31 additions & 0 deletions app/javascript/packages/build-sass/cli.js
@@ -0,0 +1,31 @@
#!/usr/bin/env node

import { watch } from 'chokidar';
import { fileURLToPath } from 'url';
import { buildFile } from './index.js';

/** @typedef {import('sass').Options<'sync'>} SyncSassOptions */
/** @typedef {import('./').BuildOptions} BuildOptions */

const env = process.env.NODE_ENV || process.env.RAILS_ENV || 'development';
const isProduction = env === 'production';

const args = process.argv.slice(2);
const files = args.filter((arg) => !arg.startsWith('-'));
const flags = args.filter((arg) => arg.startsWith('-'));

const isWatching = flags.includes('--watch');
const outDir = flags.find((flag) => flag.startsWith('--out-dir='))?.slice(10);

/** @type {BuildOptions & SyncSassOptions} */
const options = { outDir, style: isProduction ? 'compressed' : 'expanded' };

Promise.all(
files.map(async (file) => {
const { loadedUrls } = await buildFile(file, options);
if (isWatching) {
const loadedPaths = loadedUrls.map(fileURLToPath);
watch(loadedPaths).on('change', () => buildFile(file, options));
}
}),
);
38 changes: 38 additions & 0 deletions app/javascript/packages/build-sass/index.js
@@ -0,0 +1,38 @@
import { basename, join } from 'path';
import { writeFile } from 'fs/promises';
import sass from 'sass';

/** @typedef {import('sass').CompileResult} CompileResult */
/** @typedef {import('sass').Options<'sync'>} SyncSassOptions */

/**
* @typedef BuildOptions
*
* @prop {string=} outDir Output directory.
*/

/**
* Compiles a given Sass file.
*
* @param {string} file File to build.
* @param {BuildOptions & SyncSassOptions} options Build options.
*
* @return {Promise<CompileResult>}
*/
export async function buildFile(file, options) {
const { outDir, ...sassOptions } = options;
const compileResult = sass.compile(file, {
...sassOptions,
loadPaths: ['node_modules'],
quietDeps: true,
});

let outFile = basename(file, '.scss');
if (outDir) {
outFile = join(outDir, outFile);
}

await writeFile(outFile, compileResult.css);

return compileResult;
}
13 changes: 13 additions & 0 deletions app/javascript/packages/build-sass/package.json
@@ -0,0 +1,13 @@
{
"name": "@18f/identity-build-sass",
"private": true,
"version": "1.0.0",
"type": "module",
"bin": {
"build-sass": "./cli.js"
},
"dependencies": {
"chokidar": "^3.5.3",
"sass": "^1.49.0"
}
}
@@ -1,10 +1,12 @@
@use 'sass:math';

.document-capture-acuant-capture {
max-width: 375px;

%pad-common-id-card {
display: block;
// 2.125" x 3.375" are common standard ID dimensions
padding-bottom: ((2.125 / 3.375) * 100) + unquote('%');
padding-bottom: (math.div(2.125, 3.375) * 100) + unquote('%');
}

.usa-file-input:not(.usa-file-input--has-value) {
Expand Down
1 change: 1 addition & 0 deletions config/application.rb
Expand Up @@ -45,6 +45,7 @@ class Application < Rails::Application
config.active_record.belongs_to_required_by_default = false
config.active_record.legacy_connection_handling = false
config.assets.unknown_asset_fallback = true
config.assets.resolve_assets_in_css_urls = true
config.active_job.queue_adapter = :good_job

FileUtils.mkdir_p(Rails.root.join('log'))
Expand Down
4 changes: 3 additions & 1 deletion package.json
Expand Up @@ -16,7 +16,8 @@
"normalize-yaml": "normalize-yaml",
"clean": "rm -rf public/packs/*",
"prebuild": "yarn run clean",
"build": "webpack"
"build": "webpack",
"build:css": "build-sass app/assets/stylesheets/*.css.scss --out-dir=app/assets/builds"
},
"dependencies": {
"@babel/core": "^7.15.5",
Expand All @@ -31,6 +32,7 @@
"core-js": "^3.20.2",
"fast-glob": "^3.2.7",
"focus-trap": "^6.7.1",
"foundation-emails": "^2.3.1",
"identity-style-guide": "^6.3.0",
"intl-tel-input": "^17.0.8",
"react": "^17.0.2",
Expand Down