mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-02-23 05:12:25 +01:00
Code Issues Releases Wiki Activity

fix: update css imports to be independent from CDN

Browse Source
This commit is contained in:
Jonas Kuske 2019-06-09 14:27:34 +02:00
parent eca4067fb0
commit 4cf2713004
5 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/index.html
View File

@ -18,23 +18,14 @@
<meta name="theme-color" content="#ffffff" />
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
<!-- <link
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
/>
<link rel="preload" as="style" href="../dark-legacy.standalone.min.css" />
<link
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
media="(prefers-color-scheme: dark)"
href="../dark-legacy.standalone.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.min.css"
/> -->
<!-- TODO: Remove once water.css v2 is hosted so the above links work -->
<link rel="stylesheet" id="js-startup-stylesheet" href="../dark.min.css" />
<link rel="stylesheet" id="js-startup-stylesheet" href="../dark-legacy.min.css" />
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
<link rel="stylesheet" id="js-stylesheet" />

2
docs/script.js
View File

@ -122,7 +122,7 @@ const createColorSchemeListener = (scheme, queryHandler) => {
const themeFromParams = queryParams.get('theme')
/** @type {VersionOptions} */
const initialVersionOptions = {
theme: /** @type {Theme} */ (/^(dark|light)$/.test(themeFromParams) ? themeFromParams : 'dark'),
theme: themeFromParams === 'dark' || themeFromParams === 'light' ? themeFromParams : 'dark',
isLegacy: queryParams.has('legacy') || !supportsCssVars,
isStandalone: queryParams.has('standalone'),
}

5
gulpfile.js
View File

@ -58,13 +58,16 @@ function style() {
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
// Don't inline minified versions, so builds can lazily import them at runtime
const cssImportOptions = { filter: path => !/\.min/.test(path) }
return (
gulp
.src(paths.styles.src)
// Add sourcemaps
.pipe(sourcemaps.init())
// Resolve imports and calculated colors
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
.pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction()]))
// * Process legacy builds *
.pipe(excludeModern)

5
src/builds/dark-legacy.css
View File

@ -5,6 +5,5 @@
* if a system-wide theme preference is set on the user's device.
*/
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')
(prefers-color-scheme: light);
@import url('./dark-legacy.standalone.min.css');
@import url('./light-legacy.standalone.min.css') (prefers-color-scheme: light);

5
src/builds/light-legacy.css
View File

@ -5,6 +5,5 @@
* if a system-wide theme preference is set on the user's device.
*/
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')
(prefers-color-scheme: dark);
@import url('./light-legacy.standalone.min.css');
@import url('./dark-legacy.standalone.min.css') (prefers-color-scheme: dark);