Skip to content

Commit a2ae04d

Browse files
smnscpsmnscp
committed
Work around Vite dilemma of link[rel=stylesheet][media].
Due to vitejs/vite#6751 media-specific stylesheet links are ignored in the build pipeline and handled as static assets instead.
1 parent a94eba4 commit a2ae04d

11 files changed

+43
-18
lines changed

‎css/axioms/config/specific/color/brand.scss

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ $suffix: (
1010
factor: 1000,
1111
inverse: false,
1212
) !default;
13-
@debug $suffix;
1413

1514
/// Brand colors.
1615
/// Kept separate from the default configuration to make it optional to import.

‎css/dark-scheme.scss ‎css/dark.scheme.scss

File renamed without changes.

‎css/index.scss

-2
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,3 @@
3434
@use "objects/scope/homepage";
3535
@use "utilities";
3636
@use "utilities/dev";
37-
38-
@use "fonts";

‎css/light-scheme.scss ‎css/light.scheme.scss

File renamed without changes.

‎example/body-copy.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
<style>
1316
body {
1417
display: grid;

‎example/color.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
</head>
1316

1417
<body class="lay-page-center">

‎example/elements-showcase.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
<style>
1316
body {
1417
display: flex;

‎example/layout.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
</head>
1316

1417
<body class="scp-homepage lay-page-center">

‎example/shadow.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
</head>
1316

1417
<body class="lay-page-center">

‎index.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="/img/logo.svg" rel="shortcut icon">
99
<link rel="stylesheet" href="/css/index.scss">
10-
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
11-
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
10+
<link rel="stylesheet" href="/css/fonts.scss">
11+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
12+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
13+
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
14+
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
1215
</head>
1316

1417
<body class="scp-homepage lay-page-center">

‎vite.config.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@ import { defineConfig } from "vite";
33

44
export default defineConfig({
55
build: {
6-
assetsInlineLimit: 1024,
6+
assetsInlineLimit: 0,
77
rollupOptions: {
88
input: {
99
main: resolve(__dirname, "index.html"),
1010
exampleLayout: resolve(__dirname, "example/layout.html"),
1111
exampleBodyCopy: resolve(__dirname, "example/body-copy.html"),
12-
exampleColorTable: resolve(__dirname, "example/color.html"),
13-
exampleElementsShowcase: resolve(__dirname, "example/elements-showcase.html"),
12+
exampleColor: resolve(__dirname, "example/color.html"),
13+
exampleElements: resolve(__dirname, "example/elements-showcase.html"),
14+
mainSheet: resolve(__dirname, "css/index.scss"),
15+
fontsSheet: resolve(__dirname, "css/fonts.scss"),
16+
schemeDark: resolve(__dirname, "css/dark.scheme.scss"),
17+
schemeLight: resolve(__dirname, "css/light.scheme.scss"),
18+
},
19+
output: {
20+
assetFileNames: (assetInfo) =>
21+
(assetInfo.name.endsWith("css") ? "css" : "assets") +
22+
"/" +
23+
assetInfo.name,
1424
},
1525
},
1626
},

0 commit comments

Comments
 (0)