joshblack

Pure ESM package

The package linked to from here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

joshblack

@use 'sass:list';
@use 'sass:map';

$themes: (
  light: (
    background: #ffffff,
  ),
  dark: (
    background: #000000,
  ),

joshblack

$theme: (
  ui-01: black,
);

$light: (
  ui-01: white,
);

@mixin theme($theme-to-apply) {

joshblack

$theme: (
  ui-01: black,
);

$light: (
  ui-01: white,
);

@mixin theme($theme-to-apply) {

joshblack

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div

joshblack

@use 'sass:color';
@use 'sass:list';
@use 'sass:map';

@mixin theme($theme, $rgb: ui-background) {
    @each $key, $value in $theme {
        --#{$key}: #{$value};
        @if list.index($rgb, $key) != null {
            --#{$key}-rgb: #{color.red($value)}, #{color.green($value)}, #{color.blue($value)};
        }

joshblack

@use 'sass:color';
@use 'sass:map';

@mixin theme($theme) {
    @each $key, $value in $theme {
        --#{$key}: #{$value};
    }
}

$light: (

joshblack

@mixin theme($tokens) {
    & {
        @each $token, $value in $tokens {
            --#{$token}: #{$value};
        }
    }
}

$theme: (
  white: #ffffff,

joshblack

// Spacing
@mixin emit-spacing-utilities($scale) {
    @each $step in $scale {
        $short: map-get($step, 'short');
        $value: map-get($step, 'value');
        
        .mt-#{$short} {
            margin-top: $value;
        }
        

joshblack

import { useReducer } from 'react';

function forcedReducer(state) {
  return !state;
}

function useForceUpdate() {
  return useReducer(forcedReducer, false)[1];
}