postcss-ltr-rtl-detect

    1.5.1 • Public • Published

    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

    Install

    npm i postcss-ltr-rtl-detect

    DownloadsWeekly Downloads

    222

    Version

    1.5.1

    License

    MIT

    Last publish

    Collaborators

    • rubenazevedo
    • sandrina-p