crcn

CSS:

.Button {
  border: none;
  padding: 16px;
  
  &--primary {
    background: blue;
 &:hover {

crcn

describe(() => {
  let ConnectedPage;

  // Wrap the page with everything it needs to work
  beforeEach(() => {
    ConnectedPage = ({ state, ...rest}) => <SomeStoreContext.Provider value={state}>
       <Page {...rest} />
     </SomeStoreContext.Provider>
  });
  

crcn

// there are many ways to massage this to look prettier, but this
// essentially is a pure JS side-effect engine.

// API passed in like this so that we can test the engine. 
const GroceryListEngine = (api) => (dispatch, initialState) => {
  
  // all side-effect functions take an event, do one thing, then
  // dispatch a new event. 
  const createListItem = ({payload:{text}}) => {
    api.addListItem(text)

crcn

import * as lru from "lru-cache";

const DEFAULT_LRU_MAX = 1000;

// need this for default arguments
const getArgumentCount = (fn: Function) => {
  const str = fn.toString();
  const params = str.match(/\(.*?\)/)[0];
  const args = params

crcn

const Adder = ({ a, b }) => {
  return <span>{ a + b }</span>
};

crcn

<style>
  :global(*) {
    box-sizing: border-box;
  }
</style>

crcn

<import src="tailwind.css" as="tw"  />


<!--
  @frame { width: 768, height: 768, x: 0, y: 0 }
-->

<div class="$tw.font-sans $tw.bg-gray-500 $tw.h-screen $tw.w-screen">
  <div class="$tw.bg-gray-100 $tw.rounded-lg $tw.p-8 $tw.md:p-0">
    <div class="$tw.pt-6 $tw.text-center $tw.space-y-4">

crcn

<!-- Message.pc -->
<div export component as="default">
  <span class={labelClass}>
    Hello
  </span> {children}!
</div>

crcn

<import src="./Message.pc" as="Message" />

<style>
  .my-style-override {
    color: red;
    font-weight: 800;
  }
</style>

<!-- The $ syntax tells Paperclip to inject this style into the imported component -->

crcn

<!-- 
  You can define styles at the top of the document, and they will
  be applied to all elements within this file.
-->
<style>
  div {
    color: red;
  }
</style>