open-index/open-npm huggingface dataset:
npm package: @stylin/msa-loader
Description: Stylin loader module for webpack
Author: sultan99
Latest version: 0.5.1

# @stylin/msa-loader
The primary webpack loader for generation Mapping Style Annotations.
<br/>

## Installation
```sh
npm install --save-dev @stylin/msa-loader
```

You need to install [style-loader](https://github.com/webpack-contrib/style-loader) or [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):

```sh
npm install --save-dev style-loader
// or
npm install --save-dev mini-css-extract-plugin
```
### ⚠ Important
Don't install both, use one of them.
<br/>

### Optional loader and recommended
```sh
npm install --save-dev sass-loader
```

<br/>

In webpack configuration file, place `@stylin/msa-loader` after `style-loader` or `mini-css-extract-plugin` in modules/rules.

### webpack.config.js configuration with style-loader:
```js
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/i,
      use: [
        `@stylin/ts-loader`, // only if you use TypeScript
        `@stylin/msa-loader`,
        `style-loader`,
        {loader: `css-loader`, options: {modules: true}},
        `sass-loader`, // optional
      ],
    }],
  }
}
```
<br/>

### webpack.config.js configuration with `MiniCssExtractPlugin`:
```js
const MiniCssExtractPlugin = require(`mini-css-extract-plugin`)

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  ...
  module: {
    rules: [{
      test: /\.scss$/i,
      use: [
        `@stylin/ts-loader`,  // only if you use TypeScript
        `@stylin/msa-loader`,
        {
          loader: MiniCssExtractPlugin.loader,
          options: {publicPath: `folder-where-css-files-will-be-stored`}
        },
        {loader: `css-loader`, options: {modules: true}},
        `sass-loader`, // optional
      ],
    }],
  }
}
```
<br/>

### ⚠ Important
Set `modules` to true in options of css-loader: 

`{loader: 'css-loader', options: {modules: true}}`
npm package: @stylin/ts-loader
Description: Stylin TypeScript typing loader module for webpack
Author: sultan99
Latest version: 0.5.1

# @stylin/ts-loader

Webpack loader for type auto-generation.

<img src="./typing-support.gif"/>
<br/>

## Installation
```sh
npm install --save-dev @stylin/ts-loader
```
<br/>

In webpack configuration file, place `@stylin/ts-loader` after `@stylin/msa-loader` in modules/rules section.

#### `webpack.config.js`
```js
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/i,
      use: [
        `@stylin/ts-loader`,
        `@stylin/msa-loader`,
        {loader: MiniCssExtractPlugin.loader}, // it can be `style-loader`
        {loader: `css-loader`, options: {modules: true}},
        `sass-loader`, // optional
      ],
    }],
  }
}
```
<br/>

## Options
You can customize the generated type names. By default, they are equal:
```js
 propsType: (componentName: string) => `${componentName}Props`
 styledPropsType: (componentName: string) => `Styled${componentName}Props`,
```
<br/>

The generated interfaces for `User` component will be:
#### 💅 `*.scss.d.ts`
```ts
export interface UserProps extends ComponentProps<'div'> {
  status: 'online' | 'busy' | 'offline'
}

export const User: FC<UserProps>
```
<br/>

## Optional property
For optional component properties, add a question mark as you do in typescript:

```scss
/**
  @tag: input
  @component: Input
  disabled?: true
*/
```
<br/>

## ⚠ Webpack watcher
Webpack in watch mode keeps tracking file changes only if it is in the dependency graph. It means if you create a file that is not imported in your application code source, webpack will not track it and will not generate types for it. Before starting coding a new component, first of all, import it into your code and then begin implementation.
<br/>
<br/>
npm package: @stylin/vite-plugin
Description: Stylin plugin for Vite
Author: Yishai Zehavi
Latest version: 0.5.1

# @stylin/vite-plugin
This is the official Vite plugin for `@stylin/style` package. It supports import from both CSS and SCSS files.

## Installation
```sh
npm install --save-dev @stylin/vite-plugin
```

Register your plugin in `vite.config.ts`:

```ts
import stylin from '@stylin/vite-plugin'

export default defineConfig({
  plugins: [stylin(), otherPlugin()]
})
```

And enjoy! You can now import components from your `.module.css` and `.module.scss` files:

```ts
import { Button } from '~/components/button.module.scss';

export default function MyCustomButton() {
  return (
    <Button variant="success">Custom button</Button>
  )
}
```

**Important note**  
This plugin only supports importing from **CSS modules.** So make sure your files end with `.module.css` or `.module.scss`.

## Typescript Support
This plugin comes with support for Typescript built-in! Modify your `vite.config.ts` as follows:

```ts
import stylin from '@stylin/vite-plugin'
import stylinTS from '@stylin/vite-plugin/ts'

export default defineConfig({
  plugins: [stylin(), stylinTS(), otherPlugin()]
})
```
> **Make sure to put the Typescript plugin *after* the base plugin.**

This plugin detects files that end with `.module.css` or `.module.scss` in your project and creates matching `.d.ts` files alongside them. For example, if your source code directory has this structure:
```
|-- src
  |-- components
    |-- button.module.css
```
The plugin will create a `button.module.css.d.ts` file next to it:
```
|-- src
  |-- components
    |-- button.module.css
    |-- button.module.css.d.ts
```
npm package: @styling/babel-plugin-transform-styling
Description: The Styling babel-plugin-transform-styling module.
Author: Dylan Aubrey
Latest version: 0.0.31

# @styling/babel-plugin-transform-styling

The Styling babel-plugin-transform-styling module.

[![npm version](https://badge.fury.io/js/%40styling%2Fbabel-plugin-transform-styling.svg)](https://badge.fury.io/js/%40styling%2Fbabel-plugin-transform-styling)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/babel-plugin-transform-styling --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @styling/core
Description: The Styling core module.
Author: Dylan Aubrey
Latest version: 0.0.11

# @styling/core

The Styling core module.

[![npm version](https://badge.fury.io/js/%40styling%2Fcore.svg)](https://badge.fury.io/js/%40styling%2Fcore)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/core --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @styling/file-change
Description: The Styling file-change module.
Author: Dylan Aubrey
Latest version: 0.0.46

# @styling/file-change

The Styling file-change module.

[![npm version](https://badge.fury.io/js/%40styling%2Ffile-change.svg)](https://badge.fury.io/js/%40styling%2Ffile-change)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/file-change --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @styling/helpers
Description: The Styling helpers module.
Author: Dylan Aubrey
Latest version: 0.0.35

# @styling/helpers

The Styling helpers module.

[![npm version](https://badge.fury.io/js/%40styling%2Fhelpers.svg)](https://badge.fury.io/js/%40styling%2Fhelpers)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/helpers --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @styling/styled
Description: The Styling styled module.
Author: Dylan Aubrey
Latest version: 0.0.30

# @styling/styled

The Styling styled module.

[![npm version](https://badge.fury.io/js/%40styling%2Fstyled.svg)](https://badge.fury.io/js/%40styling%2Fstyled)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/styled --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @styling/types
Description: The Styling types module.
Author: Dylan Aubrey
Latest version: 0.0.12

# @styling/types

The Styling types module.

[![npm version](https://badge.fury.io/js/%40styling%2Ftypes.svg)](https://badge.fury.io/js/%40styling%2Ftypes)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## Installation

```shell
yarn add @styling/types --dev
```

## Usage

Read the Styling [usage guide](../../README.md#usage).
npm package: @stylistic/eslint-plugin-js
Description: JavaScript stylistic rules for ESLint, migrated from [eslint core](https://github.com/eslint/eslint).
Author: Anthony Fu
Latest version: 4.4.1

# @stylistic/eslint-plugin-js

JavaScript stylistic rules for ESLint, migrated from [eslint core](https://github.com/eslint/eslint).

Credits to all contributors who have committed to the original rules.

Check the [documentation](https://eslint.style/packages/js) for more details.
npm package: @stylistic/eslint-plugin-jsx
Description: JSX stylistic rules for ESLint, migrated from [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react).
Author: Anthony Fu
Latest version: 4.4.1

# @stylistic/eslint-plugin-jsx

JSX stylistic rules for ESLint, migrated from [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react).

Credits to all contributors who have committed to the original rules.

Check the [documentation](https://eslint.style/packages/jsx) for more details.
npm package: @stylistic/eslint-plugin-migrate
Description: ESLint plugin to migrate built-in rules to stylistic rules
Author: Anthony Fu
Latest version: 4.4.1

# @stylistic/eslint-plugin-migrate

[![npm version](https://img.shields.io/npm/v/@stylistic/eslint-plugin-migrate?style=flat&colorA=080f12&colorB=34b2ae)](https://npmjs.com/package/@stylistic/eslint-plugin-migrate)

An ESLint plugin for migrating built-in stylistic rules to the `@stylistic` namespace.

[**Documentations**](https://eslint.style/guide/migration)
npm package: @stylistic/eslint-plugin-ts
Description: TypeScript stylistic rules for ESLint, migrated from [`typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint).
Author: Anthony Fu
Latest version: 4.4.1

# @stylistic/eslint-plugin-ts

TypeScript stylistic rules for ESLint, migrated from [`typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint).

Credits to all contributors who have committed to the original rules.

Check the [documentation](https://eslint.style/packages/ts) for more details.
npm package: @stylistic/stylelint-config
Description: The stylistic shareable config for Stylelint.
Author: Sergey Artemov
Latest version: 5.0.0

# Stylelint Stylistic Config

[![License: MIT][license-image]][license-url]
[![Changelog][changelog-image]][changelog-url]
[![NPM version][npm-image]][npm-url]
[![Test Status][test-image]][test-url]

> The stylistic shareable config for Stylelint.

Use it to return to your config the 63 stylistic rules [removed in `stylelint-config-standard` 30.0.0](https://github.com/stylelint/stylelint-config-standard/releases/tag/30.0.0), and the one [removed in `stylelint-config-recommended` 10.0.1](https://github.com/stylelint/stylelint-config-recommended/releases/tag/10.0.1).

To see the rules that this config uses, please read the [config itself](./stylelint.config.js).

## Installation and usage

Add `@stylistic/stylelint-config` and `stylelint` itself to your project:

```shell
npm add -D @stylistic/stylelint-config stylelint
```

Set your `.stylelintrc.json` to:

```json
{
	"extends": "@stylistic/stylelint-config"
}
```

If you use `stylelint-config-recommended`, `stylelint-config-standard`, or some other config for syntax linting, then list the config names in an array (order matters):

```json
{
	"extends": [
		"stylelint-config-standard",
		"@stylistic/stylelint-config"
	]
}
```

## Rule overrides

If the value of a rule does not suit you, specify that rule in the `"rules"` section with the value you want:

```json
{
	"extends": "@stylistic/stylelint-config",
	"rules": {
		"@stylistic/indentation": "tab"
	}
}
```

You can turn off rules by setting its value to `null`. For example:

```json
{
	"extends": "@stylistic/stylelint-config",
	"rules": {
		"@stylistic/max-line-length": null
	}
}
```

In addition, the config is based on the [`@stylistic/stylelint-plugin`](https://www.npmjs.com/package/@stylistic/stylelint-plugin), which has all 76 stylistic rules [removed in Stylelint 16.0.0](https://github.com/stylelint/stylelint/releases/tag/16.0.0). You can use all these rules, not just the 65 configured in the config. For example:

```json
{
	"extends": "@stylistic/stylelint-config",
	"rules": {
		"@stylistic/at-rule-name-newline-after": "always-multi-line"
	}
}
```

Please refer to [Stylelint docs](https://stylelint.io/user-guide/get-started) for detailed info on using this linter.

## Need more?

ESLint deprecates stylistic rules, too. But you can continue to use them thanks to [ESLint Stylistic](https://eslint.style).

[license-url]: https://github.com/stylelint-stylistic/stylelint-config/blob/main/LICENSE.md
[license-image]: https://img.shields.io/badge/License-MIT-limegreen.svg

[changelog-url]: https://github.com/stylelint-stylistic/stylelint-config/blob/main/CHANGELOG.md
[changelog-image]: https://img.shields.io/badge/Change-log-limegreen

[npm-url]: https://npmjs.org/package/@stylistic/stylelint-config
[npm-image]: https://badge.fury.io/js/@stylistic%2Fstylelint-config.svg

[test-url]: https://github.com/stylelint-stylistic/stylelint-config/actions
[test-image]: https://github.com/stylelint-stylistic/stylelint-config/actions/workflows/test.yaml/badge.svg?branch=main