HummingBirdAnimeClient/public/tools/css.js
Timothy J Warren 1f2accf4ec
All checks were successful
timw4mail/HummingBirdAnimeClient/develop This commit looks good
Add 'automatic' dark theme, based on browser 'prefers-color-scheme: dark' media query
2019-07-12 15:56:24 -04:00

56 lines
1.2 KiB
JavaScript

/**
* Script for optimizing css
*/
const fs = require('fs');
const postcss = require('postcss');
const atImport = require('postcss-import');
const cssNext = require('postcss-preset-env');
const cssNano = require('cssnano');
const css = fs.readFileSync('css/src/all.css', 'utf-8');
const darkCss = fs.readFileSync('css/src/dark-override.css', 'utf-8');
const minOptions = {
autoprefixer: false,
colormin: false,
minifyFontValues: false,
options: {
sourcemap: false
}
};
const processOptions = {
browser: '> 0.5%',
features: {
'custom-properties': true,
},
stage: 0,
};
(async () => {
// Basic theme
const light = await postcss()
.use(atImport())
.use(cssNext(processOptions))
.use(cssNano(minOptions))
.process(css, {
from: 'css/src/all.css',
to: 'css/app.min.css',
});
fs.writeFileSync('css/app.min.css', light);
// Dark theme
const dark = await postcss()
.use(atImport())
.use(cssNext(processOptions))
.use(cssNano(minOptions))
.process(darkCss, {
from: 'css/dark-override.css',
to: 'css/dark.min.css',
});
fs.writeFileSync('css/dark.min.css', dark);
const autoDarkCss = `${light} @media (prefers-color-scheme: dark) { ${dark} }`
fs.writeFileSync('css/dark-auto.min.css', autoDarkCss)
})();