Style I18n Loader

It's webpack loader for I18N style

LICENSE

MIT

Configuration:

create a configuration file(i18n.config.js) for loader under the root of project

i18n.config.js

module.exports = {
  paths: {
    "zh-CN": "~@/assets/lang/zh-Hans",
    "zh-TW": "~@/assets/lang/zh-Hant-TW",
    th: "~@/assets/lang/th",
    id: "~@/assets/lang/id",
    en: "~@/assets/lang/en",
    ar: "~@/assets/lang/ar",
  },
  rtl: ["ar"],
  syntax: "scss",
};

wepback.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
          // Complie @i18n to special code
          require.resolve("style-i18n-loader"),
        ],
      },
    ],
  },
};

Usage

The loader support the below rules.

i18n Usage

When you want to load the i18n image for different languages, it will refer the i18n image according to the paths in i18n.config.js.

style.scss

body {
  @i18n background-image: url(test.png);
}

// it will be complied to scss

body {
  @at-root #{selector-nest('html[lang=zh-CN]', &)} {
    background-image: url(~@/assets/lang/zh-Hans/test.png);
  }

  @at-root #{selector-nest('html[lang=zh-TW]', &)} {
    background-image: url(~@/assets/lang/zh-Hant-TW/test.png);
  }

  @at-root #{selector-nest('html[lang=th]', &)} {
    background-image: url(~@/assets/lang/th/test.png);
  }

  @at-root #{selector-nest('html[lang=id]', &)} {
    background-image: url(~@/assets/lang/id/test.png);
  }

  @at-root #{selector-nest('html[lang=en]', &)} {
    background-image: url(~@/assets/lang/en/test.png);
  }

  @at-root #{selector-nest('html[lang=ar]', &)} {
    background-image: url(~@/assets/lang/ar/test.png);
  }
}

rtl Usage

The direction of reading is right to left in Some of countries, special in middle east.

style.scss

body {
  @rtl margin: 1px 2px 3px 4px;
}

// it will be complied to scss

body {
  margin: 1px 2px 3px 4px;
  @at-root #{selector-nest('html[lang=ar]', &)} {
    margin: 1px 4px 3px 2px;
  }
}

lang Usage

Sometime you need some style for different country for current selector, you can do it like below:

style.scss

body {
  color: #fff;
  @lang (en) {
    color: #000;
  }
}
// it will be complied to scss

body {
  color: #fff;
  @at-root #{selector-nest('html[lang=en]', &)} {
    color: #000;
  }
}

Note: you can use the lib with intl-hmessage