Styled-components-website: Show { css } import next to media templates

[mxstbr]

There is some confusion around how to use them: https://stackoverflow.com/questions/44856283/can-not-get-media-templates-working-using-styled-components

We should probably find a way to show the import there!

[kitten]

I was thinking about introducing an "editable" range for react-live, i.e. some code before and after the actual code snippet that is not editable and not evaluated. Does that sound like it'd solve the issue? There's still the question of how to visually style this

[geoffdavis92]

@philpl I'm looking at this section now; from my understanding that sounds like it would solve the problem. Would you want help?

I was given the following code sitting inside an md component:

{% import styled, { css } from 'styled-components' %}

const sizes = {
  desktop: 992,
  tablet: 768,
  phone: 376
}

…You would evaluate that in the react-live component similar to the following

if (literal.indexOf('{%') >= 0) {
  let trimStartDelimiter = literal.split('{% ')[1]
  let [ noEvalCode, theRest ] = trimStartDelimiter.split(' %}')
  console.log({ noEvalCode, theRest })
  /*
  {
    noEvalCode: "import styled, { css } from 'styled-components'",
    theRest: "↵↵const sizes = {↵  desktop: 992,↵  tablet: 768,↵  phone: 376↵}"
  */
}

…which you could then use to target certain rendered sections in the react-live component using the noEval and theRest variables. (or whatever you want to call them)

I'd be willing to help out if this sounds like something you want to do.

[kitten]

@geoffdavis92 I think that solves how we'd express it in the markdown code. However, I still need to think about how to add it to react-live without breaking the experience.

It'll need to highlight those sections differently and then display them differently so that the user can't edit them. Then the result will need to incorporate that code as well. It could easily turn out a bit weird. Feel free to take a shot over at react-live if you know how you'd like to do this :smile:

Btw, I think we shouldn't introduce the {% syntax to react-live though.... However else we might want to solve this, I'm not sure

https://github.com/FormidableLabs/react-live

[geoffdavis92]

@philpl awesome, I'll check out that repo

[geoffdavis92]

@philpl circling back, is this what you are thinking?

[kitten]

@geoffdavis92 Yes, but we'd have to put in a special case inside the editor so that the codeblock is part of the editor.

https://github.com/styled-components/styled-components-website/blob/master/components/LiveEdit.js#L105

Basically on here we need a column that has a code block for the imports first and the StyledEditorScrollCaptured second.

For the code block we'll need to make a variation of the codeblock that fits "snug" with the editor component: https://github.com/styled-components/styled-components-website/blob/master/components/CodeBlock.js

[geoffdavis92]

@philpl Awesome, I'll check that out tonight 👍