Styles object in js is undefined

[thomhos]

Hello,

I'd like to use csjs to define my styles and then use it in my component as class attribute. When I don't use the csjs-loader i can see that my component gets the class from the styles I import, however the actual css isn't visible anywhere.

When I use the csjs loader, I can see all my styles available in the styles.css file that is created, but the object in my component stays empty, so I'm unable to get the classname on my component.

Any idea how I can actually use the class before it's extracted?

Cheers,

component

import html from 'choo/html';
import sidebar from '../sidebar';
import styles from './styles.csjs.js';

console.log(styles);

export default (state, prev, send, view) => (
  html`
    <main class="${styles.container}">
      ${sidebar(state, prev, send)}
      ${view(state, prev, send)}
    </main>
  `
);

styles

const csjs = require('csjs');

module.exports = csjs`
  .container {
    background-color: red;
  }
`;

[thomhos]

update;

I managed to get it working, using the loader provided on github by mkazlauskas. https://github.com/rtsao/csjs/issues/29

So you can close this issue here, unless you know why the above isn't working :)

Cheers!