open-index/open-npm huggingface dataset:
npm package: @hsuna/postcss-media-query-transform
Description: PostCSS plugin designed to automatically adjust pixel values within specified media queries. It scales the numeric values of designated units according to predefined ratios, ensuring consistent and responsive design across various devices and screen sizes
Author: hsuna
Latest version: 1.0.0

# postcss-media-query-transform

A plugin for [PostCSS](https://github.com/ai/postcss) that generates px or rpx units from rem units.

- Rewrite with `typescript` and well tested.
- TransformUnit Support `px` and `rpx` and `rem`!

> You should use `postcss@8.x`

## Install

```shell
npm i -D postcss-media-query-transform
yarn add -D postcss-media-query-transform
pnpm i -D postcss-media-query-transform
```

## Usage

### Use with postcss.config.js

```js
// postcss.config.js
module.exports = {
  plugins: [
    // for example
    // require('autoprefixer'),
    require("postcss-media-query-transform")({
      mediaQuery: { query: "(min-width: 400px)", scale: 0.5 },
      propList: ["*"],
      transformUnit: "px",
    }),
  ],
};
```

## Input/Output

_With the default settings, only font related properties are targeted._

```scss
// input
h1 {
  margin: 0 0 20px;
  font-size: 2rpx;
  line-height: 1.2;
  letter-spacing: 0.0625px;
}

// output
h1 {
  margin: 0 0 20px;
  font-size: 2rpx;
  line-height: 1.2;
  letter-spacing: 0.0625px;
}

@media (min-width: 400px) {
  h1 {
    letter-spacing: 0.03125px;
  }
}
```

## Options

Type: `Object | Null`
Default:

```js
const defaultOptions = {
  mediaQuery: { query: "(min-width: 400px)", scale: 0.5 },
  unitPrecision: 5,
  selectorBlackList: [],
  propList: ["font", "font-size", "line-height", "letter-spacing"],
  transformUnit: "px",
  exclude: [/node_modules/i],
  disabled: false,
};
```

### mediaQuery

Type: `MediaQueryScale` or `MediaQueryScale[]`

The media query string to be transformed，and scale value.

## unitPrecision

Type: `number`

The decimal precision px units are allowed to use, floored (rounding down on half).

## propList

Type: `(string | RegExp)[]`

The properties that can change from rem to px.

## selectorBlackList

Type: `(string | RegExp)[]`

The selectors to ignore and leave as rem.

## exclude

Type: `(string | RegExp)[] | ((filePath: string) => boolean)`

The file path to ignore and leave as px.

## transformUnit

Type: `'px' | 'rpx' | 'rem'`

The transform output unit.

## insert

Type: `'before' | 'after'`

The insert output postion，you can select insert input before or after.

## disabled

Type: `boolean`

If disable this plugin.

### A message about ignoring properties

Currently, the easiest way to have a single property ignored is to use a capital in the px unit declaration.

```scss
// `Px` or `PX` is ignored by `postcss-rem-to-pixel` but still accepted by browsers
.ignore {
  border: 1px solid; // ignored
  border-width: 2px; // ignored
}
```

Thanks to the author of `postcss-rem-to-pixel` and `postcss-pxtorem`.
npm package: @hsuna/rsbuild-plugin-svg-sprite-loader
Description: [English](./README.md) | 简体中文
Author: hsuna
Latest version: 1.0.0

# @hsuna/rsbuild-plugin-svg-sprite-loader

[English](./README.md) | 简体中文

将指定目录下的所有 SVG 文件打包为一个 SVG Sprite，并在 Rsbuild 的 HTML 中自动注入，方便通过 `<use>` 在页面中引用。

<p>
  <a href="https://www.npmjs.com/package/@hsuna/rsbuild-plugin-svg-sprite-loader">
   <img src="https://img.shields.io/npm/v/%40hsuna%2Frsbuild-plugin-svg-sprite-loader?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
  </a>
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
  <img src="https://img.shields.io/npm/dm/%40hsuna%2Frsbuild-plugin-svg-sprite-loader?style=flat-square&colorA=564341&colorB=EDED91" alt="npm downloads" />
</p>

## 特性

- 递归收集目录下的所有 `.svg` 文件，并生成 `<symbol id="...">` 精灵图
- 支持自定义符号 ID：模板字符串（如 `icon-[name]`）或函数 `(name) => string`
- 构建与本地开发均生效，零运行时依赖，纯 HTML 注入
- 简单、可预测：只做文件读取与 HTML 注入，不修改你的打包产物结构

## 安装

```bash
npm i -D @hsuna/rsbuild-plugin-svg-sprite-loader
```

> 需要 Rsbuild 1.x（`@rsbuild/core`）。

## 快速上手

在 `rsbuild.config.ts` 中注册插件（推荐使用绝对路径或 `join(__dirname, ...)` 指向图标目录）：

```ts
// rsbuild.config.ts
import { join } from 'node:path';
import { defineConfig } from '@rsbuild/core';
import { pluginSvgSpriteLoader } from '@hsuna/rsbuild-plugin-svg-sprite-loader';

export default defineConfig({
  plugins: [
    pluginSvgSpriteLoader({
      path: join(__dirname, 'src/icons'),
      // 支持模板：默认 'icon-[name]'；也可传函数
      symbolId: 'icon-[name]',
    }),
  ],
});
```

在页面中使用（例如某个组件/HTML）：

```html
<svg width="16" height="16" aria-hidden="true">
  <use xlink:href="#icon-home" />
  <!-- 如果 symbolId 使用函数 (name) => `svg-${name}`，则为 #svg-home -->
  <!-- Chrome/Safari 也可使用 href="#icon-home" -->
  
</svg>
```

> 插件会在 HTML 的 `<body>` 顶部注入一个隐藏的 `<svg>`，其中包含所有收集到的 `<symbol>`，因此无需在运行时再发起额外请求。

## 配置项

`SvgSpriteLoaderOptions`

- path: string（必填）
  - 图标目录的文件系统路径；会递归查找该目录下所有以 `.svg` 结尾的文件。
  - 建议使用 `join(__dirname, '...')` 生成绝对路径。
- symbolId?: string | (name: string) => string（可选，默认：`icon-[name]`）
  - 传入字符串时，使用占位符 `[name]` 表示图标文件名（不含扩展名）。
  - 也可传函数完全控制生成规则。

示例：

```ts
pluginSvgSpriteLoader({
  path: join(__dirname, 'src/icons'),
  // 'icon-[name]' => 文件 home.svg 会得到 id="icon-home"
  symbolId: 'icon-[name]',
});

pluginSvgSpriteLoader({
  path: join(__dirname, 'src/icons'),
  // 自定义函数形式
  symbolId: (name) => `svg-${name}`,
});
```

## 工作方式

构建/开发期间，插件会：

1. 递归读取 `path` 下的所有 `.svg` 文件；
2. 使用 [`svg-baker`](https://github.com/kisenka/svg-baker) 将每个图标转换为 `<symbol>`；
3. 将所有 `<symbol>` 拼接为一个 `<svg>` 精灵图，并注入到 HTML `<body>` 开头（默认通过行内样式隐藏尺寸）。

注意：若不同目录下存在同名文件且生成的 `id` 相同，后读到的会覆盖先前的定义。建议保证文件名或生成规则的唯一性。

## Playground（示例）

本仓库提供了最小示例，可本地体验：

```bash
# 先在根目录安装与构建
npm install
npm run build

# 进入示例并启动 dev
cd playground
npm run dev
```

## 安全说明（依赖覆盖）

本项目使用 `svg-baker`，其间接依赖曾出现安全告警（例如 `braces`、`postcss`）。本仓库已通过 npm `overrides` 在开发环境中强制使用安全版本。

对于你的应用项目，如遇到相同的审计告警，可在应用的 `package.json` 中添加：

```json
{
  "overrides": {
    "braces": "^3.0.3",
    "micromatch": "^4.0.8",
    "postcss": ">=8.4.31"
  }
}
```

> 注：`overrides` 仅作用于顶层应用的安装过程，库自身的覆盖不会自动传递到使用方。

## License

[MIT](./LICENSE)
npm package: @hsuna/taro-axios
Description: 在 Taro 中使用 axios。
Author: Hsuna Chan
Latest version: 4.0.4

# @hsuna/taro-axios <a href="https://www.npmjs.com/package/taro-axios"><img src="https://badge.fury.io/js/taro-axios.svg" alt="NPM Version"></a> <a href="https://travis-ci.org/hsuna/taro-axios"><img src="https://travis-ci.org/hsuna/taro-axios.svg?branch=master" alt="Build Status"></a> <a href="https://codecov.io/gh/hsuna/taro-axios"><img src="https://codecov.io/gh/hsuna/taro-axios/branch/master/graph/badge.svg" alt="Coverage Status"></a> <img src="https://badgen.net/github/license/hsuna/taro-axios" alt="License">

在 [Taro](https://github.com/NervJS/taro) 中使用 [axios](https://github.com/axios/axios)。

## 源起

因为 `Taro` 不支持解析 `package.json` 里的 `browser` 属性，导致所有使用了该特性的包都可能无法在 `Taro` 里正常运行。不幸的是，`axios` 就是其中之一。

于是，`taro-axios` 预先解析了 `axios` 包中的 `browser` 属性并提供了 `Taro` 版的请求适配器后，将之打包出了一个 `Taro` 可用的版本。

也就是说，`taro-axios` 只是 `axios` 的 `Taro` 重制版，并非是为 `Taro` 仿写了一个 `axios`。`axios` 提供什么，`taro-axios` 也就提供什么。

## 特性

- 使用 TypeScript 编写，类型友好
- 基于 Taro 适配器，天然支持多端
- 支持 API 一致的多端上传文件

## 安装

### Taro 3、Taro 4

```bash
# yarn
yarn add @hsuna/taro-axios

# 或, npm
npm i @hsuna/taro-axios --save
```

### Taro 1、Taro 2

```bash
# yarn
yarn add taro-axios@0.7.0

# 或, npm
npm i taro-axios@0.7.0 --save
```

## 使用

使用方法同 [axios](https://github.com/axios/axios#axios)。

只不过你得这样引入 `axios`：

```ts
import { axios } from "@hsuna/taro-axios";
// 自版本 0.7.0 起你也可以这样引入:
// import axios from 'taro-axios'

axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) => {
  console.log(res.data);
});
```

## 上传文件

为了支持多端上传文件，我们得引入 `PostData` 和 `FileData` 两个类，示例：

```ts
import { axios, PostData, FileData } from "@hsuna/taro-axios";

async function uploadImage() {
  const { tempFilePaths } = await Taro.chooseImage({ count: 1 });
  Taro.showLoading({ title: "图片上传中..." });
  const res = await axios.post(
    "https://sm.ms/api/upload",
    new PostData({
      smfile: new FileData(tempFilePaths[0]),
      ssl: true,
      format: "json",
    })
  );
  Taro.hideLoading();
  Taro.showModal({
    title: "返回结果",
    content: JSON.stringify(res.data),
  });
}
```

## 许可

MIT © Hsuna Chan