open-index/open-npm huggingface dataset:
npm package: @maas/postcss-each
Description: A [PostCSS] plugin to iterate through values.
Author: Alexander Madyankin
Latest version: 1.0.0

# postcss-each

A [PostCSS] plugin to iterate through values.

[PostCSS]: https://github.com/postcss/postcss

Iterate through values:

```css
@each $icon in foo, bar, baz {
  .icon-$(icon) {
    background: url('icons/$(icon).png');
  }
}
```

```css
.icon-foo {
  background: url('icons/foo.png');
}

.icon-bar {
  background: url('icons/bar.png');
}

.icon-baz {
  background: url('icons/baz.png');
}
```

Iterate through values with index:

```css
@each $val, $i in foo, bar {
  .icon-$(val) {
    background: url("$(val)_$(i).png");
  }
}
```

```css
.icon-foo {
  background: url("foo_0.png");
}

.icon-bar {
  background: url("bar_1.png");
}
```

Iterate through multiple variables:

```css
@each $animal, $color in (puma, sea-slug), (black, blue) {
  .$(animal)-icon {
    background-image: url('/images/$(animal).png');
    border: 2px solid $color;
  }
}
```

```css
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
}
```

# Installation

```
npm install --save-dev postcss postcss-each
```

## Usage

```js
postcss([ require('postcss-each') ])
```

### Options

#### `plugins`

Type: `object`  
Default: `{}`

Accepts two properties: `afterEach` and `beforeEach`

#### `afterEach`

Type: `array`
Default: `[]`

Plugins to be called after each iteration

#### `beforeEach`

Type: `array`
Default: `[]`

Plugins to be called before each iteration

```javascript
require('postcss-each')({
  plugins: {
    afterEach: [
      require('postcss-at-rules-variables')
    ],
    beforeEach: [
      require('postcss-custom-properties')
    ]
  }
})
```


See [PostCSS] docs for examples for your environment.
npm package: @maas/vue-autosize
Description: Vue component that interpolates its size according to its content
Latest version: 1.7.0

# 📏 Vue Autosize

Autosize is a component that automatically interpolates its size to its child’s size.

## 📦 Install

```sh
pnpm install @maas/vue-autosize
```

## 🪄 Use

```vue
<script setup>
import { AutoSize } from '@maas/vue-autosize'
</script>

<template>
  <auto-size>
    <!-- your content -->
  </auto-size>
</template>
```

> [!IMPORTANT]
> The component’s children need to be either given a fixed width or rendered as `inline`, `inline-block`, or `inline-flex` elements.

## ✅ Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually to use the component.

```sh
pnpm install @vueuse/core vue
```

## 🐛 Found a Bug?

If you see something that doesn’t look right, [submit a bug report](https://github.com/magicasaservice/vue-autosize/issues/new?assignees=&labels=bug%2Cpending+triage&template=bug_report.yml). See it. Say it. Sorted.

## 📄 License

[MIT License](https://github.com/magicasaservice/vue-autosize/blob/main/LICENSE) © 2025-PRESENT [Magic as a Service GmbH](https://github.com/magicasaservice)
npm package: @maas/vue-primitive
Description: Vue component for passing attributes to slot content
Latest version: 1.4.0

# 🥚 Vue Primitive

## 📦 Install

```
pnpm install @maas/vue-primitive
```

## 🪄 Use

### as

```vue
<template>
  <Primitive as="button" type="button" @click="handleClick">
    Click me
  </Primitive>
</template>
```

```html
<button type="button">Click me</button>
```

### asChild

```vue
<template>
  <Primitive as-child type="button" class="my-button" @click="handleClick">
    <button>Click me</button>
  </Primitive>
</template>
```

```html
<button type="button" class="my-button">Click me</button>
```

## 🐛 Found a Bug?

If you see something that doesn’t look right, [submit a bug report](https://github.com/magicasaservice/vue-primitive/issues/new?assignees=&labels=bug%2Cpending+triage&template=bug_report.yml). See it. Say it. Sorted.

## 🤝 Credit

This package is mostly a port of [Radix Vue](https://github.com/unovue/reka-ui/tree/v1)’s `Primitive` component. The original concept of the `asChild` prop was invented by the creators of [Radix Primitives](https://github.com/radix-ui/primitives) as far as we know.

## 📄 License

[MIT License](https://github.com/magicasaservice/vue-primitive/blob/main/LICENSE) © 2024-PRESENT [Magic as a Service GmbH](https://github.com/magicasaservice)
npm package: @maas/wheel-gestures
Description: wheel gestures and momentum detection
Latest version: 1.0.0

# WheelGestures

## 🚧 Disclaimer

This project is a fork of https://github.com/xiel/wheel-gestures. It solely exists to fix some problems with type imports. The original package seems to be abandoned, thus the fork and republish.

## Installation

Install `@maas/wheel-gestures` using your package manager:

```sh
pnpm install @maas/wheel-gestures # OR npm install @maas/wheel-gestures
```

## Usage

Import and create an instance of WheelGestures and then add the element you want to observe.

```TypeScript
import { WheelGestures } from '@maas/wheel-gestures'

// create an instance per element
const wheelGestures = WheelGestures()

// find and observe the element the user can interact with
const element = window.document.querySelector('.slider')
wheelGestures.observe(element)

// add your event callback
wheelGestures.on('wheel', (wheelEventState) => {
  //...
})
```

There are [options](https://wheel-gestures.xiel.dev/docs/options/) to customize the behaviour.

#### WheelEventState

This is the TypeScript type of the WheelEventState object provided. Even if you do not use TypeScript, this might be helpful to see how the data is provided:

```TypeScript
export type VectorXYZ = [number, number, number]

export interface WheelEventState {
  isStart: boolean
  isMomentum: boolean
  isEnding: boolean
  isMomentumCancel: boolean
  axisDelta: VectorXYZ
  axisVelocity: VectorXYZ
  axisMovement: VectorXYZ
  axisMovementProjection: VectorXYZ
  event: WheelEvent | WheelEventData
  previous?: WheelEventState
}
```

Read more in the [docs](https://wheel-gestures.xiel.dev).

**OS & Browsers**

- Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
- Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads
npm package: @maastrich/hashup
Description: Resolves every import and produces a fully deterministic hash for any entry file.
Author: Mathis Pinsault
Latest version: 0.1.4

# @maastrich/hashup

> Resolves every import and produces a fully deterministic hash for any entry file.

## Installation

```bash
npm install @maastrich/hashup
```

## Usage

Coming soon.

## License

MIT © [Mathis Pinsault](https://github.com/maastrich)
npm package: @maastrich/moonx
Description: A CLI tool to help you with moon syntax
Author: Maastrich @maastrich
Latest version: 0.2.4

# @maastrich/moonx

## Overview

MoonX is a CLI tool that makes it easy to run Moon tasks on multiple workspaces. It automatically scans for Moon tasks in your workspaces and creates a command for each task. You can then run the task on all of your workspaces or on a subset of workspaces.

## Installation

To use MoonX, first install moon it globally with:

```sh
proto install moon
```

Then install MoonX with:

```sh
pnpm install @maastrich/moonx -g # global install is optional but recommended
```

## Usage

### Running Moon tasks

Once MoonX is installed, you can scan for Moon tasks in your workspaces with:

```sh
moonx <command> [...workspaces] [MOON_OPTIONS] -- [COMMAND_OPTIONS]
```

### Help

MoonX provides comprehensive help information for both the MoonX CLI and the Moon tasks that are available in your workspaces. To get help for the MoonX CLI, run:

```sh
moonx --help
```

To get help for a specific Moon task, run:

```sh
moonx <task> --help
```

### Examples

For example, to get help for the `build` task, you would run:

```sh
moonx build --help
```