postcss-change-dir

v0.1.0

Published

10 days ago

PostCSS plugin for RTL-optimizations

Downloads

0High
0Medium
0Low

true-ame

postcss css postcss-plugin postcss plugin rtl ltr right to left left to right

POSTCSS-CHANGE-DIR

PostCSS插件，用于响应式 RTL

生成 RTL 规则，翻转属性。使用一个文件即可适用于两个方向！

POSTCSS-CHANGE-DIR

示例

简单属性

大多数情况下，你只需要翻转属性名称或值从left变为right，或者改变全值简写中的值顺序从top-right-bottom-left变为top-left-bottom-right。

LTR 输入：

.foo {
  float: right;
  margin-left: 13px;
  text-align: right;
  font-size: 13px;
  border-color: lightgray;
  border-width: 2px 0 2px 2px;
  border-style: solid dashed solid solid;
}

.foo {
  text-align: center;
}

LTR+RTL 输出：

.foo {
  font-size: 13px;
}

[dir] .foo {
  border-color: lightgray;
}

[dir='ltr'] .foo {
  float: right;
  margin-left: 13px;
  text-align: right;
  border-width: 2px 0 2px 2px;
  border-style: solid dashed solid solid;
}

[dir='rtl'] .foo {
  float: left;
  margin-right: 13px;
  text-align: left;
  border-width: 2px 2px 2px 0;
  border-style: solid solid solid dashed;
}

[dir] .foo {
  text-align: center;
}

动画

可翻转的关键帧动画将被拆分为两个基于方向的规则，分别带有-ltr或-rtl后缀

LTR 输入：

.foo {
  animation: 1s slide 0s ease-in-out;
}

@keyframes slide {
  from {
    transform: translate(-1000px);
  }
  to {
    transform: translate(0);
  }
}

LTR+RTL 输出：

[dir='ltr'] .foo {
  animation: 1s slide-ltr 0s ease-in-out;
}

[dir='rtl'] .foo {
  animation: 1s slide-rtl 0s ease-in-out;
}

@keyframes slide-ltr {
  from {
    transform: translate(-1000px);
  }
  to {
    transform: translate(0);
  }
}

@keyframes slide-rtl {
  from {
    transform: translate(1000px);
  }
  to {
    transform: translate(0);
  }
}

值指令

要转换声明值，请使用值指令：

/* rtl:prepend:{value} */ - 在当前值之前添加{value}
/* rtl:append:{value} */ - 在当前值之后添加{value}
/* rtl:{value} */ - 用提供的值替换当前值

源代码

.foo {
  font-weight: bold;
  font-family: 'Droid Sans', 'Helvetica Neue', Arial, sans-serif /*rtl:prepend:"Droid Arabic Kufi",*/;
  transform: rotate(45deg) /* rtl:append: scaleX(-1) */;
  flex-direction: row /* rtl: row-reverse */;
}

结果

.foo {
  font-weight: bold;
}

[dir='ltr'] .foo {
  font-family: 'Droid Sans', 'Helvetica Neue', Arial, sans-serif /*rtl:prepend:"Droid Arabic Kufi",*/;
  transform: rotate(45deg) /* rtl:append: scaleX(-1) */;
  flex-direction: row /* rtl: row-reverse */;
}

[dir='rtl'] .foo {
  font-family: 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  transform: rotate(45deg) scaleX(-1);
  flex-direction: row-reverse;
}

属性指令

要转换声明属性名称，请使用属性指令：

/* rtl:as:{prop} */ - 将属性处理为{prop}。适用于自定义属性（底层使用[rtlcss 别名][别名文档]）

源代码

:root {
  --padding/* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

结果

[dir='ltr']:root {
  --padding/* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

[dir='rtl']:root {
  --padding/* rtl:as:padding */: 1rem 4rem 3rem 2rem;
}

忽略特定声明

要跳过翻转特定声明，请使用一些支持的指令：

/* rtl:ignore */ - 忽略以下规则或包含声明
/* rtl:begin:ignore */ 和 /* rtl:end:ignore */ - 在作用域内忽略规则

忽略一条规则：

/* rtl:ignore */
.foo {
  padding-left: 0;
}

块语法以忽略作用域内的规则：

/* rtl:begin:ignore */
.foo {
  padding-left: 0;
}
.bar {
  direction: ltr;
}
/* rtl:end:ignore */

值语法以忽略单个 CSS 声明：

.foo {
  margin-left: 20px;
  padding-right: 20px /* rtl:ignore */;
}

/*! 符号也可以使用：

/*! rtl:ignore */
.foo {
  padding-left: 0;
}

使用

将其插入 PostCSS

const postcss = require('postcss')
const rtl = require('postcss-change-dir')

postcss([rtl(options)])

查看PostCSS文档以获取你的环境示例。

通过在<html>元素上切换dir="ltr"和dir="rtl"来管理方向。

与 Webpack 一起使用：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('postcss-change-dir')(options)]
              }
            }
          }
        ]
      }
    ]
  }
}

与 Gulp 一起使用：

gulp
  .src('style.css')
  .pipe(postcss([rtl(options)]))
  .pipe(gulp.dest('./dest'))

选项

addPrefixToSelector: 自定义函数，用于添加前缀到选择器。可选。示例：
```
function addPrefixToSelector(selector, prefix) {
  return `${prefix} > ${selector}` // 使选择器变为 [dir=rtl] > .selector
}
```
注意： 返回的字符串必须包含prefix以避免无限递归
onlyDirection: 仅生成单向版本：ltr或rtl
prefixType: 在添加属性和类选择器之间切换。可选：
- attribute（默认，推荐）：.foo => [dir=rtl] .foo
- class（适用于 IE6）：.foo => .dir-rtl .foo
prefix: 使用自定义字符串，而不是'dir'，用于添加的属性和类选择器
- 例如：'data-my-custom-dir'（对于属性 prefixType）：.foo => [data-my-custom-dir=rtl] .foo
- 例如：'my-custom-dir'（对于类 prefixType）：.foo => .my-custom-dir-rtl .foo
removeComments（默认：true）：处理后删除rtl:*注释
fromRTL（默认：false）：假设所有样式都是用 RTL 方向编写的，并为它们生成相应的 LTR 样式
blacklist：处理将被忽略的 CSS 属性数组示例：
```
;['padding-left', 'padding-right']
```
whitelist：将被处理的 CSS 属性数组（仅它们）示例：
```
;['margin', 'border-color']
```
aliases: 查看 rtlcss [别名文档][别名文档] 示例：
```
{
    `--spacing`: 'padding'
}
```

致谢

非常感谢以下项目：

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme