postcss-cssjanus

    1.0.5 • Public • Published

    PostCSS cssjanus

    PostCSS plugin to create RTL rules using CSSJanus. (Only RTL styles are generated).

    The code fork for postcss-janus,just modify little.

    Install

    npm

    npm install cssjanus postcss-cssjanus -D

    Basic usage

    Using postcss-loader in Webpack

    // postcss.config.js
    
    const plugins = {
      'tailwindcss': {},
      'autoprefixer': {},
      'postcss-flexbugs-fixes': {},
      'postcss-preset-env': {
        autoprefixer: {
          flexbox: true,
          // grid: 'autoplace'
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    }
    
    if (process.env.rtl === '1') {
      plugins['postcss-cssjanus'] = {
        'transformDirInUrl': false,
        'transformEdgeInUrl': false
      }
    }
    
    module.exports = {
      plugins,
    }

    Options

    Option Default Type Description
    transformDirInUrl false boolean Swap ltr and rtl strings in URLs
    transformEdgeInUrl false boolean Swap left and right strings in URLs

    Directives

    Directives should be added as comments before a CSS rule block or a property, e.g:

    /* @ruleDirective */
    .example {
        /* @propertyDirective */
        color: white;
    }
    Directive Description
    @noflip Avoid flipping certain CSS property or an entire rule block
    @transformDirInUrl Swap ltr and rtl strings in a certain property (it will ignore the global transformDirInUrl option
    @transformEdgeInUrl Swap left and right strings in a certain property (it will ignore the global transformEdgeInUrl option

    If you do not use PostCSS, add it according to official docs and set this plugin in settings.

    Install

    npm i postcss-cssjanus

    DownloadsWeekly Downloads

    247

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    7.19 kB

    Total Files

    5

    Last publish

    Collaborators

    • j1637787429