styled-jsx: Expressions within template literal don't work

@rauchg Yeah this would work and indeed add basic support for constants. Maybe we can allow anything except for inline (anonymous) functions? The following should all be valid:

`p { color: ${myColor)}; }`
`p { color: ${darken(myColor))}; }`
`div { width: ${5*gridCellSize}px; }`

I assume that any constant in the module scope is valid right? or were you thinking about restricting to the innermost scope? (the render one usually)

I’m thinking code sharing and being static. One simple pattern that’s been possible for a while by using CSS preprocessors (and I guess post processors too) is the ability to f.ex. declare all used colors in one place and then use these colors across the app by referencing the variable name that holds the color code. As these colors are declared once and used all around the app it’s really easy to tweak them when necessary.

If you don’t follow this kind of pattern and you f.ex need to change a color you either need to go through all components on your app and update the color by hand or do a really careful search & replace. In bigger codebases without a centralized solution for things like colors, z-indexes etc. seeing the bigger picture becomes hard and it will lead to fragmentation.

Though the case here is very different I’ve always seen CSS pre and post processors as static code generators. Though I understand why you’re avoiding dynamic stuff I don’t understand why it should stand in way of code sharing. Or is there currently a way to achieve something close to what I’ve described above with styled-jsx?

Yes I realized the other day that we can support expressions from outside the closure (i.e.: not from props) for shared constants like colors and fonts

On Wed, Dec 21, 2016 at 11:50 AM Joonas Salovaara notifications@github.com wrote:

I’m thinking code sharing and being static. One simple pattern that’s been possible for a while by using CSS preprocessors (and I guess post processors too) is the ability to f.ex. declare all used colors in one place and then use these colors across the app by referencing the variable name that holds the color code. As these colors are declared once and used all around the app it’s really easy to tweak them when necessary.

If you don’t follow this kind of pattern and you f.ex need to change a color you either need to go through all components on your app and update the color by hand or do a really careful search & replace. In bigger codebases without a centralized solution for things like colors, z-indexes etc. seeing the bigger picture becomes hard and it will lead to fragmentation.

Though the case here is very different I’ve always seen CSS pre and post processors as static code generators. Though I understand why you’re avoiding dynamic stuff I don’t understand why it should stand in way of code sharing. Or is there currently a way to achieve something close to what I’ve described above with styled-jsx?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zeit/styled-jsx/issues/25#issuecomment-268621919, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAy8V1fQb-_PDwdOCsgJu1qKmC7YNlgks5rKYMSgaJpZM4LGyuw .

I tend to leverage css variables for dynamic values such as this.

Something like the following:

MyComponent.jsx

function MyComponent({ children, color, fontSize }){
    return <p class='MyComponent' style={{
        '--MyComponent-color': color,
        '--MyComponent-fontSize': fontSize
    }}>{children}</p>
}

MyComonent.css

.MyComponent {
    color: var(--MyComponent-color);
    font-size: var(--MyComponent-fontSize);
}

Yep but dynamic stuff in CSS has serious performance tradeoffs. it’s something I might consider but being static is also an advantage for predictable perf

On Sun, Dec 18, 2016 at 4:16 PM Bruno Lourenço notifications@github.com wrote:

@rauchg https://github.com/rauchg actually you can with styled-components.

You can do this:

import styled from ‘styled-components’;

const orangeColor = ‘orange’;

const align = ‘right’;

const Title = styled.h1`

font-size: 1.5em;

text-align: ${align};

color: ${orangeColor};

`;

To be able to do this is very important. Otherwise, we cannot use javascript to manipulate colors, units, custom mixins like sass and other things like that…

Just toggle class is not enough.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/zeit/styled-jsx/issues/25#issuecomment-267857842, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAy8T5GvaWDcknTutAiCloJxQB_p4Zaks5rJczpgaJpZM4LGyuw .

See #26