Commit dd650e04 authored by Zach van Rijn's avatar Zach van Rijn
Browse files

CSS is now properly generated and compatible.

parent 88593938
......@@ -2,6 +2,6 @@ html/
html.tgz
assets/images/gen_*
assets/images/icons/gen_*
assets/css/fonts/
assets/fonts/
assets/css/node_modules
assets/css/theme.css
#!/bin/sh -e
HERE=$(dirname $(readlink -f ${0}));
NODE=16.6.0-alpine3.14;
cd ${HERE};
rm -fr fonts;
#===============================================================
docker run -v${HERE}:/x -w/x --rm -i node:${NODE} sh <<'EOF'
apk update;
apk upgrade;
apk add git;
#===============================================================
cd /tmp;
git clone https://github.com/sass/sass.git;
cd sass;
git checkout 2121f939b411c1650005b82c53557dd6248bff74;
npm audit fix;
npm install;
npm install -g sass;
cd /x;
sass --no-source-map scss/theme.scss theme.css;
chown 1000:1000 theme.css;
#===============================================================
EOF
#===============================================================
rm -fr fonts src;
mkdir src;
mv theme.css src;
#===============================================================
docker run -u$(id -u):$(id -g) -v${HERE}:/x -w/x --rm -i node:16.6.0-alpine3.14 sh <<'EOF'
docker run -u$(id -u):$(id -g) -v${HERE}:/x -w/x --rm -i node:${NODE} sh <<'EOF'
#===============================================================
npm install;
......@@ -17,8 +43,9 @@ npm run build;
EOF
#===============================================================
mv out/theme.css .;
mv out/fonts .;
mv css/theme.css .;
mv fonts ..;
rm -fr node_modules;
rm -fr out;
rm -fr css;
rm -fr src;
This diff is collapsed.
{
"name": "adelie-scss",
"name": "adelie-css-compat",
"private": true,
"version": "0.0.0",
"description": "Compiles SCSS for the Adélie Linux homepage",
"description": "Converts CSS for the Adélie Linux homepage for old browsers",
"scripts": {
"build": "postcss scss/theme.scss --base scss --dir out --ext css",
"clean": "rimraf out/*",
"list-supported": "npx browserslist 'cover 99.5%, dead, Firefox ESR'",
"build": "postcss src/theme.css --base src --dir css --ext css",
"clean": "rimraf css fonts",
"list-supported": "npx browserslist",
"prebuild": "npm run clean"
},
"author": "Eric Hegnes <eric@hegnes.com>",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.3.1",
"cssnano": "^5.0.7",
"cssnano-preset-advanced": "^5.1.3",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-easy-import": "^3.0.0",
"postcss-font-grabber": "^3.0.2",
"postcss-import-url": "^7.0.0",
"postcss-nested": "^5.0.6",
"postcss-preset-env": "^6.7.0",
"postcss-sassy-mixins": "^2.1.0",
"postcss-scss": "^4.0.0",
"postcss-simple-vars": "^6.0.3",
"postcss-unprefix": "^2.1.4",
"rimraf": "^3.0.2"
}
},
"browserslist": [
"cover 99.5%",
"Firefox ESR",
"dead"
]
}
const { postcssFontGrabber } = require('postcss-font-grabber')
module.exports = conf => {
const scss = conf.file.extname === '.scss';
return {
parser: 'postcss-scss',
plugins: [
require('postcss-easy-import')({
prefix: '_',
extensions: ['.scss'],
}),
// converts googleapis URLs to gstatic ones
require('postcss-import-url')({
recursive: true,
modernBrowser: true,
}),
// downloads gstatic fonts for local serving
require('postcss-font-grabber').postcssFontGrabber({
cssSrc: 'src',
cssDest: 'css',
fontDest: 'fonts',
}),
// main compatibility phase
require('postcss-preset-env')({
browsers: 'last 4 versions',
stage: 3,
}),
// mixins must come before simple-vars and nested
require('postcss-sassy-mixins')(),
require('postcss-simple-vars')(),
require('postcss-nested')(),
postcssFontGrabber({
cssSrc: './scss/',
cssDest: './out',
fontDest: './out/fonts',
}),
// must be run before autoprefixer
require('postcss-unprefix')(),
require('autoprefixer')(),
// does not /add/ prefixes by default, hence previous step
require('cssnano')({
preset: 'advanced'
}),
]
};
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment