[jsst] A CSS string format which compiles to jss JSON

[kof]

Using tagged template literals, we can create a css like syntax which easily compiles down to jss json.

export default css`
  datalist {
    background: ${white};
    border: 1px solid ${gainsboroLight};
    box-shadow: 0px 3px 4px 0 ${grapeTypoSemi};
    overflow: auto
  }
  item {
    extend: ${[fonts.normal, mixins.ellipsis]};
    padding: 5px 7px;
    color: ${grey};
    cursor: ${pointer};
  }
  @media (min-width: 1024px) {
    item {
      color: ${blue}
    }
  }
`

[kof]

cc @mr-mig @maximkoretskiy @tyv

[mr-mig]

Sehr gut!
But I am a bit embarrassed by this one: extend: ${[fonts.normal, mixins.ellipsis]};

[kof]

Suggestions?

[mr-mig]

@kof seems quite logical, tbh. Just a matter of personal preference.
It should be like that anyway - a reference to JS objects.

[kof]

We should take an example from styled-components, but preprocess those tagged literals serverside and convert to jss json.

[DenisIzmaylov]

It could be implemented as:

import fromCSS, { keyframes } from 'jss-from-css'

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`

const styles = fromCSS`
  button {
    color: palevioletred;
    display: block;
    margin: 0.5em 0;
    font-family: Helvetica, Arial, sans-serif;

    &:hover {
      text-decoration: underline;
      animation: ${rotate360} 2s linear infinite;
    }
  }
`

Also then push this package to language-babel plugin for syntax highlight in Atom:

• gandm/language-babel@a2b9cd7

[DenisIzmaylov]

We could get some inspiration here:

• https://github.com/styled-components/styled-components/blob/master/docs/tagged-template-literals.md

• https://github.com/styled-components/styled-components/blob/master/docs/css-we-support.md

And use this modules:

• https://github.com/styled-components/styled-components/blob/master/src/vendor/postcss-safe-parser/parse.js

• https://github.com/styled-components/styled-components/blob/master/src/models/ComponentStyle.js#L36

[DenisIzmaylov]

Also we have to keep in mind this thread: https://github.com/geelen/css-components-demo

[DenisIzmaylov]

I'm not sure if it's OK, but if yes - we could implement it in this way:

• https://github.com/axept/jss-from-css

[trusktr]

Wow, preJSS looks awesome!

[kof]

I think we can close this and go with preJSS