Re-Global Dynamics - no change seen

[AverTry]

Hi Alexis, I feel really dumb having to ask how-to, I appreciate the time your taking.

As I could not get it working on my test project, I did a fresh install of everything, then as using your example, I simplified it, to see what's going on. I'm not seeing any changes when dynamically adding CSS properties in the Global Scope.

In my example, if I replace the const values with hardcoded values all is good.

import { css, StyleRegistry } from "solid-styled";

function ToggleButton() {
  const globalButton = "blueviolet";
  const localButton = "yellowgreen";
  css`
    :global(button) {
      width: 50vw;
      padding: 0.5rem;
      border: none;
      color: white;
      font-size: 2rem;
      border-radius: 0.5rem;
      background-color: ${globalButton};
    }
    button {
      background-color: ${localButton};
    }
  `;
  return <button type="button">Local Button</button>;
}

function Main() {
  css`
    :global(body) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  `;

  return (
    <>
      <ToggleButton use:solid-styled />
      <br />
      <button type="button">Global Button</button>
    </>
  );
}

export default function App() {
  return (
    <StyleRegistry>
      <Main />
    </StyleRegistry>
  );
}

What have I missed here? Thanks.

P.S. I used the vite plug-in, not the unpluggin. (Thanks for the peer updates)

[lxsmnsyc]

I mentioned it in the release notes. https://github.com/lxsmnsyc/solid-styled/releases/tag/v0.10.0

Since :global and @global are still declared in a "local sheet", their behavior will remain as-is. In the future, this behavior might be fixed for consistency.

[AverTry]

Ok that was a big misunderstanding as you said "Great that I found a workaround. Wait for a new minor release in a couple of days." Why was the thread closed, if there was no fix?

Yes I thought so, you also say it's fixed, to me that means dynamic globals work??? This I assumed was with the introduction of useSolidStyledGlobal

OK I will leave this alone now. Thanks for your time though.

[lxsmnsyc]

• The original thread was about <style jsx global>. With the attribute, it's easier to decide what to do with it and so the issue was indeed fixed.
• css has a different mechanism compared to the jsx counterpart. Of course, the feature set might be similar however there was no way for me to actually extract which styles are global vs which isn't, which is why I added the reminder that the behavior would remain the same (regardless if it was the style element or the tagged template).

What I can recommend you now is to use <style jsx global> for dynamic global templates, the rest you can use either the tagged template or the jsx form.

[AverTry]

Thank you, sorry for getting frustrated, <style jsx global> does work as intended, I was blind but now I see.