Показать сообщение отдельно
  #2 (permalink)  
Старый 02.09.2019, 16:36
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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

ну плитки рисовать будешь сам %)
Ответить с цитированием