mixin as a function result?

[a-dominiak]

Hey, we have a following case.
We have an existing styled-components app which theme's has function for calculating spaces eg.

import styled from 'styled-components'

const Text = styled.div`
  ${({ theme }) => theme.getFluidSpacing('padding-left', 'equal', 0)}
`

What would be a replacement in next-yak?
I've tried following:

import {styled, css} from 'next-yak'
import { theme } from '@theme/main'
const spacing = css`${theme.getFluidSpacing('padding-left', 'equal', 0)}`

const Text = styled.div`
  ${spacing}
`

and it doesn't work. It shows the given css as classname, not as style.

<div class="index_Text__giUSk 
    padding-left: 4rem;

    @media screen and (min-width: 20em) {
      padding-left: calc(4rem + 0 * ((100vw - 176rem) / -144));;
    }

    @media screen and (min-width: 110em) {
      padding-left: 4rem;
    }
  ">Home Page</div>

How should it be done?

[Mad-Kat]

Hey @a-dominiak

Thank you for opening the issue. What's the implementation of the function? What does it return?

Could you provide me a playground link: https://yak.js.org/playground (hit Ctrl+S so that the URL updates)

This would help me to pinpoint the issue further.

[a-dominiak]

@Mad-Kat it should return what's in the last code snippet padding-left..., however it's included as a classname, not as css for element. When recreating the issue in playground it doesn't output any styles even in classname (however we use v2 in project, since we have next.js 14 + react 18), so maybe that's a cause of difference

Here's playground link nevertheless:
https://yak.js.org/playground?q=H4sIAOhFZmgCA51VS2%2FTQBDec37FKKXIgTi225RWeV2QOKJKVEK9devdJEtsx11v05QoVBWIp5C4gHiIlt%2FiX8bsrtO8Sg9Esr0zuzuPb76Z%2BISS%2FI9%2BvcvUecRZFcIsq8IhHRz0ecz35XAkGJdAXpTwzIFQEa%2FCAR%2Br50L19yljIumR%2FH3NI%2Fl1uVnCQz%2BVvghtmJQASH6VNcwKIJUipvK8AeWNbtfHX7mK%2Bql%2B9bh6Ep0K9iylIRpsgFOBdqe4R%2FJvR8XiqxvxrmpAXfIYnVnlD8hCyXkCNGHgxCJxSf4dtnweVwoLi1dDGoWOvg8PwYcH4DiB74%2FOwIVg9xGqK%2BCBG9TrlUqzaS5P7%2FYTBP9wZGO0FgCO9BJznWqMIpJ%2FJq9gQvK3jjnRWsPbgNiemM%2B0UxhvrQDf4dGw5a0qZ4cf80RxORNRwcToRtCRfriRYjo2ydR9Px3boDFkHbf9zY2gGRH3FkSATIbtMhHlJeWi9UUPCPbmzMGKEwBvyY8hW%2BcpZuciPJinkefpeJjPTbLeYrYtbxVPra80S1hLEmIpNOGv8cVRPlnkK6NygATtqziq6TXcNySNRK%2BPJbV6I5gNU8wTExe56AeapSR%2FAztF5clIA2pWEwhNfFpQOqPj4dhV2BAN0G8UVX9pj7Me12RNgUZpnx5zJULDeJJfNmADu8fY1YKkTNAI0f1okg%2BFDCMOXSoxsUy54VAmSCiqQA1T0NzUGYGxAf5mIWxvb5vaWJy05S8mlq6ItOmrBpCX1v%2FZbCtTcjjAICVnEKTjWQ%2BQ%2FDU%2Bnw4dt45KW2vsCmyIdAwmaoB7ltgG4ulC72A2ZFDfYbxXhQ0WhMGujwvO9vw9vbCaCvYnRuphi8%2B5hEHhdTeMRIqQYnjzjXWt5dz%2Fu1sHRyRCYRGWt2cA6cQ1enfEebsODY%2BodFztw%2B0y%2FFwWgEZcIZvcbDYv%2FZq%2FZUlnxtW6uVv8Yh%2FocR2LsUiQ%2Fjj3LYHR672JM7EjiOS%2F7KKmR3mtmOFIfF3E9UMrg9yp4Enj52T1P%2BOC5L%2B1DeN%2Bqg9hP57iw%2F4CYyKnd5QGAAA%3D

[Mad-Kat]

Thank you for the reproduction. Can you share more details about what you do in the function?

At the moment the styles look completely static, so why do you need a function (that is dependent on the theme) there?

[a-dominiak]

@Mad-Kat Our internal function for calulating spacing is large and based on other functions and I really can't put it here, however it only takes some params calculates them mathematically and outputs a string, that's why I put a very simple version of it where I only created a function that takes no input params and outputs a static string copied straight from our function output and it already doesn't work, so I'm not sure if delivering whole function would help (I mean it probably would in scenario where the above playground works and function with params does not, but this is not the case here). Any idea what I'm doing wrong here?

[Mad-Kat]

Thanks for the quick clarification.

We try to build as much as possible statically during build. If you have a dynamic function, that can return styles based on the theme and input parameters you get into a spot where the migration from styled-components isn't straight forward.

I wanted to know how your function works to propose the best solution for you, but I try my best in guessing and propose a valid solution.

If you need dynamic values that are calculated during runtime, CSS variables are the way to go. Unfortunately we don't have a global CSS helper yet, so we need to do this via the provided ways from Next.js.

Either in a global CSS file or in a CSS module file you can define your CSS variables:

:root { 
	--fluid-factor: 0;

	@media screen and (min-width: 20em) {
		--fluid-factor: ((100vw - 176rem) / -144);   
 	}
 
	@media screen and (min-width: 110em) {
	--fluid-factor: 0;
	}
}

and then use it in your component styles:

const fluid_factor_equal = 'var(--fluid-factor)' // this could also be inlined

const Title = styled.div`
  padding-left: calc(4rem + ${fluid_factor_equal} * 2rem);
`;

Or if you need dynamic values for the CSS variable you can also set them on the component

const Title = styled`
  padding-left: calc(4rem + var(--fluid-factor) * 2rem);
`;

//And set it during runtime
<Title style={{ "--fluid-factor": 0 }} />

We're working on a global CSS helper, that would make your case a bit easier, but the main point is the same. You need to handle the dynamic behavior in slightly other way.

Is that sufficient for your case?

I would be happy to understand more and maybe see if we could make your case easier.