mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-16 21:28:13 +01:00
Code Issues Releases Wiki Activity

refactor: convert local images to data URIs

Browse Source 
I’ve added a SCSS function that, when passed a file path, will inject the file as a data URI. This
is super helpful since it ensures that the cursor images will always be available for the CSS. This
issue currently prevents the npm version of the library from being usable at all.
This commit is contained in:
Trezy 2019-05-22 15:55:28 -05:00
parent 966a950db9
commit 8fe6d40e19
4 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -61,6 +61,7 @@
"eslint": "^5.9.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"file-type": "^11.0.0",
"git-rev-sync": "^1.12.0",
"husky": "^1.0.0",
"lint-staged": "^7.3.0",

15
scripts/getFileAsDataURI.js Normal file
View File

@ -0,0 +1,15 @@
/* eslint-disable import/no-extraneous-dependencies */
const filetype = require('file-type');
const fs = require('fs');
const path = require('path');
/* eslint-enable */
module.exports = (fileString) => {
const filepath = path.resolve(__dirname, fileString.getValue());
const fileBuffer = fs.readFileSync(filepath);
const fileDataURI = fileBuffer.toString('base64');
const { mime } = filetype(fileBuffer);
return `data:${mime};base64,${fileDataURI}`;
};

2
scripts/scssFunctions.js
View File

@ -1,7 +1,9 @@
const { types } = require('node-sass'); /* eslint-disable-line import/no-extraneous-dependencies */
const getBuildData = require('./getBuildData');
const getFileAsDataURI = require('./getFileAsDataURI');
module.exports = {
'build-data()': () => types.String(getBuildData(true)),
'get-file-as-data-uri($filepath)': filepath => types.String(getFileAsDataURI(filepath)),
};

4
scss/base/variables.scss
View File

@ -5,8 +5,8 @@ $font-size: 16px !default;
$base-color: $color-black !default;
$background-color: $color-white !default;
$cursor-url: url(../assets/cursor.png) !default;
$cursor-click-url: url(../assets/cursor-click.png) 14 0 !default;
$cursor-url: url(get-file-as-data-uri('../assets/cursor.png')) !default;
$cursor-click-url: url(get-file-as-data-uri('../assets/cursor-click.png')) 14 0 !default;
$border-size: 4px !default;