Add preset for SolidJS

[ben-rogerson]

Twin now has support for SolidJS :tada:

When we define the solid preset like this:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'solid',
  },
}

Or in package.json:

// package.json
"babelMacros": {
  "twin": {
    "preset": "solid"
  }
},

Twin will use the imports from solid-styled-components - the official css-in-js library provided by the SolidJS team.

Here are the conversions that happen during common styling patterns:

tw prop

function Component() {
  return <div tw="block" />
}
// ↓ ↓ ↓ ↓ ↓ ↓
import { styled } from "solid-styled-components";
const TwComponent = styled("div")({ "display": "block" });
function Component() {
  return <TwComponent data-tw="block" />;
}

css prop

const Component = ({ children }) => (
  <div css={[]}>{children}</div>
)
// ↓ ↓ ↓ ↓ ↓ ↓
import { styled } from "solid-styled-components";
const TwComponent = styled("div")([]);
const Component = ({ children }) => (
  <TwComponent>{children}</TwComponent>
)

tw.div

import tw from "twin.macro"
const Component = tw.div`block`
// ↓ ↓ ↓ ↓ ↓ ↓
import { styled } from "solid-styled-components";
const Component = styled("div")({ "display": "block" });

styled.div

import { styled } from "twin.macro"
const Component = styled.div([])
// ↓ ↓ ↓ ↓ ↓ ↓
import { styled } from "solid-styled-components";
const Component = styled("div")([]);

More

• StackBlitz example
• SolidJS example
• solid-styled-components

Related https://github.com/ben-rogerson/twin.macro/pull/398