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

    .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

    .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.

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

Options (all optional)

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

    .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

    .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

    .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.

Ignore a specific rule

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

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

Console warning:

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

Usage example with some options

    /* 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