open-index/open-npm huggingface dataset:
npm package: @stylable/build-tools
Description: Collection of helper functions for Stylable based tooling.
Author: Wix.com
Latest version: 6.1.1

# @stylable/build-tools

[![npm version](https://img.shields.io/npm/v/@stylable/build-tools.svg)](https://www.npmjs.com/package/@stylable/build-tools)

A collection of helper functions for Stylable based tooling.

## What's inside

* processUrlDependencies - Collect all dependencies of Stylable meta and replace them with placeholder
* hasImportedSideEffects - Detect if a meta has imports with Stylable side effects
* loadStylableConfig - Loads `stylable.config` file from package
* sortModulesByDepth - Sort algorithm for Stylable modules 


## License
Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/code-formatter
Description: A code formatting utility for Stylable stylesheets
Author: Wix.com
Latest version: 6.1.1

# @stylable/code-formatter

[![npm version](https://img.shields.io/npm/v/@stylable/code-formatter.svg)](https://www.npmjs.com/package/@stylable/code-formatter)

A utility function that performs code formatting on Stylable content.

## License

Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/core
Description: CSS for Components
Author: Wix.com
Latest version: 6.1.1

# @stylable/core

[![npm version](https://img.shields.io/npm/v/@stylable/core.svg)](https://www.npmjs.com/package/stylable/core)

`@stylable/core` is at the center of how Stylable operates. It provides the basic capabilities required for Stylable to parse stylesheets and transform their output to valid plain CSS.

## Running Stylable

Follow these instructions in order to run Stylable in development mode, this allows you to run the package tests with hot-loading enabled.

1. Clone this repo
2. `cd stylable`
3. `npm i`
4. `cd ./packages/stylable`
5. `npm start`
6. Open your browser to [`http://localhost:8080/tests.bundle`](http://localhost:8080/tests.bundle)

## How it works

Stylable's workflow contains two main parts that together perform the CSS transpilation.

- `stylable-processor` - Parses each `stylesheet` separately into its own AST ([abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree), extracting the required data without any resolution of dependencies in other files.
- `stylable-transformer` - Processes each stylesheet using the previously created data including other file dependencies. Transforms our Stylable CSS into vanilla CSS.

## License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/custom-value
Description: Custom values (variables) for Stylable
Author: Wix.com
Latest version: 6.1.1

# @stylable/custom-value

[![npm version](https://img.shields.io/npm/v/@stylable/custom-value.svg)](https://www.npmjs.com/package/stylable/custom-value)

`@stylable/custom-value` serves as a package where various implementation for Stylable (build-time) variable custom types.
Currently, this package only offers an `stBorder` type, with more to be added in the future.

## Usage example

```css
:import {
  -st-from: '@stylable/custom-value';
  -st-named: stBorder;
}

:vars {
  myBorder: stBorder(1px, solid, green);
}

.root {
  border: value(stBorder); /* returns: 1px solid green */
  background-color: value(stBorder, color); /* returns: green */
}
```

## License

Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/dom-test-kit
Description: Stylable DOM testing utilities
Author: Wix.com
Latest version: 6.1.1

# @stylable/dom-test-kit

[![npm version](https://img.shields.io/npm/v/@stylable/dom-test-kit.svg)](https://www.npmjs.com/package/stylable/dom-test-kit)

`@stylable/dom-test-kit` is comprised of a single class, `StylableDOMUtil`, which exposes several DOM related testing utilities.

## Example

```css
/* my-component.st.css */
.root {}

.part {
  -st-states: loading;
}
```

```ts
/* test.ts */
import { StylableDOMUtil } from '@stylable/dom-test-kit';
import * as stylesheet from './my-component.st.css';

const domUtil = new StylableDOMUtil(stylesheet, document.body);
const partElement = domUtil.select('.part');

if (partElement) {
    domUtil.hasStyleState(partElement, 'loading');
}
```

## What does it do?

> Note: currently all of the provided utilities support only simplified Stylable selectors, consisting only of `class` and `pseudo-class` selectors.

### `constructor(style: RuntimeStylesheet, root?: Element)`

Initialize the `StylableDOMUtil` by providing a source stylesheet that would function as the base for all testing utilities. You may pass a DOM root element to serve as the default entry point for the `select` methods,

### `select(selector?: string, element?: Element): Element | null`

Select the first `element` in the DOM that matches the provided Stylable `selector`.

### `selectAll(selector?: string, element?: Element): Element[] | null`

Select all `elements` in the DOM that match the provided Stylable `selector`.

### `scopeSelector(selector?: string): string`

Transforms a Stylable `selector` to its target vanilla CSS.

### `hasStyleState(element: Element, stateName: string, param: StateValue = true): boolean`

Check whether the provided `element` has the corresponding state set. This method can also receive a third optional param to validate the state active value.

### `getStyleState(element: Element, stateName: string): string | null`

Get an `element` state value if exists, `null` if it does not.

## License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/e2e-test-kit
Description: A collection of tools to help test Stylable components and applications from end-to-end
Author: Wix.com
Latest version: 6.1.1

# @stylable/e2e-test-kit

[![npm version](https://img.shields.io/npm/v/@stylable/e2e-test-kit.svg)](https://www.npmjs.com/package/@stylable/e2e-test-kit)

`@stylable/e2e-test-kit` serves as a collection of tools to help test Stylable components and applications. It offers various capabilities to bundle, run and test your project in memory, or in the browser.

### `StylableProjectRunner`

Used to setup an E2E test project with `@stylable/webpack-plugin` and `playwright`. This allows testing an entire project setup, including stylable configuration, webpack configuration and the process of transpiling the project, performing your tests against a running browser.

You can find a set of example configuration setups [here](/packages/webpack-plugin/test/e2e).

### `getStyleElementsMetadata`

A playwright helper function aimed at extracting Stylable styling from the DOM for testing purposes.

## License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/esbuild
Description: Stylable plugin for esbuild
Author: Wix.com
Latest version: 6.1.1

# @stylable/esbuild

[![npm version](https://img.shields.io/npm/v/@stylable/esbuild.svg)](https://www.npmjs.com/package/@stylable/esbuild)

`@stylable/esbuild` 

## Installation

```bash
npm install @stylable/esbuild
```

## Usage

```js
const { build } = require('esbuild');
const { stylablePlugin } = require('@stylable/esbuild');

build({
  plugins: [stylablePlugin({ /* options */})],
});

```

## Options

```ts
interface ESBuildOptions {
    /**
     * Determine the way css is injected to the document
     * js - every js module contains the css and inject it independently
     * css - emit bundled css asset to injected via link
     */
    cssInjection?: 'js' | 'css';
    /**
     * Config how error and warning reported to esbuild by stylable
     * auto - Stylable warning will emit esbuild warning and Stylable error will emit esbuild error
     * strict - Stylable error and warning will emit esbuild error
     * loose - Stylable error and warning will emit esbuild warning
     */
    diagnosticsMode?: DiagnosticsMode;
    /**
     * A function to override Stylable instance default configuration options
     */
    stylableConfig?: (config: StylableConfig, build: PluginBuild) => StylableConfig;
    /**
     * Use to load stylable config file.
     * true - it will automatically detect the closest "stylable.config.js" file and use it.
     * false - will not load any "stylable.config.js" file.
     * string - will use the provided string as the "configFile" file path.
     */
    configFile?: boolean | string;
    /**
     * Stylable build mode
     */
    mode?: 'production' | 'development';
    /**
     * Determine the runtime stylesheet id kind used by the cssInjection js mode
     * This sets the value of the st_id attribute on the stylesheet element
     * default for dev - 'module+namespace'
     * default for prod - 'namespace'
     */
    runtimeStylesheetId?: 'module' | 'namespace' | 'module+namespace';
    /**
     * Optimization options
     */
    optimize?: {
        removeUnusedComponents?: boolean;
    };
}
```


## License
Copyright (c) 2023 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/jest
Description: Test your Stylable React components using Jest
Author: Wix.com
Latest version: 6.1.1

# @stylable/jest

[![npm version](https://img.shields.io/npm/v/@stylable/jest.svg)](https://www.npmjs.com/package/@stylable/jest)

`@stylable/jest` is a simple integration that allows testing your Stylable React components using [Jest](https://jestjs.io/).

## Installation

Install `@stylable/jest` as a dev dependency in your local project.

Install using npm:
```bash
npm install @stylable/jest --save-dev
```

Install using yarn:
```bash
yarn add @stylable/jest --dev
```

## Usage

Add the transformer to your `jest.config.js` file:

```js
module.exports = {
  transform: {
    '\\.st\\.css?$': '@stylable/jest',
  }
};
```

### Configuring Stylable options

See the interface for `StylableConfig` [here](https://github.com/wix/stylable/blob/master/packages/core/src/stylable.ts).

```js
module.exports = {
  transform: {
    '\\.st\\.css?$': ['@stylable/jest', { stylable: { /* Stylable options */ } }],
  }
};
```

### Ignore Stylable files from exsiting css integrations
To prevent existing CSS integrations from affecting Stylable files, ignore '.st.css' in the integration configuration.

Change: 
```js
"moduleNameMapper": {
  "\\.(css|scss)$": "SOME_MOCK_PATH"
},
```
To:
```js
"moduleNameMapper": {
  "(?<!\\.st)\\.(css|scss)$": "SOME_MOCK_PATH"
},
```

### Ignoring `node_modules` stylesheets

To disable transformation for stylehseets originating from your `node_modules` add the following configuration:

```js
module.exports = {
  // existing configuration...
  
  transformIgnorePatterns: [
    '/node_modules/(?!(.*?\\.st\\.css$))', // libraries publish .st.css files in their dist
  ],
};
```

## License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/language-service
Description: Stylable Language Services - syntax highlighting, completions, hinting and more for the Stylable CSS preprocessor.
Author: Wix.com
Latest version: 6.1.1

# @stylable/language-service

[![npm version](https://img.shields.io/npm/v/@stylable/language-service.svg)](https://www.npmjs.com/package/stylable/core)

## Overview

The Stylable language service serves as the basis for the [stylable-intelligence](https://github.com/wix/stylable-intelligence) vscode extension. It provides the business logic for resolving code completions, diagnostics, go to definition, syntax highlighting and more.

All CSS language support functionality is also supported (hover hints, inline color picker, etc.). Some CSS diagnostics were removed in order to support custom Stylable syntax.

## Misc. Resources

* CSS Language Service: https://github.com/Microsoft/vscode-css-languageservice
* Color Icon and Color Picker: https://github.com/Microsoft/vscode/issues/38959
* Allow disabling Color Picker: https://github.com/Microsoft/vscode/issues/42344

## License

Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/module-utils
Description: Stylable module creation utilities
Author: Wix.com
Latest version: 6.1.1

# @stylable/module-utils

[![npm version](https://img.shields.io/npm/v/@stylable/module-utils.svg)](https://www.npmjs.com/package/stylable/module-utils)

`@stylable/module-utils` provides the ability to generate Stylable source modules to be used in node or webpack.

### `stylableModuleFactory`

Creates a factory for creating multiple Stylable modules in a shared context, used by the webpack plugin.

### `generateStylableJSModuleSource`

Creates a single Stylable module source code.

> This function moved to `@stylable/core` and will be removed in the next major version.

## License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/node
Description: Integrate Stylable into your node application
Author: Wix.com
Latest version: 6.1.1

# @stylable/node

[![npm version](https://img.shields.io/npm/v/@stylable/node.svg)](https://www.npmjs.com/package/@stylable/node)

`@stylable/node` is a simple integration that allows integrating Stylable into your node application. The most common use-case is server-side rendering.

## Installation

```sh
yarn add --dev @stylable/node
```
## Usage
Import the `attachHook` utility from `@stylable/node`, and invoke it.
The `attachHook` can receive optional arguments in the form of a `config` object. 

See the type definition [here](./src/require-hook.ts#L6).

```ts
const {attachHook} = require('@stylable/node');
attachHook();

const { style, classes } = require('./stylesheet.st.css');
```

## attachHook Options

```ts 
interface Options {
    /* override .st.css file match */
    matcher?: (filename: string) => boolean;
    /* stylable instance configure */
    stylableConfig?: Partial<StylableConfig>;
    /* hook for after compile */
    afterCompile?: (code: string, filename: string) => string;
    /* request for the @stylable/runtime */
    runtimePath?: string;
    /* should ignore built .st.css.js files */
    ignoreJSModules?: boolean;
}
```


## License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/optimizer
Description: Stylable core optimizer
Author: Wix.com
Latest version: 6.1.1

# @stylable/optimizer

[![npm version](https://img.shields.io/npm/v/@stylable/optimizer.svg)](https://www.npmjs.com/package/stylable/optimizer)

Performs optimization when running Stylable in production mode.

### `StylableOptimizer`

Performs optimization such as removing Stylable directives, comments, unused components, empty rules to Stylable's output based on the provided configuration.

The `StylableOptimizer` is also responsible for invoking the `StylableClassNameOptimizer` and `StylableNamespaceOptimizer` based on its configuration.

### `StylableClassNameOptimizer`

Optimizes class names based on usage to a shorter format, being careful not to affect states (which need to stay un-optimized at the moment) and global rules.

### `StylableNamespaceOptimizer`

Optimizes namespaces to a shorter format.

## License
Copyright (c) 2019 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/react-scripts
Description: Like react-scripts, but with stylable and typescript built-in
Author: Wix.com
Latest version: 3.4.5
Deprecated: this package has been deprecated in favor of create-stylable-app. see: https://github.com/wix/stylable/tree/master/packages/create-stylable-app

# @stylable/react-scripts

[![npm version](https://img.shields.io/npm/v/@stylable/react-scripts.svg)](https://www.npmjs.com/package/@stylable/react-scripts)

A fork of [react-scripts](https://github.com/facebook/create-react-app/tree/next/packages/react-scripts) tailored for quick and easy creation of Stylable projects.

## Major changes from `react-scripts`
- Uses TypeScript instead of Babel, configured to work with Webpack's tree-shaking and dynamic chunks on `import()`.
- Adds built-in support for [Stylable](http://stylable.io/).

## Getting started

This is the quickest way to get a Stylable project up and running. It is an opinionated boilerplate that uses TypeScript and Stylable instead of css-loader

In your terminal, run:
```
$ npx create-react-app@3.2.0 --scripts-version @stylable/react-scripts [APP NAME]
$ cd [APP NAME]
$ yarn
$ yarn start
```

> Note: due to recent changes with how create-react-app handles external customization, we are forced to lock our react-scripts package to an older version of create-react-app (v3.2.0).

## License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/rollup-plugin
Description: Stylable plugin for Rollup
Author: Wix.com
Latest version: 6.1.1


# @stylable/rollup-plugin

[![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/rollup-plugin)

### Installation

`npm i @stylable/rollup-plugin -D`

or 

`yarn add @stylable/rollup-plugin --dev`

### Usage

```js
// rollup.config.js
import stylable from "@stylable/rollup-plugin";

export default {
    ...
    plugins: [ stylable() ]
}

```

> ### If you use any other rollup CSS plugins you should exclude Stylable files (`*.st.css`) from them.


### Plugin Options

```ts
interface StylableRollupPluginOptions {
    minify?: boolean;
    inlineAssets?: boolean;
    fileName?: string;
    diagnosticsMode?: 'auto' | 'strict' | 'loose';
    /**
     * A function to override Stylable instance default configuration options
     */
    stylableConfig?: (config: StylableConfig) => StylableConfig;
    /**
     * Runs "stc" programmatically with the webpack compilation.
     * true - it will automatically detect the closest "stylable.config.js" file and use it.
     * string - it will use the provided string as the "stcConfig" file path.
     */
    stcConfig?: string | boolean;
}
```

> This package provides **naive** Stylable rollup plugin. It is in early development stages and may not behave expectedly in all cases. Please open a PR/issue if you encounter any problems.

## License
Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).
npm package: @stylable/schema-extract
Description: A utility for extracting JSON schema objects from a Stylable stylesheet
Author: Wix.com
Latest version: 6.1.1

# @stylable/schema-extract

[![npm version](https://img.shields.io/npm/v/@stylable/schema-extract.svg)](https://www.npmjs.com/package/@stylable/schema-extract)

`@stylable/schema-extract` is a utility that allows you to transform Stylable stylesheets into [JSON-Schema](https://json-schema.org/) compatible format.

## Installation

```sh
yarn add @stylable/schema-extract
```
## Usage
Import the `extractSchema` utility function from `@stylable/schema-extract`, and invoke it.
The `extractSchema` function receives four arguments, `css`, `filePath`, `rootPath` and `path`. 

### Arguments
|Name|Type|Description|
|-------------|----|-----------|
|css|string|CSS content to be processed and extracted|
|filePath|string|absolute path to the file currently being extracted|
|basePath|string|absolute path to the root of the project. all generated paths will be absolute to this base path|
|path|[MinimalPath](#MinimalPath)|`path` object containing a minimal set of required utility methods|

#### MinimalPath interface

```ts
export interface MinimalPath {
    dirname:    (p: string) => string;
    join:       (...paths: string[]) => string;
    isAbsolute: (path: string) => boolean;
    relative:   (from: string, to: string) => string;
}
```

## Example
Usage example for `extractSchema`.

```ts
import fs from 'fs';
import path from 'path';
import { extractSchema } from '@stylable/schema-extract';

const filePath = path.join(__dirname, 'src/entry.st.css');
const css = fs.readFileSync(filePath, 'utf8');

const stylesheetSchema = extractSchema(
    css,
    filePath,
    __dirname,
    path
);
```

### Source
```css
/* ~/myproject/src/entry.st.css */
:import {
    -st-from: './imported.st.css';
    -st-default: Comp;
    -st-named: part;
}
:vars {
    myColor: red;
}
.root {
    -st-extends: Comp;
}
.otherPart {
    -st-extends: part;
}

```

### Result
```JSON
{
    "$id": "/entry.st.css",
    "$ref": "stylable/module",
    "properties": {
        "root": {
            "$ref": "stylable/class",
            "states": {
                "userSelected": {
                    "type": "boolean"
                }
            },
            "extends": {
                "$ref": "/imported.st.css#root"
            }
        },
        "Comp": {},
        "part": {},
        "myColor": {
            "$ref": "stylable/var"
        },
        "otherPart": {
            "$ref": "stylable/class",
            "states": {
                "size": {
                    "type": "enum",
                    "enum": [
                        "s",
                        "m",
                        "l"
                    ]
                }
            },
            "extends": {
                "$ref": "/imported.st.css#part"
            }
        }
    }
}
```

## License
Copyright (c) 2018 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @stylable/uni-driver
Description: Stylable UniDriver testing utilities
Author: Wix.com
Latest version: 6.1.1

# @stylable/uni-driver

[![npm version](https://img.shields.io/npm/v/@stylable/uni-driver.svg)](https://www.npmjs.com/package/@stylable/uni-driver)

`@stylable/uni-driver` provides Stylable compatibility and integration to the [UniDriver](https://github.com/wix-incubator/unidriver) project.

## Installation

```sh
yarn add @stylable/uni-driver
```

Or

```sh
npm i @stylable/uni-driver
```

## License
Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [MIT license](./LICENSE).
npm package: @style-all/stylelint-scss
Description: * get this package via npm     ```shell     $ npm install @style-all/stylelint-scss -D     ```
Author: Team @style-all
Latest version: 0.2.5

# stylelint-scss

## Usage
* get this package via npm
    ```shell
    $ npm install @style-all/stylelint-scss -D
    ```

* create a `.stylelintrc.json` file in your project folder with content
    ```json
    {
        "extends": [
            "@style-all/stylelint-scss"
        ]
    }
    ```