postcss-pseudo-to-data

PostCSS plugin that transforms CSS pseudo-state selectors into data-attribute selectors for programmatic state simulation.

Transformation

/* Input */
.button:hover { background: red; }

/* Output */
.button:hover,
.button[data-state-hover="true"] { background: red; }

Supported Pseudo-States

| Pseudo-class | Data-attribute | |--------------|----------------| | :hover | [data-state-hover="true"] | | :focus | [data-state-focus="true"] | | :active | [data-state-active="true"] | | :disabled | [data-state-disabled="true"] | | :visited | [data-state-visited="true"] | | :focus-visible | [data-state-focus-visible="true"] | | :focus-within | [data-state-focus-within="true"] |

Installation

npm install @wix/postcss-pseudo-to-data

Usage

Add to your PostCSS config:

import postcssPseudoToData from '@wix/postcss-pseudo-to-data';

export default {
  plugins: [
    postcssPseudoToData(),
  ],
};

Options

| Option | Default | Description | |--------|---------|-------------| | pseudoStates | All 7 states | Array of pseudo-states to transform |

Example: Transform Only Specific States

postcssPseudoToData({
  pseudoStates: ['hover', 'focus'],
})

How It Works

Build Time

1. PostCSS processes all CSS files
2. Plugin finds selectors with pseudo-states (:hover, :focus, etc.)
3. Adds companion selectors with data-attributes

Runtime

1. Your app sets data-state-hover="true" attribute on elements
2. Browser applies styles via normal CSS cascade
3. getComputedStyle() returns correct pseudo-state styles