Skip to content

Commit bc77cf2

Browse files
chrisspieglchrisspiegl
committed
fix: sass compiler to be more modern, performant, and with less console errors.
1 parent 1d4d62b commit bc77cf2

File tree

7 files changed

+76
-71
lines changed

7 files changed

+76
-71
lines changed

‎assets/scss/_footer.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables" as vars;
2+
13
footer {
24
grid-area: foot;
35
font-size: var(--font-size-minus-3);
@@ -15,7 +17,7 @@ footer {
1517
grid-template-columns: 3fr 1fr;
1618
padding-bottom: 2rem;
1719

18-
@media screen and (max-width: $break-mobile) {
20+
@media screen and (max-width: vars.$break-mobile) {
1921
grid-template-columns: 1fr;
2022
}
2123
}

‎assets/scss/_gear-list.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables" as vars;
2+
13
.gear-list {
24
max-width: calc(3*var(--content-width));
35
width: 100%;
@@ -9,7 +11,7 @@
911
justify-items: center;
1012
padding: 2rem 1rem;
1113
margin: auto;
12-
@media screen and (max-width: $break-mobile) {
14+
@media screen and (max-width: vars.$break-mobile) {
1315
display: block;
1416
width: 100%;
1517
}
@@ -25,7 +27,7 @@
2527
position: relative;
2628
padding: .5rem;
2729
text-align: justify;
28-
@media screen and (max-width: $break-mobile) {
30+
@media screen and (max-width: vars.$break-mobile) {
2931
display: block;
3032
width: 100%;
3133
}

‎assets/scss/_header.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables" as vars;
2+
13
body>header {
24
padding-top: 2rem;
35
padding-bottom: 2rem;
@@ -8,7 +10,7 @@ body>header {
810
align-items: center;
911
padding-bottom: 2rem;
1012

11-
@media screen and (max-width: calc($break-mobile + 200px)) {
13+
@media screen and (max-width: calc(vars.$break-mobile + 200px)) {
1214
flex-direction: column;
1315
gap: 2rem;
1416
}

‎assets/scss/_navigation.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use "variables" as vars;
2+
13
.navMain {
24

35
&.gear {
46
ul {
57
display: grid;
68
grid-template-columns: 1fr 1fr 1fr 1fr;
79

8-
@media screen and (max-width: $break-mobile) {
10+
@media screen and (max-width: vars.$break-mobile) {
911
grid-template-columns: 1fr 1fr 1fr;
1012
}
1113
}
@@ -23,7 +25,7 @@
2325
justify-content: space-around;
2426
padding-bottom: 2rem;
2527

26-
@media screen and (max-width: $break-mobile) {
28+
@media screen and (max-width: vars.$break-mobile) {
2729
display: grid;
2830
grid-template-columns: 1fr 1fr 1fr;
2931
}
@@ -34,14 +36,13 @@
3436
a {
3537
display: block;
3638
padding: .3rem .3rem;
39+
color: var(--color-nav-text);
40+
text-decoration: none;
3741

38-
@media screen and (max-width: $break-mobile) {
42+
@media screen and (max-width: vars.$break-mobile) {
3943
padding: .1rem .1rem 0;
4044
}
4145

42-
color: var(--color-nav-text);
43-
text-decoration: none;
44-
4546
&:hover,
4647
&::selection {
4748
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

‎assets/scss/_variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$content-width: 980px;
2+
$break-mobile: calc($content-width / 2);

‎assets/scss/style.scss

+33-21
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
// $content-width: 640px;
2-
$content-width: 980px;
3-
$break-mobile: calc($content-width / 2);
1+
@use "sass:meta";
2+
@use "variables" as vars;
3+
4+
@use "tables";
5+
@use "lists";
6+
@use "footnotes";
7+
@use "figures";
8+
@use "code";
9+
@use "blockquote";
10+
@use "header";
11+
@use "navigation";
12+
@use "footer";
13+
@use "dracula-prism";
14+
@use "gear-list";
15+
@use "books";
16+
@use "movies";
17+
418
// @import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,700i&display=swap');
519
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
620

721
:root {
8-
/* GRAYS */
9-
10-
--break-mobile: #{$break-mobile};
11-
--content-width: #{$content-width};
22+
--break-mobile: #{vars.$break-mobile};
23+
--content-width: #{vars.$content-width};
1224

1325
/*
1426
### Grays
@@ -269,19 +281,19 @@ body {
269281

270282

271283
// @import "https://cdn.jsdelivr.net/npm/littlefoot@4.1/dist/littlefoot.css";
272-
@import "_tables.scss";
273-
@import "_lists.scss";
274-
@import "_footnotes.scss";
275-
@import "_figures.scss";
276-
@import "_code.scss";
277-
@import "_blockquote.scss";
278-
@import "_header.scss";
279-
@import "_navigation.scss";
280-
@import "_footer.scss";
281-
@import "_dracula-prism.scss";
282-
@import "_gear-list.scss";
283-
@import "_books.scss";
284-
@import "_movies.scss";
284+
@include meta.load-css("_tables.scss");
285+
@include meta.load-css("_lists.scss");
286+
@include meta.load-css("_footnotes.scss");
287+
@include meta.load-css("_figures.scss");
288+
@include meta.load-css("_code.scss");
289+
@include meta.load-css("_blockquote.scss");
290+
@include meta.load-css("_header.scss");
291+
@include meta.load-css("_navigation.scss");
292+
@include meta.load-css("_footer.scss");
293+
@include meta.load-css("_dracula-prism.scss");
294+
@include meta.load-css("_gear-list.scss");
295+
@include meta.load-css("_books.scss");
296+
@include meta.load-css("_movies.scss");
285297

286298

287299
a {
@@ -515,7 +527,7 @@ p code {
515527
grid-template-columns: 1fr 1fr;
516528
padding-bottom: 2rem;
517529

518-
@media screen and (max-width: $break-mobile) {
530+
@media screen and (max-width: vars.$break-mobile) {
519531
grid-template-columns: 1fr;
520532
}
521533
}

‎assets/styles.11ty.js

+24-40
Original file line numberDiff line numberDiff line change
@@ -27,31 +27,35 @@ module.exports = class {
2727
// Embed Source Map in Development
2828
async compile(config) {
2929
return new Promise((resolve, reject) => {
30-
if (!isProd) {
31-
config.sourceMap = true
32-
config.sourceMapEmbed = true
33-
config.outputStyle = 'expanded'
30+
const sassOptions = {
31+
loadPaths: [path.join(__dirname, 'scss')],
32+
style: isProd ? 'compressed' : 'expanded',
33+
sourceMap: !isProd,
34+
sourceMapIncludeSources: !isProd,
35+
quietDeps: true
3436
}
3537

36-
const result = sass.renderSync(config)
37-
return resolve(result.css.toString())
38+
try {
39+
const result = sass.compile(config.filePath, sassOptions)
40+
return resolve(result.css.toString())
41+
} catch (error) {
42+
return reject(error)
43+
}
3844
})
3945
}
4046

41-
// Minify & Optimize with CleanCSS in Production
42-
async minify(css) {
43-
return new Promise((resolve, reject) => {
44-
if (!isProd) {
45-
resolve(css)
46-
}
47-
48-
const minified = new CleanCSS().minify(css)
49-
if (!minified.styles) {
50-
return reject(minified.error)
47+
// Process the file
48+
async render({ filePath }) {
49+
try {
50+
const css = await this.compile({ filePath })
51+
if (isProd) {
52+
const minified = new CleanCSS({}).minify(css).styles
53+
return minified
5154
}
52-
53-
resolve(minified.styles)
54-
})
55+
return css
56+
} catch (error) {
57+
return this.renderError(error)
58+
}
5559
}
5660

5761
// Display an error overlay when CSS build fails.
@@ -85,7 +89,7 @@ module.exports = class {
8589
position: fixed;
8690
}
8791
body::after {
88-
content: '${cssesc(error)}';
92+
content: '${cssesc(error.toString())}';
8993
white-space: pre;
9094
display: block;
9195
top: 0;
@@ -98,24 +102,4 @@ module.exports = class {
98102
position: fixed;
99103
}`
100104
}
101-
102-
// Render the CSS file
103-
async render({ filePath }) {
104-
try {
105-
const css = await this.compile({ file: filePath })
106-
const result = await this.minify(css)
107-
return result
108-
} catch (error) {
109-
// If things go wrong
110-
if (isProd) {
111-
// Throw and abort in production
112-
throw new Error(error)
113-
} else {
114-
// Otherwise display the error overly
115-
console.error(error)
116-
const message = error.formatted || error.message
117-
return this.renderError(message)
118-
}
119-
}
120-
}
121105
}

0 commit comments

Comments
 (0)