open-index/open-npm huggingface dataset:
npm package: @mussonindustrial/postcss-perspective-style-class
Description: PostCSS plugin for Perspective Style Classes
Author: Musson Industrial
Latest version: 0.2.4

# postcss-perspective-style-class

[PostCSS] plugin for generating Perspective Style Classes using attribute syntax.

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

```css
[psc='Folder1/class'] {
    color: black;
}

[psc='Folder1/Folder2/class'] {
    color: black;
}

[psc='Folder1/class1'].otherClass1 .otherClass2 {
    color: black;
}
```

will be processed to:

```css
.psc-Folder1\/class {
    color: black;
}

.psc-Folder1\/Folder2\/class {
    color: black;
}

.psc-Folder1\/class1.otherClass1 .otherClass2 {
    color: black;
}
```

## Usage

**Step 1:** Install the plugin:

```sh
npm install --save-dev postcss @mussonindustrial/postcss-perspective-style-class
```

**Step 2:** Check your project for existing PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

**Step 3:** Add the plugin to the plugins list:

```diff
module.exports = {
  plugins: [
+   require('@mussonindustrial/postcss-perspective-style-class'),
    require('autoprefixer')
  ]
}
```

## Options

### `separator`

By default, the plugin will use `/` as the separator for Style Class folders.
Use this option to specify a custom separator to use in your CSS.

```js
postcss([
    require('@mussonindustrial/postcss-perspective-style-class')({
        separator: '-',
    }),
])
```

```css
/* Input */
[psc='Folder1-class'] {
    color: black;
}

/* Output */
.psc-Folder1\/class {
    color: black;
}
```

### `cb`

A callback function can be specified which will be supplied with a list of the Style Class paths encountered.

```js
const cb = (styleClasses) => console.log(styleClasses)
postcss([require('@mussonindustrial/postcss-perspective-style-class')({ cb })])
```

```css
[psc='Folder1/class1'].otherClass,
[psc='Folder2/class2'] {
    color: black;
}
```

results in:

```js
;['Folder1/class1', 'Folder2/class2']
```

[official docs]: https://github.com/postcss/postcss#usage
npm package: @mustafa-php/simsek-file
Description: Modern, feature-rich file upload library with TypeScript support
Latest version: 1.0.0

# SimsekFile 📁

Modern, feature-rich file upload library with TypeScript support.

[![npm version](https://img.shields.io/npm/v/simsek-file.svg)](https://www.npmjs.com/package/simsek-file)
[![license](https://img.shields.io/npm/l/simsek-file.svg)](https://github.com/mustafa-php/simsek-file/blob/main/LICENSE)

## ✨ Features

- 🚀 **Chunk Upload** - Upload large files in chunks with automatic retry
- 🖼️ **Image Compression** - Compress images before upload
- ↕️ **Drag & Drop Sorting** - Reorder files with drag and drop
- 🎨 **Theme Support** - Dark, light, minimal, and custom themes
- 🌍 **Internationalization** - Built-in TR and EN translations
- ♿ **Accessibility** - WCAG compliant with keyboard navigation
- 📦 **Zero Dependencies** - Pure TypeScript implementation
- 📝 **Full TypeScript Support** - Complete type definitions

## 📦 Installation

```bash
npm install simsek-file
```

## 🚀 Quick Start

```typescript
import { SimsekFile } from 'simsek-file';
import 'simsek-file/style.css';

const uploader = new SimsekFile({
  target: '#uploader',
  uploadUrl: '/api/upload',
  maxFiles: 5,
  maxFileSize: 5 * 1024 * 1024, // 5MB
  theme: { name: 'dark' },
  i18n: { locale: 'en' },
});

uploader.on('upload:success', (event) => {
  console.log('File uploaded:', event.file.file.name);
});
```

## 📖 Documentation

- [English Documentation](./docs/README.md)
- [Türkçe Dokümantasyon](./docs/README.tr.md)
- [API Reference](./docs/API.md)
- [Changelog](./docs/CHANGELOG.md)

## 🎨 Themes

```typescript
// Dark theme (default)
{ theme: { name: 'dark' } }

// Light theme
{ theme: { name: 'light' } }

// Minimal theme
{ theme: { name: 'minimal' } }

// Custom theme
{
  theme: {
    name: 'custom',
    custom: {
      colors: {
        primary: '#e94560',
        background: '#1a1a2e',
      },
    },
  },
}
```

## 📋 Examples

See the [examples](./examples) folder for complete examples:

- [Basic Usage](./examples/basic.html)
- [Chunked Upload](./examples/chunked-upload.html)
- [Image Compression](./examples/image-compression.html)
- [Custom Themes](./examples/custom-theme.html)
- [Drag & Sort](./examples/drag-sort.html)

## 🛠️ Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run tests
npm test

# Lint code
npm run lint
```

## 📄 License

MIT © 2024 SimsekFile Contributors