diff --git a/package.json b/package.json index deee3a5..0166279 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/getFileAsDataURI.js b/scripts/getFileAsDataURI.js new file mode 100644 index 0000000..83e1114 --- /dev/null +++ b/scripts/getFileAsDataURI.js @@ -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}`; +}; diff --git a/scripts/scssFunctions.js b/scripts/scssFunctions.js index d18960a..8c61b92 100644 --- a/scripts/scssFunctions.js +++ b/scripts/scssFunctions.js @@ -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)), }; diff --git a/scss/base/variables.scss b/scss/base/variables.scss index b760623..de1fc91 100644 --- a/scss/base/variables.scss +++ b/scss/base/variables.scss @@ -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;