v0.10.0

• <style jsx global> now has a different behavior
  • When provided with dynamic values, previously it would be included to the scoped variables, which is "counter-intuitive" towards its behavior. Now, the dynamic variables are now inserted directly to the document (in CSS, this would be :root. The new behavior is also SSR-friendly, as the variables are generated with :root style and inserted alongside the accompanied style sheet.
  • Internally, this introduces a new primitive called useSolidStyledGlobal.
  • Fixes #28
  • 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.
• Fix vars declaration to only generate if there's actually any dynamic styles.
• Fix @global (Fixes #18)

v0.9.0

• Move from postcss and csstree to lightningcss
• Add unplugin

PostCSS Preprocessing

• This release adds PostCSS for processing the CSS templates. You can check the following plugins, that are used by default, for the features that are supported:
  • Autoprefixer
  • postcss-nested
  • CSSNano
    In the future, solid-styled can possibly allow to load the PostCSS config and to allow other plugins to be used.
• Fix use:solid-styled type to be in JSX.IntrinsicAttributes

v0.7.1

Adds plugins for Rollup and Vite

v0.7.0

• Move babel-plugin-solid-styled to solid-styled/babel
• Add support for namespace import (i.e. solidStyled.css)
• Fix scoping attributes from data-s-* to s:*
• Fix support for multiple roots and allow optional use of StyleRegistry on client-side.
• Fix <style jsx> to output JSXText instead of JSXFragment (due to Solid throwing an error for non-top-level fragments).
• Fix style merging when style is nullish.

Credits to @zaydek for spotting most of the issues

v0.6.0

• Fix hash generation to support out-of-order file loading, drop mode option and add source option.
  • Previously, solid-styled used a sequential hash algorithm however it naively assumed that files are loaded in the same order as they are in different context (i.e. server vs client). The new hash generation produces a base hash from the file path (either through source option or automatically by Babel) and then produces a sequential id appended to the base hash.

v0.5.1

• Fix a minor TS issue where solid-styled is hinted as solid-styled/*. (#6, thanks to @hasali19!)

v0.5.0

• Replaces ssr option with mode to allow wider range of bundling options.
• Adds "type": "module" support
• Remove JSX

v0.4.0

• Add support for prefix.
  • This is useful for when authoring packages that uses solid-styled.
• Rework id generation and add ssr option.
  • Previously, solid-styled uses nanoid for ID generation. However, nanoid isn't deterministic and sequential, so if solid-styled is used for SSR purposes where it is common to output two or more separate bundles, id generation will be inconsistent. The new id generation uses PostgreSQL' pseudo_encrypt, which produces consistent ID values that looks random but isn't. The new ssr option would allow solid-styled to know which instance of the id generation would be used to allow continuation.

v0.3.0

• Add <style jsx> and <style jsx global>. It's inspired by styled-jsx and functions similarly to css.

function Button() {
  const [color, setColor] = createSignal('red');
  return (
    <>
      <style jsx>
        {`
          button {
            color: ${color()};
          }
        `}
      </style>
      <button onClick={() => {
        setColor((c) => (c === 'red' ? 'blue' : 'red'));
      }}>
        Current color: {color()}
      </button>
    </>
  );
}

• Fix styles to no longer rely on component IDs and using an internal effect for style patching, instead, it compiles to style prop and attempts style merging (if user provides one). This also improves support for SSR.
• Fix callbacks inside functions where css is declared to be affected by scoping. This allows components like <Show> and <For> to be scoped properly.