@tarojs/rn-style-transformer 4.0.1-alpha.0 → 4.0.1

package/.eslintrc.js

@@ -0,0 +1,8 @@
+const config = require('../../.eslintrc.js')
+
+module.exports = {
+  ...config,
+  rules: {
+    ...config.rules
+  }
+}

package/LICENSE

@@ -154,8 +154,15 @@ See `/LICENSE` for details of the license.
 
 ==================
 
+MIT (stencil-vue2-output-target):
+The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
+`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
 MIT (weui):
-The following files embed [weui](https://github.com/Tencent/weui) MIT:
+The following files embed [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT:
 `/packages/taro-components/src/components/*.scss`
 See `/LICENSE.txt` for details of the license.
 
@@ -165,10 +172,3 @@ Apache-2.0 (intersection-observer):
 The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
 `/packages/taro-api/src/polyfill/intersection-observer.ts`
 See `/LICENSE.txt` for details of the license.
-
-==================
-
-MIT (babel-plugin-jsx-dom-expressions):
-The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
-`/packages/babel-plugin-transform-solid-jsx/src/*`
-See `/LICENSE` for details of the license.

package/README.md

@@ -6,7 +6,7 @@
 
 `object`
 
-`postcss` 相关配置，其他样式语言预处理后经过此配置。
+ `postcss` 相关配置，其他样式语言预处理后经过此配置。
 
 ```js
 module.exports = {
@@ -15,30 +15,19 @@ module.exports = {
     // ...
     postcss: {
       // postcss 配置，参考 https://github.com/postcss/postcss#options
-      options: {
-        /* ... */
-      },
+      options: { /* ... */ },
       // 默认true，控制是否对 css value 进行 scalePx2dp 转换，pxtransform配置 enable 才生效
       scalable: boolean,
       pxtransform: {
         enable: boolean, // 默认true
-        config: {
-          /* ... */
-        }, // 插件 pxtransform 配置项，参考尺寸章节
+        config: { /* ... */ } // 插件 pxtransform 配置项，参考尺寸章节
       },
       // 跟其他端 css module 配置保持统一
       cssModules: {
         enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
-      },
-      // postcss-css-variables 配置，样式变量编译相关
-      'postcss-css-variables': {
-        enable: boolean, // 默认 true
-        config: {
-          /* ... */
-        }, // 插件 postcss-css-variables 配置项，参考 https://github.com/MadLittleMods/postcss-css-variables?tab=readme-ov-file#options
-      },
+      }
     },
-  },
+  }
 }
 ```
 
@@ -46,7 +35,7 @@ module.exports = {
 
 `object`
 
-`sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。
+ `sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。
 
 ```js
 module.exports = {
@@ -54,13 +43,11 @@ module.exports = {
   rn: {
     // ...
     sass: {
-      options: {
-        /* ... */
-      },
-      // 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
+      options: { /* ... */ },
+    	// 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
       additionalData: '', // {String|Function}
-    },
-  },
+    }
+  }
 }
 ```
 
@@ -76,12 +63,10 @@ module.exports = {
   rn: {
     // ...
     less: {
-      options: {
-        /* ... */
-      },
+      options: { /* ... */ },
       additionalData: '', // {String|Function}
-    },
-  },
+    }
+  }
 }
 ```
 
@@ -89,7 +74,7 @@ module.exports = {
 
 `object`
 
-`stylus` 相关配置。`options` 配置项如下。
+ `stylus` 相关配置。`options` 配置项如下。
 
 ```js
 module.exports = {
@@ -104,7 +89,7 @@ module.exports = {
          * @type {(string|Function)[]}
          * @default []
          */
-        use: ['nib'],
+        use: ["nib"],
 
         /**
          * Add path(s) to the import lookup paths.
@@ -112,7 +97,7 @@ module.exports = {
          * @type {string[]}
          * @default []
          */
-        include: [path.join(__dirname, 'src/styl/config')],
+        include: [path.join(__dirname, "src/styl/config")],
 
         /**
          * Import the specified Stylus files/paths.
@@ -120,7 +105,7 @@ module.exports = {
          * @type {string[]}
          * @default []
          */
-        import: ['nib', path.join(__dirname, 'src/styl/mixins')],
+        import: ["nib", path.join(__dirname, "src/styl/mixins")],
 
         /**
          * Define Stylus variables or functions.
@@ -130,8 +115,8 @@ module.exports = {
          */
         // Array is the recommended syntax: [key, value, raw]
         define: [
-          ['$development', process.env.NODE_ENV === 'development'],
-          ['rawVar', 42, true],
+          ["$development", process.env.NODE_ENV === "development"],
+          ["rawVar", 42, true],
         ],
         // Object is deprecated syntax (there is no possibility to specify "raw')
         // define: {
@@ -168,7 +153,7 @@ module.exports = {
         hoistAtrules: true,
       },
       additionalData: '', // {String|Function}
-    },
-  },
+    }
+  }
 }
 ```

package/__tests__/config.spec.js

@@ -0,0 +1,203 @@
+import { recursiveMerge } from '@tarojs/helper'
+import * as path from 'path'
+
+import StyleTransform, { getWrapedCSS } from '../src/transforms'
+
+const defaultConfig = {
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  alias: {
+    '@': path.resolve(__dirname, './styles')
+  },
+  rn: {
+    postcss: {
+      options: {
+        plugins: []
+      }
+    },
+    sass: {
+      options: {},
+      additionalData: ''
+    },
+    less: {
+      options: {},
+      additionalData: ''
+    },
+    stylus: {
+      options: {},
+      additionalData: ''
+    }
+  }
+}
+
+async function run (src, filename = './__tests__/styles/a.css', debug) {
+  let options = { platform: 'android' }
+  let config
+
+  if (typeof src === 'object') {
+    ({
+      src,
+      filename = './__tests__/styles/a.css',
+      options = { platform: 'android' },
+      debug,
+      config
+    } = src || {})
+  }
+
+  const mergeConfig = recursiveMerge({}, defaultConfig, config)
+  // console.log('mergeConfig', JSON.stringify(mergeConfig, null, '  '))
+  const styleTransform = new StyleTransform(mergeConfig)
+  const css = await styleTransform.transform(src, filename, options)
+  if (debug) {
+    // eslint-disable-next-line
+    console.log(filename + ' source: ', src)
+    // eslint-disable-next-line
+    console.log(filename + ' target: ', css)
+  }
+  return css
+}
+
+describe('style transform with config options', () => {
+  it('config.sass option', async () => {
+    const css = await run({
+      src: `
+        .test {
+          color: $base-color;
+          height: 10px;
+        }
+      `,
+      config: {
+        sass: {
+          resource: [
+            '__tests__/styles/variable.scss',
+            '__tests__/styles/b.css'
+          ],
+          projectDirectory: path.resolve(__dirname, '..'),
+          data: '.data { width: 200px }'
+        }
+      },
+      filename: './__tests__/styles/a.scss'
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "brn": {
+    "color": "red"
+  },
+  "data": {
+    "width": scalePx2dp(100)
+  },
+  "test": {
+    "color": "#c6538c",
+    "height": scalePx2dp(5)
+  }
+}`))
+  })
+
+  it('config.sass option without projectDirectory', async () => {
+    const css = await run({
+      src: `
+        .test {
+          color: $base-color;
+          height: 10px;
+        }
+      `,
+      filename: './__tests__/styles/a.scss',
+      config: {
+        sass: {
+          resource: [
+            path.resolve(__dirname, 'styles/variable.scss'),
+            path.resolve(__dirname, 'styles/b.css')
+          ],
+          projectDirectory: path.resolve(__dirname, '..'),
+          data: '.data { width: 200px }'
+        }
+      }
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "brn": {
+    "color": "red"
+  },
+  "data": {
+    "width": scalePx2dp(100)
+  },
+  "test": {
+    "color": "#c6538c",
+    "height": scalePx2dp(5)
+  }
+}`))
+  })
+
+  it('config.postcss disable pxTransform', async () => {
+    const css = await run(`
+      .test {
+        height: 10px;
+      }
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "height": scalePx2dp(5)
+  }
+}`))
+  })
+
+  it('config.postcss disable scalePx2dp', async () => {
+    const config = {
+      rn: {
+        postcss: {
+          options: {
+            plugins: []
+          },
+          scalable: false
+        }
+      }
+    }
+    const css = await run({
+      src: `
+        .test {
+          height: 10px;
+        }
+      `,
+      config
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "height": 5
+  }
+}`))
+  })
+  it('config.alias in css', async () => {
+    const css = await run("@import '@/b.css';")
+    expect(css).toEqual(getWrapedCSS(`{
+  "brn": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('config.alias in sass', async () => {
+    const css = await run({
+      src: "@import '@/b.scss';",
+      filename: './__tests__/styles/a.scss'
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('config.alias in less', async () => {
+    const css = await run({
+      src: "@import '@/b.less';",
+      filename: './__tests__/styles/a.less'
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  }
+}`))
+  })
+})

package/__tests__/index.spec.js

@@ -0,0 +1,252 @@
+import StyleTransform, { getWrapedCSS } from '../src/transforms'
+
+// 初始化
+const styleTransform = new StyleTransform({})
+
+async function run (src, filename = './__tests__/styles/a.css', debug) {
+  let options = { platform: 'android' }
+
+  if (typeof src === 'object') {
+    ({
+      src,
+      filename = './__tests__/styles/a.css',
+      options = { platform: 'android' },
+      debug
+    } = src || {})
+  }
+
+  const css = await styleTransform.transform(src, filename, options)
+  if (debug) {
+    // eslint-disable-next-line
+    console.log(filename + ' source: ', src)
+    // eslint-disable-next-line
+    console.log(filename + ' target: ', css)
+  }
+  return css
+}
+
+describe('style transform', () => {
+  it('.css transform basic', async () => {
+    const css = await run(`
+      .test {
+        color: red;
+        height: 10px;
+      }
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red",
+    "height": scalePx2dp(5)
+  }
+}`))
+  })
+
+  it('.css transform viewport unit', async () => {
+    const css = await run(`
+      .test {
+        height: 10vh;
+      }
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "height": scaleVu2dp(10, 'vh')
+  },
+  "__viewportUnits": true
+}`))
+  })
+
+  it('.css transform @import', async () => {
+    const css = await run(`
+      @import './b.css';
+      .test {
+        color: red;
+      }
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "brn": {
+    "color": "red"
+  },
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.css import source omit extension', async () => {
+    const css = await run("@import './b';", './__tests__/styles/a.css')
+    expect(css).toEqual(getWrapedCSS(`{
+  "brn": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.sass transform basic', async () => {
+    const css = await run(`
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.scss')
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+  //
+  it('.sass transform @import', async () => {
+    const css = await run(`
+      @import './b.scss';
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.scss')
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  },
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+  it('.sass transform @import css file', async () => {
+    const css = await run(`
+      @import './c.css';
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.scss')
+    expect(css).toEqual(getWrapedCSS(`{
+  "c": {
+    "color": "red"
+  },
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.sass transform @import with mixins', async () => {
+    const css = await run(`
+      @import './mixins.scss';
+      .test {
+        color: red;
+        @include hairline(width);
+      }
+    `, './__tests__/styles/a.scss')
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red",
+    "width": scalePx2dp(0.5)
+  }
+}`))
+  })
+
+  it('.sass import source omit extension', async () => {
+    const css = await run("@import './b';", './__tests__/styles/a.scss')
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.less transform basic', async () => {
+    const css = await run(`
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.less')
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.less transform @import', async () => {
+    const css = await run(`
+      @import './b.less';
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.less')
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  },
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.less tranform nest import', async () => {
+    const css = await run(`
+      @import './c.less';
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.less')
+    expect(css).toEqual(getWrapedCSS(`{
+  "nest": {
+    "color": "red"
+  },
+  "c": {
+    "color": "red"
+  },
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.less tranform node_modules file import', async () => {
+    const css = await run("@import 'less/test/browser/css/global-vars/simple.css';", './__tests__/styles/a.less')
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.less import source omit extension', async () => {
+    const css = await run("@import './b';", './__tests__/styles/a.less')
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "red"
+  }
+}`))
+  })
+
+  it('.styl transform basic', async () => {
+    const css = await run(`
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.styl')
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "#f00"
+  }
+}`))
+  })
+
+  it('.styl transform @import', async () => {
+    const css = await run(`
+      @import './b.styl';
+      .test {
+        color: red;
+      }
+    `, './__tests__/styles/a.styl')
+    expect(css).toEqual(getWrapedCSS(`{
+  "b": {
+    "color": "#f00"
+  },
+  "test": {
+    "color": "#f00"
+  }
+}`))
+  })
+})

package/__tests__/platform.spec.js

@@ -0,0 +1,78 @@
+import StyleTransform, { getWrapedCSS } from '../src/transforms'
+
+// 初始化config
+const styleTransform = new StyleTransform({})
+
+async function run (src, filename = './__tests__/styles/a.css', options = { platform: 'android' }, debug) {
+  if (typeof src === 'object') {
+    ({
+      src,
+      filename = './__tests__/styles/a.css',
+      options = { platform: 'android' },
+      debug
+    } = src || {})
+  }
+
+  const css = await styleTransform.transform(src, filename, options)
+  if (debug) {
+    // eslint-disable-next-line
+    console.log(filename + ' source: ', src)
+    // eslint-disable-next-line
+    console.log(filename + ' target: ', css)
+  }
+  return css
+}
+
+describe('style transform in cross platform', () => {
+  it('postcss cross platform conditional compile', async () => {
+    const css = await run(`
+      .test {
+        color: red;
+      }
+      /*  #ifdef  rn  */
+      .rn { width: 100px }
+      /*  #endif  */
+      /*  #ifndef  rn  */
+      .h5 { errSet: 100px }
+      /*  #endif  */
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "color": "red"
+  },
+  "rn": {
+    "width": scalePx2dp(50)
+  }
+}`))
+  })
+
+  it('not surport style', async () => {
+    const css = await run(`
+      .test {
+        o: 0.5;
+        background: red;
+      }
+    `)
+    expect(css).toEqual(getWrapedCSS(`{
+  "test": {
+    "o": 0.5,
+    "backgroundColor": "red"
+  }
+}`))
+  })
+
+  it('nest sass import cross platform', async () => {
+    const css = await run({
+      filename: './__tests__/styles/a.scss',
+      src: "@import './c.scss';"
+    })
+    expect(css).toEqual(getWrapedCSS(`{
+  "drn": {
+    "color": "red"
+  },
+  "crn": {
+    "color": "red"
+  }
+}`))
+  })
+})

package/__tests__/styles/b.css

@@ -0,0 +1,3 @@
+.b {
+  color: red;
+}