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
Changes from all commits
55bada1
c8d0ad1
d492148
235dfa1
eabb79f
392919a
1a721a2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. was this an int vs float issue? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
} | ||
}), | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
YESSSSSS 🔥 🔥 🔥