https://github.com/castastrophe/postcss-transform-selectors

A postcss plugin to remap and transform selectors.
https://github.com/castastrophe/postcss-transform-selectors

Last synced: about 1 month ago
JSON representation

A postcss plugin to remap and transform selectors.

• Host: GitHub
• URL: https://github.com/castastrophe/postcss-transform-selectors
• Owner: castastrophe
• License: apache-2.0
• Created: 2023-04-05T02:52:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-22T17:05:56.000Z (6 months ago)
• Last Synced: 2024-05-22T18:02:31.908Z (6 months ago)
• Language: CSS
• Size: 686 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-transformselectors

> Re-map and transform selectors

## Installation

```sh

npm install postcss-transformselectors

```

## Usage

In your `postcss.config.js`, pass `options` to the plugin:

```js

module.exports = {

  plugins: [

    require('postcss-transformselectors')({

      replace: [

        // replace all instaces of .button in a selector with .btn (will catch .button:hover)

        // when search is a string, replaces are automatically made global

        { search: '.button', replace: '.btn' },

        // replace all double dashes in classnames with an underscore

        // note the g flag (global) is used to ensure every instance in a selector is replaced

        { search: /\.(.*?)--([^ ]*?)/g, replace: '.$1_$2' },

      ],

      // lowercase all classnames

      // you can use the PostCSS Rule object to determine the new selector (i.e. based off rule.parent)

      transform: (selector, rule) => selector.toLowerCase()

    }),

  ],

};

````

### `options.replace`

An array of objects with `{ search: RegExp | string, replace: string }`.

### `options.transform`

A function that takes `(selector, rule)` and returns a new selector.