open-index/open-npm huggingface dataset:
npm package: @strato-css/postcss
Description: PostCSS integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/postcss

PostCSS integration for Strato CSS framework. This plugin processes utility classes and generates CSS.

## Installation

```bash
pnpm add @strato-css/postcss
```

## Usage

### Basic Setup

Add the plugin to your `postcss.config.js`:

```javascript
module.exports = {
  plugins: {
    '@strato-css/postcss': {}
  }
};
```

### With Custom Options

```javascript
module.exports = {
  plugins: {
    '@strato-css/postcss': {
      // Presets
      presets: [],

      // Theme customization
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      },

      // Additional rules
      rules: [],

      // Shortcuts
      shortcuts: []
    }
  }
};
```

## Options

The plugin accepts all options from the Strato CSS generator:

- `presets`: Array of presets to use
- `theme`: Custom theme configuration
- `rules`: Additional utility rules
- `shortcuts`: Utility shortcuts
- `variants`: Custom variants

## Examples

### With Tailwind CSS

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    '@strato-css/postcss': {}
  }
};
```

### With Autoprefixer

```javascript
module.exports = {
  plugins: {
    '@strato-css/postcss': {},
    autoprefixer: {}
  }
};
```

### With CSS Nano

```javascript
module.exports = {
  plugins: {
    '@strato-css/postcss': {},
    cssnano: {
      preset: 'default'
    }
  }
};
```

### Complete Setup

```javascript
module.exports = {
  plugins: {
    '@strato-css/postcss': {
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      }
    },
    autoprefixer: {},
    cssnano: {
      preset: 'default'
    }
  }
};
```

## Features

- ⚡️ Fast processing
- 🔧 Full configuration support
- 📦 Tree-shaking
- 🎨 Preset system
- 🌙 Dark mode support
- 📱 Responsive utilities
- 🔌 Easy integration with existing PostCSS workflows

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT
npm package: @strato-css/solid
Description: Solid.js integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/solid

Solid.js integration for Strato CSS framework. provides utilities and directives for using Strato CSS in Solid applications.

## Installation

```bash
pnpm add @strato-css/solid
```

## Usage

### useStrato Hook

Generate CSS classes dynamically in Solid components.

```tsx
import { useStrato } from '@strato-css/solid';

function Component() {
  const classes = useStrato('p-4 bg-white rounded');

  return <div class={classes()}>Hello Strato CSS!</div>;
}
```

Dynamic utilities:

```tsx
import { useStrato } from '@strato-css/solid';
import { createSignal } from 'solid-js';

function Button() {
  const [isActive, setIsActive] = createSignal(false);

  const classes = useStrato(() => [
    'px-4 py-2 rounded',
    isActive() ? 'bg-primary text-white' : 'bg-gray-200'
  ]);

  return (
    <button
      class={classes()}
      onClick={() => setIsActive(!isActive())}
    >
      Click me
    </button>
  );
}
```

### strato Directive

Apply utilities using Solid's `use:` directive syntax.

```tsx
import { strato } from '@strato-css/solid';

function Component() {
  return <div use:strato="p-4 bg-white rounded">Content</div>;
}
```

## Examples

### Dynamic Button

```tsx
import { useStrato } from '@strato-css/solid';
import { createSignal } from 'solid-js';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

export function Button(props: ButtonProps) {
  const [variant, setVariant] = createSignal(props.variant || 'primary');
  const [size, setSize] = createSignal(props.size || 'md');

  const classes = useStrato(() => [
    'px-4 py-2 rounded font-semibold transition',
    variant() === 'primary' && 'bg-primary text-white hover:bg-primary-600',
    variant() === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    size() === 'sm' && 'text-sm px-3 py-1',
    size() === 'lg' && 'text-lg px-6 py-3'
  ]);

  return (
    <button class={classes()}>
      {props.children}
    </button>
  );
}
```

### Card Component

```tsx
import { useStrato } from '@strato-css/solid';

interface CardProps {
  title: string;
}

export function Card(props: CardProps) {
  const classes = useStrato('bg-white rounded-lg shadow-md p-6');

  return (
    <div class={classes()}>
      <h2 class="text-xl font-bold mb-2">{props.title}</h2>
      {props.children}
    </div>
  );
}
```

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT
npm package: @strato-css/svelte
Description: Svelte integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/svelte

Svelte integration for Strato CSS framework. Provides utilities and actions for using Strato CSS in Svelte applications.

## Installation

```bash
pnpm add @strato-css/svelte
```

## Usage

### strato Action

Use the `strato` action to apply utilities dynamically:

```svelte
<script>
  import { strato } from '@strato-css/svelte';

  let utilities = 'p-4 bg-white rounded';
</script>

<div use:strato={utilities}>Hello Strato CSS!</div>
```

Dynamic utilities:

```svelte
<script>
  import { strato } from '@strato-css/svelte';

  let isActive = false;
  $: classes = isActive ? 'bg-primary text-white' : 'bg-gray-200';
</script>

<div use:strato={classes}>Dynamic classes</div>
```

### useStrato Function

Generate utilities programmatically:

```svelte
<script>
  import { useStrato } from '@strato-css/svelte';

  const classes = useStrato('p-4 bg-white rounded');
</script>

<div class={classes}>Content</div>
```

## Examples

### Button Component

```svelte
<script lang="ts">
  import { useStrato } from '@strato-css/svelte';

  export let variant: 'primary' | 'secondary' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';

  $: buttonClasses = useStrato([
    'px-4 py-2 rounded font-semibold transition',
    variant === 'primary' && 'bg-primary text-white hover:bg-primary-600',
    variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    size === 'sm' && 'text-sm px-3 py-1',
    size === 'lg' && 'text-lg px-6 py-3'
  ].filter(Boolean));
</script>

<button class={buttonClasses}>
  <slot />
</button>
```

### Dynamic Card

```svelte
<script lang="ts">
  import { strato } from '@strato-css/svelte';

  export let title: string;
  export let isHovered = false;

  let cardElement: HTMLDivElement;

  $: cardClasses = [
    'bg-white rounded-lg shadow-md p-6 transition',
    isHovered && 'shadow-lg scale-105'
  ].join(' ');

  // Apply classes when cardClasses changes
  $: if (cardElement) {
    cardElement.className = cardClasses;
  }
</script>

<div bind:this={cardElement}>
  <h2 class="text-xl font-bold mb-2">{title}</h2>
  <slot />
</div>
```

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT
npm package: @strato-css/vite
Description: Vite integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/vite

Vite integration for Strato CSS framework. This plugin provides seamless integration with Vite applications.

## Installation

```bash
pnpm add @strato-css/vite
```

## Usage

### Basic Setup

Add the plugin to your `vite.config.ts`:

```typescript
import { defineConfig } from 'vite';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    strato()
  ]
});
```

### With Custom Options

```typescript
import { defineConfig } from 'vite';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    strato({
      // Presets
      presets: [
        // Import and use presets
      ],

      // Theme customization
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      },

      // Additional rules
      rules: [
        // Custom rules
      ],

      // Shortcuts
      shortcuts: {
        // Custom shortcuts
      }
    })
  ]
});
```

## Options

The plugin accepts all options from the Strato CSS generator:

- `presets`: Array of presets to use
- `theme`: Custom theme configuration
- `rules`: Additional utility rules
- `shortcuts`: Utility shortcuts
- `variants`: Custom variants

## Examples

### React + Vite

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    react(),
    strato()
  ]
});
```

### Vue + Vite

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    vue(),
    strato()
  ]
});
```

### Svelte + Vite

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    svelte(),
    strato()
  ]
});
```

## Features

- ⚡️ Fast HMR support
- 🔧 Full configuration support
- 📦 Tree-shaking
- 🎨 Preset system
- 🌙 Dark mode support
- 📱 Responsive utilities

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT
npm package: @strato-css/webpack
Description: Webpack integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/webpack

Webpack integration for Strato CSS framework. This plugin provides seamless integration with Webpack applications.

## Installation

```bash
pnpm add @strato-css/webpack
```

## Usage

### Basic Setup

Add the plugin to your `webpack.config.js`:

```javascript
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  plugins: [
    new StratoCSS()
  ]
};
```

### With Custom Options

```javascript
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  plugins: [
    new StratoCSS({
      // Presets
      presets: [],

      // Theme customization
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      },

      // Additional rules
      rules: [],

      // Shortcuts
      shortcuts: []
    })
  ]
};
```

## Options

The plugin accepts all options from the Strato CSS generator:

- `presets`: Array of presets to use
- `theme`: Custom theme configuration
- `rules`: Additional utility rules
- `shortcuts`: Utility shortcuts
- `variants`: Custom variants

## Examples

### React + Webpack

```javascript
const path = require('path');
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new StratoCSS()
  ]
};
```

### Vue + Webpack

```javascript
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new StratoCSS()
  ]
};
```

## Features

- ⚡️ Fast compilation
- 🔧 Full configuration support
- 📦 Tree-shaking
- 🎨 Preset system
- 🌙 Dark mode support
- 📱 Responsive utilities
- 🔄 Hot Module Replacement

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT
npm package: @stratos-network/contracts
Description: Stratos Contracts is a library for stos smart contract development
Author: BoThe1K
Latest version: 1.0.2

# Stratos contracts

**A library for stratos, tendermint and cosmos smart contract development.**

 * Implementations of libraries like [Bech32](https://en.bitcoin.it/wiki/Bech32).


## Overview

### Installation

```
$ yarn add -D @stratos-network/contracts
```


### Usage

Once installed, you can use the contracts in the library by importing them:

```solidity
pragma solidity ^0.8.0;

import "@stratos-network/contracts/utils/Bech32.sol";

contract MyStratosAddress {
    using Bech32 for address;

    function getStratosAddress() public view returns (string memory) {
        return msg.sender.toBech32("st");
    }
}
```

## License

Stratos Contracts is released under the [MIT License](LICENSE).