segunadebayo

CLI ideas

chakra compose

This command will allow you import component compositions into your project.

By default, it'll import all component compositions.

## add a specific component

segunadebayo

import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'

const typographyProperties = defineProperties({
  ...responsiveProperties,
  properties: {
    fontSize: fontSizePairings,
    lineHeight: lineHeights,
    fontWeight: fontWeights,
    letterSpacing: letterSpacings,
    textAlign: ['left', 'right', 'center'],

segunadebayo

const items = ['React', 'Solid', 'Vue']

const Basic = () => {
  const contentRef = useRef(null)

  const api = useVirtualizer({
    count: items.length,
    getScrollElement: () => contentRef.current,
    estimateSize: () => 35,

segunadebayo

const childProcess = require('child_process')
// gaze是用于监听文件变化的工具
const Gaze = require('gaze');
// 有更友好展示的console
const consola = require('consola')

class MyPlugin {
  // 将 `apply` 定义为其原型方法，此方法以 compiler 作为参数
  apply(compiler) {

segunadebayo

import { useRef } from "react";
import warning from "rc-util/lib/warning";
/**
 * Keep input cursor in the correct position if possible.
 * Is this necessary since we have `formatter` which may mass the content?
 */
export default function useCursor(
  input: HTMLInputElement,
  focused: boolean
): [() => void, () => void] {

segunadebayo

import fs from "fs"
import Discord from "discord.js"
import { config } from "dotenv"
import ora from "ora"
import { outdent } from "outdent"

config()

const CHANNELS = {
  ANNOUNCEMENT: process.env.CHANNEL_ID,

segunadebayo

const variants = {
 'with-indicator': definePartsStyle((props) => {
    const sizes = {
      md: {
        tablist: {
          h: 11,
          px: 1,
        },
        tab: {
          fontSize: 'sm',

segunadebayo

/* Non-atomic */

.css-Box {
  background: red;
  font-size: 10px;
}

.css-Tab {
 background: red;

segunadebayo

Assets

Rename assets to chunks

A chunk will look like this

const file = {
  base: ``,
  utilities: ``,

segunadebayo

const settings = {
  primaryColor: "#red",
  font: "UI Big",
};

const content = {
  hero: {
    title: "Expert homeschooling service",
 desc: "Keep your kids learning at home with online or in-person lessons taught by exceptional teachers",