https://github.com/cyansalt/postcss-transform-decl

Transform any declarations with custom rules
https://github.com/cyansalt/postcss-transform-decl

postcss postcss-plugin

Last synced: 7 days ago
JSON representation

Transform any declarations with custom rules

• Host: GitHub
• URL: https://github.com/cyansalt/postcss-transform-decl
• Owner: CyanSalt
• License: isc
• Created: 2021-11-22T07:38:52.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T03:38:46.000Z (6 months ago)
• Last Synced: 2024-11-07T03:49:32.892Z (9 days ago)
• Topics: postcss, postcss-plugin
• Language: TypeScript
• Homepage:
• Size: 684 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-transform-decl

[![npm](https://img.shields.io/npm/v/postcss-transform-decl.svg)](https://www.npmjs.com/package/postcss-transform-decl)

Transform any declarations with custom rules.

## Installation

```shell

npm install --save-dev postcss-transform-decl

```

## Usage

```js

// postcss.config.js

module.exports = {

  'postcss-transform-decl': {

    rules: [

      /* Your rules here ... */

    ],

  },

}

```

For legacy version:

```js

// postcss.config.js

module.exports = {

  'postcss-transform-decl/dist/legacy': {

    rules: [

      /* Your rules here ... */

    ],

  },

}

```

## Rules

You can write rules in either of the following ways:

```js

[

  // Exact match

  { prop: 'overflow', from: 'overlay', to: 'hidden' },

  // Regular match

  { prop: /^overflow-?/, from: 'overlay', to: 'hidden' },

  // Backward/forward compatibility

  { prop: /^overflow-?/, from: 'overlay', to: 'hidden', at: 'before' },

  { prop: /^overflow-?/, from: 'auto', to: 'overlay', at: 'after' },

  // Regular replacement

  { prop: /^overflow-?/, from: /^(.+)lay$/, to: '$1load' },

  { prop: /^overflow-?/, from: /^(.+)lay$/, to: (matches, over) => `${over}load` },

  // Custom functions

  {

    prop: /^overflow-?/,

    transform(decl) {

      if (decl.prop === 'overflow-x') {

        return { from: 'overlay', to: 'auto' }

      } else {

        decl.value = 'hidden'

      }

    },

  },

]

```