Skip to content

Commit

Permalink
Work around Vite dilemma of link[rel=stylesheet][media].
Browse files Browse the repository at this point in the history 
Due to vitejs/vite#6751 media-specific stylesheet links are ignored in the build pipeline and handled as static assets instead.
  • Loading branch information
@smnscp
smnscp committed May 14, 2023
1 parent a94eba4 commit a2ae04d
Show file tree
Hide file tree
Showing 11 changed files with 43 additions and 18 deletions.
1 change: 0 additions & 1 deletion css/axioms/config/specific/color/brand.scss
View file
Expand Up @@ -10,7 +10,6 @@ $suffix: (
factor: 1000,
inverse: false,
) !default;
@debug $suffix;

/// Brand colors.
/// Kept separate from the default configuration to make it optional to import.
Expand Down
0 css/dark-scheme.scss → css/dark.scheme.scss
View file
File renamed without changes.
2 changes: 0 additions & 2 deletions css/index.scss
View file
Expand Up @@ -34,5 +34,3 @@
@use "objects/scope/homepage";
@use "utilities";
@use "utilities/dev";

@use "fonts";
0 css/light-scheme.scss → css/light.scheme.scss
View file
File renamed without changes.
7 changes: 5 additions & 2 deletions example/body-copy.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
<style>
body {
display: grid;
Expand Down
7 changes: 5 additions & 2 deletions example/color.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
</head>

<body class="lay-page-center">
Expand Down
7 changes: 5 additions & 2 deletions example/elements-showcase.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
<style>
body {
display: flex;
Expand Down
7 changes: 5 additions & 2 deletions example/layout.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
</head>

<body class="scp-homepage lay-page-center">
Expand Down
7 changes: 5 additions & 2 deletions example/shadow.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
</head>

<body class="lay-page-center">
Expand Down
7 changes: 5 additions & 2 deletions index.html
View file
Expand Up @@ -7,8 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/img/logo.svg" rel="shortcut icon">
<link rel="stylesheet" href="/css/index.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
<link rel="stylesheet" href="/css/fonts.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.scss">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.scss">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark.scheme.css">
<link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light.scheme.css">
</head>

<body class="scp-homepage lay-page-center">
Expand Down
16 changes: 13 additions & 3 deletions vite.config.js
View file
Expand Up @@ -3,14 +3,24 @@ import { defineConfig } from "vite";

export default defineConfig({
build: {
assetsInlineLimit: 1024,
assetsInlineLimit: 0,
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
exampleLayout: resolve(__dirname, "example/layout.html"),
exampleBodyCopy: resolve(__dirname, "example/body-copy.html"),
exampleColorTable: resolve(__dirname, "example/color.html"),
exampleElementsShowcase: resolve(__dirname, "example/elements-showcase.html"),
exampleColor: resolve(__dirname, "example/color.html"),
exampleElements: resolve(__dirname, "example/elements-showcase.html"),
mainSheet: resolve(__dirname, "css/index.scss"),
fontsSheet: resolve(__dirname, "css/fonts.scss"),
schemeDark: resolve(__dirname, "css/dark.scheme.scss"),
schemeLight: resolve(__dirname, "css/light.scheme.scss"),
},
output: {
assetFileNames: (assetInfo) =>
(assetInfo.name.endsWith("css") ? "css" : "assets") +
"/" +
assetInfo.name,
},
},
},
Expand Down

0 comments on commit a2ae04d

Please sign in to comment.