package.json
{
"name": "ce",
"author": "SuperZen :)",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"css-color-extractor": "^0.0.5",
"serve": "^11.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"scripts": {
"start": "serve",
"build": "webpack --config webpack.config.js"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './colorextractor.js',
mode: 'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
colorextractor.js
var extractor = require('css-color-extractor');
// var options = {
// withoutGrey: false, // set to true to remove rules that only have grey colors
// withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
// colorFormat: null // transform colors to one of the following formats: hexString, rgbString, percentString, hslString, hwbString, or keyword
// };
console.log(document.styleSheets[0])
const cssRules = document.styleSheets[0].cssRules // first css file <link rel...
const textCss = Object.keys(cssRules).map(key => cssRules[key].cssText).join(',\n\r')
console.log(textCss)
console.log(extractor.fromCss(textCss))
//result ["white", "rgb(0, 255, 0)", "rgba(0, 0, 255, 0.2)"]
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<script type="text/javascript" src="./dist/main.js"></script>
<script>
// путь джедая
// const styleElement = document.styleSheets
// console.log(styleElement)
// после serve http://localhost:5000
</script>
</html>
сложить в одну папку, потом:
$ yarn install
$ yarn build
$ yarn start
перейти в localhost:5000
ну плитки рисовать будешь сам %)