Скепсис по JSX прошел

Честно говоря мой скепсис по webpack’у походу прошел. От JSX пока тошнит, особенно раздражает невозможность описания CSS прямо в коде с подсветкой синтаксиса и прочих вещей. Но что поделать иначе писать html в js совсем ущербно : )

После того как начал переводить ProstoDiary на Skate.js с веб-компонентами, попал в дурацкую ситуацию с невозможностью нормально описывать стили. Как знаете в custom elements они должны быть описаны внутри хоста. Сначала решил задачу довольно топорно с ES6 экранированием:

static render() { 
  return (
   ` div { /* something */ } ` 
  ) 
}

Это было не дело, надо было искать нормальный механизм. Откопал на npm либу raw-loader. Она позволяет получать представление файлов в текстовом виде. Добавил ее, изменил webpack.config.js, прикрутил PostCSS autoprefixer и вот что получилось.

Webpack Config

require('raw-loader');
module.exports = {
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],
  module: {
    loaders: [{
      test: /.css$/,
      loaders: ['raw', 'postcss-loader']
    }],
  }
};

Теперь пишу рядом с компонентом styles.css.

Компонент

import styles from './styles.css';
...
static render() {
  return (
    <div></div>
    <style>{styles }</style>
  )
}

Теперь норм.