Why white spaces and ";" there is? error?

[erkanunluturk]

Do you want to request a feature or report a bug?

a bug

What is the current behavior?

there is empty space when variable is not fulfilled

<style jsx>{`
  {
    width: 100%;
    padding: 0 1rem;
    ${minHeight ? `min-height: ${minHeight}px;` : ''}
    ${vCenter ? 'display: flex; align-items: center;' : ''}
  }
`}</style>

renders to:

<style id="__jsx-1768411230">.jsx-1768411230{width:100%;padding:0 1rem;        ;}

example source: nextjs site source (container component)

Environment (include versions)

• OS: Windows 10
• Browser: Chrome 76.0
• styled-jsx (version): 3.2.2

Did this work in previous versions?

I don't know

[kkortes]

Hello @erkanunluturk!

I'm having issues with <style jsx> myself that I think is related to how "dynamic styling" is applied.

The maintainer himself (@giuseppeg) has this RFC up:
#595
in which:

// 🛑 invalid
<style jsx>{`div { ${props.color ? `color: ${props.color}` : '' }  }`}</style>

can be found.

Question to @giuseppeg: should we be able to do it this way AND why does : '' spit out a loose ;?

[giuseppeg]

@kkortes implicit roots i.e. css without a selector are not officially supported. As for the other issue I recommend that you define the styles in two separate rules (using two classes) and add the className conditionally:

<div className={`root ${vCenter ? 'vcenter' : ''}`}>
  {children}
  <style jsx>{`
        .root { 
            width: 100%;
           padding: 0 1rem;
        }
        .vcenter { display: flex; align-items: center; }
  `}</style>
</div>

[kkortes]

Implicit roots aren't the problem me and @erkanunluturk are facing. The loose ; gets added if an empty string is conditionally added. E.g:

<style jsx>{`
  .box {
      ${borderToggled ? 'border: 5px solid black;' : ''}
  }
`}</style>

with borderToggled set to false generates:

<style type="text/css" data-styled-jsx="">
  .box.jsx-3898720937{;}
</style>

(notice I use selector .box)