postcss-ltr-rtl-detect

PostCSS plugin that detects properties in your CSS that influence LTR and RTL layouts and are not being generated by @mixins or another dynamic way.

item.css
``css
.item {
text-align: right;
}
`

Console warning:
> text-align: right; found on line 2. Use a @mixin to support LTR vs RTL.

item.css - fixing the warnings
`css
.item {
/*
supposing you have a @mixin that handles the alignment "right" or "left"
following the current layout direction (LTR or RTL)
*/
@mixin textAlign end;
}
`

Done!

Properties detected:
padding, padding-right, padding-left
margin, margin-right, margin-left
border, border-right, border-left
left, right
text-align
float

Aggressive Properties detected:
padding-top, padding-bottom,
margin-top, margin-bottom,
border-top, border-bottom,
top, bottom,
border,

Usage


All warnings are written to postCSS result.messages.
You'll need a tool to handle them, for example, postcss-reporter.

`js

postcss() {
return [
require('postcss-ltr-rtl-detect'),
require('postcss-reporter'),
];
}
`

$3

#### aggressive
Detects properties that don't influence layout LTR RTL like "margin-top".
Type: Boolean
Default: true

#### aggressiveMsg
Warning shown when an Aggressive Property is found.
Type: string
Default: Use a @mixin to keep consistence on code.

Example

item.css
`css
.item {
@mixin margin end, 1rem;
margin-top: 10%;
}
`

Console warning:
> margin-top: 10%; found on line 3. Use a @mixin to keep consistence on code.

---

#### importantDetect
Detects properties that have !important.
Type: Boolean
Default: false

#### importantMsg
Warning shown when a unit value is found (unitsDetect: true required).
Type: string
Default: Consider reviewing your code and remove !important rule.

Example

item.css
`css
.item {
margin-top: 10%!important;
}
`

Console warning:
> margin-top: 10%!important; found on line 2. Consider reviewing your code and remove !important rule...

---

#### propsDetect
Detects properties that influence ltr | rtl layout.
Type: Boolean
Default: true

#### propsMsg
Warning shown when a propriety that affects the layout RTL vs LTR is found.
Type: string
Default: Use a @mixin to support LTR vs RTL.


#### unitsPxDetect
Detects properties that have px value instead of variable.
Type: Boolean
Default: false

#### unitsRemDetect
Detects properties that have rem value instead of variable.
Type: Boolean
Default: false

#### unitsEmDetect
Detects properties that have em value instead of variable.
Type: Boolean
Default: false

#### unitsMsg
Warning shown when a unit value is found (unitsDetect: true required).
Type: string
Default: Consider using a variable.

Example
item.css
`css
.item {
border: 1px solid red;
padding: 15px;
font-size: 1rem;
}
`

Console warning:
> border: 1px solid red; found on line 2. Consider using a variable.
> padding: 15px; found on line 3. Consider using a variable.
> font-size: 1rem; found on line 4. Consider using a variable.

#### ignoreNodeModules
Don't show warnings if css file is at node_modules/.
Type: bool
Default: true.

---

$3


If for some reason you don't want to ignore the css smell, you can add / smell-ignore / as comment on CSS rule.
- Notice to write / smell-ignore / after the rule but before the semicolon ;, otherwise it won't work.

Example
item.css
`css
.item {
border: 1px solid red / smell-ignore /;
padding: 15px;
}
`

Console warning:
> padding: 15px; found on line 3. Consider using a variable.

---

$3

`js

/ activate units detection /
postcss() {
return [
require('postcss-ltr-rtl-detect')({
importantDetect: true,
importantMsg: "don't you dare using it",
unitsPxDetect: true
}),
require('postcss-reporter'),
];
}

``

Contribute

Any doubts or suggestions you may have feel free to create an issue on github repo.

License

MIT Licence