Brainstorming how to get css syntax highlighting

[geoctrl]

I'm toying with some ideas on how to get syntax highlighting for css using kremling (css-in-js)

my first thought was that we could do some sort of html syntax highlighting using a webpack loader (like vue-loader) where both js & styles lived in harmony:

<script>
  import React from 'react';
  import { useCss } from 'kremling';

  export function TestComponent() {
    const scope = useCss($style);
    return (
      <div {...scope} className="thing">
        test Component
      </div>
    );
  }

  TestComponent.propTypes = {};
</script>

<style>
  .thing {
    background-color: red;
  }
</style>

pros:

• possibly easy-to-learn format (just html)

cons:

• non-js syntax standard - migrating to another system might be tedious
• requires a different extension name so webpack and editor plugins can pick them out (maybe *.kjs? [kremlingJS])
  • requires editor plugins to get the syntax highlighting
  • we'd have to figure out how to get <style> into the <script> in a way that's not confusing... (the example above uses $style, but I'm not a fan of that)

---

Another option is that we could add a kremling tag to the css template literal:

import { kremCss } from 'kremling';

const css = kremCss`
  & .thing { }
`;

This would allow us to target kremCss with an editor plugin to get the highlighting

pros:

• no webpack loaders - just plain js

cons:

• requires editor plugins to get the syntax highlighting
• the imported kremCss is another piece of the puzzle to remember when adding your styles - I'm wondering if we're making this too complicated...
  • still need the ampersands

[joeldenning]

I lean towards the second, over the first. The first seems like it changes how you write all your react code in a pretty drastic way

[geoctrl]

implemented k tag #33

[joeldenning]

We should add documentation for getting syntax highlighting