Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Support specifying processors during processing CSS declarations
  • Loading branch information
aleen42 authored and elchininet committed May 21, 2024
commit 1b013f6b1d9c197f2336b77478157c41a7d047d4
57 changes: 57 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,7 @@ All the options are optional, and a default value will be used if any of them is
| stringMap | `PluginStringMap[]` | Check below | An array of strings maps that will be used to make the replacements of the declarations' URLs and to match the names of the rules if `processRuleNames` is `true` |
| greedy | `boolean` | `false` | When greedy is `true`, the matches of `stringMap` will not take into account word boundaries |
| aliases | `Record<string, string>` | `{}` | A strings map to treat some declarations as others |
| processDeclarationPlugins | `Array<{name: string, priority: number, processors: PluginProcessor[]}>` | `[]` | Plugins applied when processing CSS declarations |

---

Expand Down Expand Up @@ -1447,6 +1448,62 @@ const options = {

---

#### processDeclarationPlugins

<details><summary>Expand</summary>
<p>

Sometimes, we can register some plugins when processing CSS declarations via the `processDeclarationPlugins` options, which is helpful when we need to avoid unexpected flipping situations like `background-position`.

##### input

```css
.test {
background-position: 0 100%;
}
```

##### Convert `0` to `100%` (default)

##### output

```css
.test {
background-position: 100% 100%;
}
```

##### Set a plugin to avoid flipping

```javascript
const options = {
processDeclarationPlugins: [
{
name: 'avoid-flipping-background',
priority: 99, // above the core RTLCSS plugin which has a priority value of 100
processors: [{
expr: /(background|object)(-position(-x)?|-image)?$/i,
action: (prop, value) => ({prop, value})}
]
}
]
};
```

##### output

```css
.test {
background-position: 0 100%;
}
```

</p>

</details>

---

Control Directives
---

Expand Down
6 changes: 6 additions & 0 deletions src/@types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export interface PluginStringMap {
replace: strings;
}

export interface PluginProcessor {
expr: RegExp;
action: (prop: string, value: string, context: object) => object;
}

export type PrefixSelectorTransformer = (prefix: string, selector: string) => string | void;

export interface PluginOptions {
Expand All @@ -58,6 +63,7 @@ export interface PluginOptions {
stringMap?: PluginStringMap[];
greedy?: boolean;
aliases?: Record<string, string>;
processDeclarationPlugins?: Array<{ name: string, priority: number, processors: PluginProcessor[] }>;
}

export interface PluginOptionsNormalized extends Omit<Required<PluginOptions>, 'stringMap' | 'prefixSelectorTransformer'> {
Expand Down
8 changes: 6 additions & 2 deletions src/data/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,8 @@ const defaultOptions = (): PluginOptionsNormalized => ({
useCalc: false,
stringMap: getRTLCSSStringMap(defaultStringMap),
greedy: false,
aliases: {}
aliases: {},
processDeclarationPlugins: []
});

const store: Store = {
Expand Down Expand Up @@ -217,7 +218,10 @@ const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => {
if (options.aliases && isObjectWithStringKeys(options.aliases)) {
returnOptions.aliases = options.aliases;
}
return returnOptions;
return {
...returnOptions,
processDeclarationPlugins: (options.processDeclarationPlugins || []).map(plugin => ({...plugin, directives: {control: {}, value: []}}))
};
};

const initStore = (options: PluginOptions): void => {
Expand Down
5 changes: 3 additions & 2 deletions src/parsers/declarations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ export const parseDeclarations = (
useCalc,
stringMap,
greedy,
aliases
aliases,
processDeclarationPlugins
} = store.options;

const deleteDeclarations: Declaration[] = [];
Expand Down Expand Up @@ -160,7 +161,7 @@ export const parseDeclarations = (
stringMap,
greedy,
aliases
});
}, processDeclarationPlugins);

/* the source could be undefined in certain cases but not during the tests */
/* istanbul ignore next */
Expand Down
Loading