Skip to content

Instantly share code, notes, and snippets.

View astahmer's full-sized avatar

Alexandre Stahmer astahmer

View GitHub Profile
@astahmer
astahmer / docusaurus2-webpack-plugin.js
Created August 15, 2020 00:28
Tiny docusaurus 2 plugin that enables you to easiliy extend config and/or add module aliases
const path = require("path");
function fromEntries(iterable) {
return [...iterable].reduce((obj, [key, val]) => {
obj[key] = val;
return obj;
}, {});
}
/**
@astahmer
astahmer / Collapse.tsx
Created August 15, 2020 23:34
Collapse component with auto height open/close transition
import React, { useState } from "react";
import AnimateHeight from "react-animate-height";
export const Collapse = ({ children, minHeight = 0 }) => {
const [height, setHeight] = useState<any>(minHeight);
const isClosed = height === minHeight;
const toggle = () => setHeight(isClosed ? "auto" : minHeight);
return (
<div>
@astahmer
astahmer / getLineStart.js
Created August 27, 2020 18:35
Get line start
const getLineStart = (content, fromWord) =>
content.substring(
content.lastIndexOf('\n', content.indexOf(fromWord)),
content.indexOf(fromWord)
)
const wait = (duration, callback) => new Promise((resolve) => setTimeout(() => resolve(callback?.()), duration))
@astahmer
astahmer / imports-search.js
Created December 8, 2020 14:21
VSCode camel/Pascal case file imports regex search
const PascalCase = /from "(\.\/)*([A-Z])+([A-Za-z0-9]*)+";/;
/*
Find these, starting at "from" ending at ";"
export * from "./Reader";
export * from "./AliasHandler";
export * from "./EntityGroupsMetadata";
export * from "./SuchNameShouldNotExist";
*/
@astahmer
astahmer / Box.tsx
Created July 17, 2022 13:58
vanilla-extract + dessert-box Box props
import { NonUndefined } from 'pastable';
import { defineProperties } from '@vanilla-extract/sprinkles';
import tb from 'ts-toolbelt';
import { vtmnPreset } from './vtmn-preset';
const colors = mapTailwindColorsToTheme(vtmnPreset.theme.colors);
export const colorStyles = defineProperties({
conditions: {
lightMode: {},
@astahmer
astahmer / doc.md
Last active April 24, 2023 08:09
pnpm-where.ts command to locate a binary
@astahmer
astahmer / panda-vite.ts
Created December 2, 2023 14:46
Panda CSS vite plugin to inline `css` result as class strings
import { PandaContext, loadConfigAndCreateContext } from '@pandacss/node'
import { createCss } from '@pandacss/shared'
import { isAbsolute, resolve } from 'path'
import { PluginOption, ResolvedConfig, createFilter } from 'vite'
import MagicString from 'magic-string'
const ensureAbsolute = (path: string, root: string) => (path ? (isAbsolute(path) ? path : resolve(root, path)) : root)
const pandaVite = (): PluginOption => {
let config: ResolvedConfig
let root: string
@astahmer
astahmer / chakra-reset-css.ts
Created January 17, 2024 00:07
Generate Chakra-UI reset.css inside a @layer with an optional scope selector
/**
https://github.com/chakra-ui/chakra-ui/blob/768aea0f0eb55af9d2e13d7568d92b0b995a0699/packages/components/src/css-reset/css-reset.tsx
*/
const css = String.raw;
const vhPolyfill = css`
:root,
:host {
--chakra-vh: 100vh;
@astahmer
astahmer / remove-unused-css-vars.ts
Created February 23, 2024 17:34
Remove unused CSS vars using LightningCSS plugin with visitors
// port of https://github.com/chakra-ui/panda/blob/f58f6df22d7cfc0163296bc86a811da64e74977a/sandbox/vite-ts/remove-unused-css-vars.ts
// with lightningcss
// doesn't seem much faster, probably because of the `Stylesheet` visitor
// `transform` is lightningcss fn
/*
// using this lightningcss plugin
pnpm panda cssgen --lightningcss -o oui.css
traverse: 3.357ms
transform: 18.327ms