Remove autoRename option and rename directives

[elchininet]

This pull request is a breaking change and a major release of the library.

Main change

The autoRename option was mimicking RTLCSS, but it didn‘t make sense for postcss-rtlcss in which both direction rules should be shipped in the same stylesheet. For example, taking the same examples from the README:

input

.test1-ltr {
    color: #FFF;
}

.test2-left::before {
    content: "\f007";
}

.test2-right::before {
    content: "\f010";
}

Using Autorename.flexible

import { Autorename } from 'postcss-rtlcss/options';

const options = {
    autoRename: Autorename.flexible
};

output

.test1-rtl {
    color: #FFF;
}

.test2-right::before {
    content: "\f007";
}

.test2-left::before {
    content: "\f010";
}

Using Autorename.strict

import { Autorename } from 'postcss-rtlcss/options';

const options = {
    autoRename: Autorename.strict
};

output

/* This selector will not be flipped because it doesn't have a counterpart */
.test1-ltr {
    color: #FFF;
}

.test2-right::before {
    content: "\f007";
}

.test2-left::before {
    content: "\f010";
}

These outputs flipped the name of the rules but they will not change depending on the direction of the page. Instead of this, the plugin should prefix the rules and create ones for LTR and others for RTL.

Changes in this pull request

Removal of autoRename option.

As this option is not useful in the context of postcss-rtlcss it has been replaced by a new option: processRuleNames. With processRuleNames, the rules that do not contain directional properties will be swapped depending on the direction of the page. For example:

input

.test1-ltr {
    color: #FFF;
}

.test2-left::before {
    content: "\f007";
}

.test2-right::before {
    content: "\f010";
}

processRuleNames true

const options = {
    processRuleNames: true
};

output

/* This selector will not be processed because it doesn't have a counterpart */
.test1-ltr {
    color: #FFF;
}

[dir="ltr"] .test2-left::before {
    content: "\f007";
}

[dir="rtl"] .test2-left::before {
    content: "\f010";
}

[dir="ltr"] .test2-right::before {
    content: "\f010";
}

[dir="rtl"] .test2-right::before {
    content: "\f007";
}

Removal of /*rtl:rename*/, /*rtl:begin:rename*/, and /*rtl:end:rename*/ directives

As the autoRename option was removed, these directives have been replaced by new directives that will only affect declarations with URLs: /*rtl:urls*/, /*rtl:begin:urls*/, and /*rtl:end:urls*/.

input

/*rtl:urls*/
.test1 {
    background-image: url("/buttons/button-ltr.png");
}

.test2 {
    /*rtl:urls*/
    background-image: url("/icons/icon-left.png");
}

output

[dir="ltr"] .test1 {
    background-image: url("/buttons/button-ltr.png");
}

[dir="rtl"] .test1 {
    background-image: url("/buttons/button-rtl.png");
}

[dir="ltr"] .test2 {
    background-image: url("/icons/icon-left.png");
}

[dir="rtl"] .test2 {
    background-image: url("/icons/icon-right.png");
}

input

/*rtl:begin:urls*/
.test1 {
    background-image: url("/buttons/button-ltr.png");
}

.test2 {
    background-image: url("/icons/icon-left.png");
}
/*rtl:end:urls*/

.test3 {
    /*rtl:begin:urls*/
    background-image: url("/images/background-left.png");
    cursor: url("/images/cursor-ltr.png");
    /*rtl:end:urls*/
}

output

[dir="ltr"] .test1 {
    background-image: url("/buttons/button-ltr.png");
}

[dir="rtl"] .test1 {
    background-image: url("/buttons/button-rtl.png");
}

[dir="ltr"] .test2 {
    background-image: url("/icons/icon-left.png");
}

[dir="rtl"] .test2 {
    background-image: url("/icons/icon-right.png");
}

[dir="ltr"] .test3 {
    background-image: url("/images/background-left.png");
    cursor: url("/images/cursor-ltr.png");
}

[dir="rtl"] .test3 {
    background-image: url("/images/background-right.png");
    cursor: url("/images/cursor-rtl.png");
}

Closes: #242

[coveralls]

coverage: 100.0%. remained the same
when pulling 7154de6 on release_5.0.0
into 3558aae on master.