open-index/open-npm huggingface dataset:
npm package: @stylex/color
Description: Color palette as a dependency
Author: Rumkin
Latest version: 1.0.0

# Stylex Colors

Versionable colors for your web app as dependency.

This package contains colors for stylex design system. It presented
as CSS, CommonJS, ESM, JSON and UMD. HSL model is used for color values due
to its human and computation friendliness.

## Usage

Browser:

```html
<link rel="stylesheet" href="https://unpkg.com/@stylex/colors@v1.0/colors.css" />
<style>
  html {
    background-color: var(--violet-90);
    color: var(--pink-40);
  }
</style>
```

JS:
```js
import {red, silver} from '@stylex/colors'

red[50] // -> [0, 80, 50]
silver[90] // -> [200, 5, 90]
```

## Import

NPM:
```bash
npm i @stylex/colors
```

Browser ESM:
```html
<script type="module" src="https://unpkg.com/@styles/colors@v1.0/colors.js"></script>
```

Browser UMD:
```html
<script src="https://unpkg.com/@styles/colors@v1.0/colors.umd.js"></script>
```

## Colors

Each color has 10 shades. Each shade presented as index of lightness.
CSS names format is `--${COLOR}-${SHADE}`.

Colors:
* red
* orange
* yellow
* green
* teal
* blue
* violet
* purple
* pink
* silver
* gray
* rusty

Shades:
* 5
* 10
* 20
* 30
* 40
* 50
* 60
* 70
* 80
* 90

## License

MIT © [Rumkin](https://rumk.in)
npm package: @stylex/observer
Description: Observe missing css classes and generate it according rules on the fly.
Author: Rumkin
Latest version: 0.1.1

# Stylex Observer

Observe missing CSS classes and generate it according rules on the fly. Stylex can observe
classes used in document and notify about added/removed names. Parse classnames
and separate it into name, pseudo-class and media-query parts. It auto create
missing classes with provided generators (see usage below).

Stylex transforms class names into css classes by parsing it rules.

For example `bg-green:hover?md`, could be used like this:

```html
<div class="bg-green:hover?md">
  Hello, Stylex!
</div>
```

And transformed into this:

```css
@media (min-width: 421px) and (max-width: 720px) {
  .bg-green\:hover\?md {
    background-color: green;
  }
}
```

## Install

```shell
npm i @stylex/observer
```

## Usage

Example:

```js
import {Observer} from '@stylex/observer'

const observer = new Observer({
  // Transform property name
  props: (name) => {
    switch (name) {
      case 'font-red':
        return {color: 'red'}
      case 'font-black':
        return {color: 'black'}
      case 'underline':
        return {textDecoration: 'underline'}
      }
    }
  },
  // Transform pseudo class
  pseudoClass: (name) => {
    switch (name) {
      case 'h':
        return 'hover'
      case 'f':
        return 'focus'
      default:
        return name
    }
  },
  // Transform media query
  mediaQuery: (name) => {
    switch (name) {
      case 'dark':
        return {prefersColorScheme: 'dark'}
      case 'light':
        return {prefersColorScheme: 'light'}
      default:
        return
    }
  },
})
```

Then insert into body the next HTML:

```html
<div class="color-red?dark color-black?light">
  <a class="underline:h" href="#">Link</a>
</div>
```

## License

MIT © [Rumkin](https://rumk.in)
npm package: @stylexjs/babel-plugin
Description: StyleX babel plugin.
Latest version: 0.18.2

# @stylexjs/babel-plugin

StyleX expects you to transform all `js`/`ts`/`tsx` files with `@stylexjs/babel-plugin`.
In addition to transforming JS code, this plugin also produces an Array of CSS rules. All the CSS rules
generated from all JS files within your project should be concatenated together and converted to a CSS
file using the `processStyles` function which is also exported from the same module.

`@stylexjs/babel-plugin` is fairly lightweight. It pre-computes `stylex` related functions like
`create` and `keyframes` by converting the argument AST to a JS object and transforming them
by passing them to the functions of the corresponding names within `@stylex/shared`


## Babel Metadata

The StyleX Babel plugin does more than transform JavaScript (or TypeScript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.

An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:

1. `code` which is the transformed JS code
2. `metadata` is an object of metadata that the plugin may want to return as a side-effect.

e.g.

```js
const result = transformSync(sourceCode, {
  filename: opts.filename,
  parserOpts: { flow: { all: true } },
  plugins: [stylexPlugin, opts],
});

const transformedCode = result.code;
const injectedStyles = result.metadata.stylex;
```
npm package: @stylexjs/cli
Description: A cli to compile a folder with StyleX
Latest version: 0.18.2

# @stylexjs/cli

A Command Line Interface (CLI) to pre-compile StyleX usage in a folder of files
and generate folder of files with a separate CSS file that can then be bundled
with exotic setups.

## Installation

Simply install the CLI to start using it

```sh
npm install --save-dev @stylexjs/cli
```

### Basic Usage

```sh
stylex -i [input_directory] -o [output_directory]
```

### CLI Options

#### `--input`

The input directories to compile with StyleX

alias: `-i`

type: `array`

required: `true`

#### `--output`

Name of the StyleX output directories.

alias: `-o`

type: `array`

required: `true`

#### `--styleXBundleName`

The name of the compiled css file StyleX generates

alias: `-b`

type: `string`

required: `false`

default: `stylex_bundle.css`

#### `--watch`

Flag to enable automatic recompiling of files in the input directory on change.
Currently only supports usage with a single input/output directory

alias: `-w`

type: `boolean`

required: `false`

default: `false`

#### `--modules_EXPERIMENTAL`

A list of node modules to also compile with StyleX. Used to include compiling
dependencies that contain `.stylex.js` files. Has optional "ignore"
functionality that allows ignoring specific directories in the compiled output
module.

alias: `-m`

type: `array`

required: `false`

default: `[]`

example: `[['@stylexjs/open-props', { ignore: ['src'] }]]`

#### `--config`

path of a .json (or .json5) config file

### Config Structure

You can create a `.json` or `.json5` config file and pass it to the CLI.

```json
{
  "input": "./source",
  "output": "./src",
  "modules_EXPERIMENTAL": ["@stylexjs/open-props"],
  "styleXBundleName": "stylex_bundle.css",
  "watch": true
}
```
npm package: @stylexjs/esbuild-plugin
Description: StyleX esbuild plugin
Latest version: 0.11.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @stylexjs/esbuild-plugin

Use StyleX with _esbuild_ bundler.

This plugin transforms files that contain `stylexjs` imports and generates a
`stylexjs` CSS bundle.

## Installation

```
npm install --save-dev @stylexjs/esbuild-plugin
```

## Usage

```typescript
import esbuild from 'esbuild';
import stylexPlugin from '@stylexjs/esbuild-plugin';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: './build/bundle.js',
  minify: true,
  plugins: [
    stylexPlugin({
      // If set to 'true', bundler will inject styles in-line
      // Do not use in production
      dev: false,
      // Required. File path for the generated CSS file
      generatedCSSFileName: path.resolve(__dirname, 'build/stylex.css'),
      // Aliases for StyleX package imports
      // default: '@stylexjs/stylex'
      stylexImports: ['@stylexjs/stylex'],
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root of your project
        rootDir: __dirname,
      },
    }),
  ],
});
```
## Plugin Options
It inherits all options from `@stylexjs/babel-plugin` and can be found [here 🔗](https://stylexjs.com/docs/api/configuration/babel-plugin/). Along with other options like <br/>

### generatedCSSFileName
```js
generatedCSSFileName: string // Default: 'stylex.css'
```
The name of the output css file.

---
### useCSSLayers
```js
useCSSLayers: boolean // Default: false
```
Enabling this option switches Stylex from using `:not(#\#)` to using `@layers` for handling CSS specificity.

---
### babelConfig
```js
babelConfig: {
  plugins: PluginItem[],
  presets: PluginItem[]
} // Default: { plugins: [], presets: [] }
```
List of custom babel plugins and presets which can be used during code transformation.


---
You can see the example usage
[here](https://github.com/facebook/stylex/apps/examples-esbuild).
npm package: @stylexjs/nextjs-plugin
Description: Next.js plugin for StyleX
Latest version: 0.11.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @stylexjs/nextjs-plugin

## Documentation Website
[https://stylexjs.com](https://stylexjs.com)

## Installation

Install the package by using:
```bash
npm install --save-dev @stylexjs/nextjs-plugin
```

or with yarn:

```bash
yarn add --dev @stylexjs/nextjs-plugin
```

> :warning: `@/` alias is unsupported at the moment.

Add the following to your `.babelrc.js`
```javascript
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: process.env.NODE_ENV === 'development',
        runtimeInjection: false,
        genConditionalClasses: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};
```

Add the following to your `next.config.js`
```javascript
const stylexPlugin = require('@stylexjs/nextjs-plugin');

module.exports = stylexPlugin({
  rootDir: __dirname,
})({});
```
npm package: @stylexjs/rollup-plugin
Description: Rollup plugin for StyleX
Latest version: 0.18.2

# @stylexjs/rollup-plugin

## Documentation Website
[https://stylexjs.com](https://stylexjs.com)

## Installation

Install the package by using:
```bash
npm install --save-dev @stylexjs/rollup-plugin
```

or with yarn:

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

Add the following to you `rollup.config.mjs`
```javascript
import stylexPlugin from '@stylexjs/rollup-plugin';

const config = {
  input: './index.js',
  output: {
    file: './.build/bundle.js',
    format: 'es',
  },
  plugins: [stylexPlugin({ fileName: 'stylex.css' })],
};

export default config;
```
## Plugin Options
It inherits all options from `@stylexjs/babel-plugin` and can be found [here 🔗](https://stylexjs.com/docs/api/configuration/babel-plugin/). Along with other options like <br/>

### fileName
```js
fileName: string // Default: 'stylex.css'
```
The name of the output css file.

---
### useCSSLayers
```js
useCSSLayers: boolean // Default: false
```
Enabling this option switches Stylex from using `:not(#\#)` to using `@layers` for handling CSS specificity.

---
### babelConfig
```js
babelConfig: {
  plugins: PluginItem[],
  presets: PluginItem[]
} // Default: { plugins: [], presets: [] }
```
List of custom babel plugins and presets which can be used during code transformation.
npm package: @stylexjs/webpack-plugin
Description: Webpack plugin for StyleX
Latest version: 0.11.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @stylexjs/webpack-plugin


## Documentation Website
[https://stylexjs.com](https://stylexjs.com)

## Installation

Install the package by using:
```bash
npm install --save-dev @stylexjs/webpack-plugin
```

or with yarn:

```bash
yarn add --dev @stylexjs/webpack-plugin
```

Add the following to your `webpack.config.js`
```javascript
const StylexPlugin = require('@stylexjs/webpack-plugin');
const path = require('path');

const config = (env, argv) => ({
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, '.build'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // Ensure that the stylex plugin is used before Babel
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // get webpack mode and set value for dev
      dev: argv.mode === 'development',
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      classNamePrefix: 'x',
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
  ],
  cache: true,
});

module.exports = config;
```
## Plugin Options
It inherits all options from `@stylexjs/babel-plugin` and can be found [here 🔗](https://stylexjs.com/docs/api/configuration/babel-plugin/). Along with other options like <br/>

### fileName
```js
fileName: string // Default: 'stylex.css'
```
The name of the output css file.

---
### useCSSLayers
```js
useCSSLayers: boolean // Default: false
```
Enabling this option switches Stylex from using `:not(#\#)` to using `@layers` for handling CSS specificity.

---
### babelConfig
```js
babelConfig: {
  babelrc: boolean,
  plugins: PluginItem[],
  presets: PluginItem[]
} // Default: { babelrc: false, plugins: [], presets: [] }
```
List of custom babel plugins and presets which can be used during code transformation and whether to use the `.babelrc` file.
npm package: @stylextras/stylex-include
Description: A set of utilities to support usages of the removed `stylex.include` API
Latest version: 0.3.1

# @stylextras/stylex-include

A set of utilities to support usages of `stylex.include`, a legacy API that was removed in StyleX `0.11.0`.

Exported components:
- **Babel plugin**: Inlines same-file usages of `stylex.include`
- **Webpack loader**: Inlines same-file and cross-file usages of `stylex.include`
- **Transformer**: Babel-based shared lower-level logic for more advanced use-cases

## Options

### `importSources` (shared)

Same as `importSources` in `@stylexjs/babel-plugin`. 

Default: `['@stylexjs/stylex']`.

```javascript
{
  importSources: ['@acme/styles']
}
```

### `allowedStyleImports` (Webpack loader only)

If provided, cross-file `stylex.include` calls are allowed *only from listed sources*. This helps keep legacy API usage contained within your codebase. 

Default: `[]`

```javascript
{
  allowedStyleImports: ['@acme/styles/typography']
}
```

### `onlyAtBeginning`

When set to `true`, `stylex.include` calls are only allowed at the beginning of style objects. This enables easy mechanical migration away from `stylex.include` by replacing style references with arrays of included styles and the style itself. Recommended if your existing `stylex.include` usage already satisfies or is close to satisfying this constraint.

```javascript
{
  onlyAtBeginning: true
}
```

With this option enabled, this is valid:

```javascript
const styles = stylex.create({
  button: {
    ...stylex.include(typography.textStrong), // ✅ At beginning
    width: 100,
    height: 50,
  }
})
```

But this throws an error:

```javascript
const styles = stylex.create({
  button: {
    width: 100,
    ...stylex.include(typography.textStrong), // ❌ Not at beginning
    height: 50,
  }
})
```

## Mechanical Migration Example

**Before (with stylex.include):**
```javascript
const styles = stylex.create({
  button: {
    ...stylex.include(typography.textStrong),
    width: 100,
    height: 50,
  }
})

// Usage
<div {...stylex.props(styles.button, styles.foo)} />
```

**After (mechanical conversion):**
```javascript
const styles = stylex.create({
  button: {
    width: 100,
    height: 50,
  }
})

// Usage - replace single style with array of included and local styles
<div {...stylex.props([typography.textStrong, styles.button], styles.foo)} />
```

## License

MIT
npm package: @stylezjs/postcss-plugin
Description: @stylezjs/postcss-plugin is a PostCSS plugin for integrating `@stylezjs/stylez` to generate static CSS styles. Stylez → 'Z' of Zero Runtime.
Author: Estarlin R
Latest version: 0.1.7

# @stylezjs/postcss-plugin

`@stylezjs/postcss-plugin` is a PostCSS plugin for integrating `@stylezjs/stylez` to generate static CSS styles. Stylez → 'Z' of Zero Runtime.

## Installation

To use `@stylezjs/stylez`, you'll need to install both the package and the PostCSS plugin:

```bash
pnpm add @stylezjs/stylez @stylezjs/postcss-plugin
```

or with npm:

```bash
npm install @stylezjs/stylez @stylezjs/postcss-plugin
```

or with yarn:

```bash
yarn add @stylezjs/stylez @stylezjs/postcss-plugin
```

## Setup PostCSS

To enable `@stylezjs/postcss-plugin`, you need to configure your `postcss.config.js` file:

```ts
export default {
  plugins: {
    '@stylezjs/postcss-plugin': {
      patterns: ['src/**/*.{js,ts,jsx,tsx}'],
    },
  },
};
```

## Usage

### Creating and using styles

You can now create dynamic CSS class names and apply them to your React components.

```ts
import * as stylez from '@stylezjs/stylez';

// Define styles
const styles = stylez.create({
  color: 'red',
  fontSize: '16px',
  '&::before': {
    height: '100%',
    color: 'red',
  },
});

// Apply class names to your component
const Home = () => (
  <div {...stylez.className(styles)}>
    Remember to keep a clear head in difficult times!
  </div>
);

export default Home;
```

### Global Styles

In order for `@stylezjs` to work correctly, include the `@stylez` directive in your global CSS file. Create a `.css` file, for example `globals.css`, and add the following at the top:

```css
@stylez;
```

Then, import this CSS file into your project, ideally in your root file (e.g., `index.tsx` or `App.tsx`):

```ts
import './globals.css';
```
npm package: @stylezjs/stylez
Description: Stylez → “Z” of Zero Runtime | A lightweight utility for generating CSS class names dynamically.
Author: Estarlin R
Latest version: 0.1.7

# @stylezjs/stylez

**Stylez → “Z” of Zero Runtime** | A lightweight utility for generating CSS class names dynamically.

## Installation

To use `@stylezjs/stylez`, you'll need to install both the package and the PostCSS plugin:

```bash
pnpm add @stylezjs/stylez @stylezjs/postcss-plugin
```

or with npm:

```bash
npm install @stylezjs/stylez @stylezjs/postcss-plugin
```

or with yarn:

```bash
yarn add @stylezjs/stylez @stylezjs/postcss-plugin
```

## Setup PostCSS

To enable `@stylezjs/postcss-plugin`, you need to configure your `postcss.config.js` file:

```ts
export default {
  plugins: {
    '@stylezjs/postcss-plugin': {
      patterns: ['src/**/*.{js,ts,jsx,tsx}'],
    },
  },
};
```

## Usage

### Creating and using styles

You can now create dynamic CSS class names and apply them to your React components.

```ts
import * as stylez from '@stylezjs/stylez';

// Define styles
const styles = stylez.create({
  color: 'red',
  fontSize: '16px',
  '&::before': {
    height: '100%',
    color: 'red',
  },
});

// Apply class names to your component
const Home = () => (
  <div {...stylez.className(styled)}>
    Remember to keep a clear head in difficult times!
  </div>
);

export default Home;
```

### Global Styles

In order for `@stylezjs` to work correctly, include the `@stylez` directive in your global CSS file. Create a `.css` file, for example `globals.css`, and add the following at the top:

```css
@stylez;
```

Then, import this CSS file into your project, ideally in your root file (e.g., `index.tsx` or `App.tsx`):

```ts
import './globals.css';
```