mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-01 02:40:51 +02: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
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" /> <meta name="theme-color" content="#ffffff" />
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded --> <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
<!-- <link <link rel="preload" as="style" href="../dark-legacy.standalone.min.css" />
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
/>
<link <link
rel="preload" rel="preload"
as="style" as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
href="../dark-legacy.standalone.min.css"
/> />
<link <link rel="stylesheet" id="js-startup-stylesheet" href="../dark-legacy.min.css" />
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" />
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href --> <!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
<link rel="stylesheet" id="js-stylesheet" /> <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') const themeFromParams = queryParams.get('theme')
/** @type {VersionOptions} */ /** @type {VersionOptions} */
const initialVersionOptions = { const initialVersionOptions = {
theme: /** @type {Theme} */ (/^(dark|light)$/.test(themeFromParams) ? themeFromParams : 'dark'), theme: themeFromParams === 'dark' || themeFromParams === 'light' ? themeFromParams : 'dark',
isLegacy: queryParams.has('legacy') || !supportsCssVars, isLegacy: queryParams.has('legacy') || !supportsCssVars,
isStandalone: queryParams.has('standalone'), 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 excludeModern = filter(file => isLegacy(file.path), { restore: true })
const excludeLegacy = 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 ( return (
gulp gulp
.src(paths.styles.src) .src(paths.styles.src)
// Add sourcemaps // Add sourcemaps
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
// Resolve imports and calculated colors // Resolve imports and calculated colors
.pipe(postcss([postcssImport(), postcssColorModFunction()])) .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction()]))
// * Process legacy builds * // * Process legacy builds *
.pipe(excludeModern) .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. * 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('./dark-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css') @import url('./light-legacy.standalone.min.css') (prefers-color-scheme: light);
(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. * 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('./light-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css') @import url('./dark-legacy.standalone.min.css') (prefers-color-scheme: dark);
(prefers-color-scheme: dark);