Migration Code To And From Paperclip

Migrating from CSS

All you need to do is copy & paste CSS into a Paperclip file. Here's an example:

.container {
font-family: sans-serif;
color: #F60;
font-size: 18px;
}
.content {
padding: 10px;
}

☝ After copying, wrap this stuff with @export:

<style>
@export {
.container {
font-family: sans-serif;
color: #333;
}
.content {
padding: 10px;
}
}
</style>

The @export allows for your selectors to be used in other documents. Without it, these styles would only work in the document the document they're defined in.

From there you can start using your styles:

demo.pc
migrated-css.pc
⚡️ Preview

Migrating from Styled Components, Emotion, etc

For the most part, translating styled components to Paperclip is a 1-1 map. Here's an example of some styled components:

import styled from "styled-component";
import theme from "path/to/my/theme";
export const Button = styled.button`
font-family: ${theme.fontFamily1};
font-size: ${theme.fontSize1};
padding: 8px 16px;
border: 2px solid ${theme.borderColor1};
display: inline-block;
border-radius: 99px;
${({secondary}) => secondary ? `
background: ${theme.backgroundAlt1};
color: ${theme.textColorAlt1};
` : ""}
`;

The translation to Paperclip would be this:

button.pc
theme.pc
⚡️ Preview

After migrating from Emotion / styled-components / etc, all you need to do is change your styled component imports:

// Change this:
// import { Button } from "./styles.tsx";
// To this:
import { Button } from "./styles.pc";
// Everything else remains the same.
<Button />
<Button secondary />