@tarojs/rn-style-transformer 4.0.0-beta.87 → 4.0.0-beta.89

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/__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;
+}

package/__tests__/styles/b.less

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

package/__tests__/styles/b.rn.css

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

package/__tests__/styles/b.scss

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

package/__tests__/styles/b.styl

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

package/__tests__/styles/c.css

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

package/__tests__/styles/c.less

@@ -0,0 +1,5 @@
+@import ' ./nest.less ';
+
+.c {
+  color: red;
+}

package/__tests__/styles/c.rn.scss

@@ -0,0 +1,5 @@
+@import './d.scss';
+
+.crn {
+  color: red;
+}

package/__tests__/styles/c.scss

@@ -0,0 +1,5 @@
+@import './d.scss';
+
+.c {
+  color: red;
+}

package/__tests__/styles/d.rn.scss

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

package/__tests__/styles/d.scss

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

package/__tests__/styles/mixins.scss

@@ -0,0 +1,18 @@
+/**
+ * 对于不能打包到 RN 的样式，可以用 mixins 引入，相对美观一些
+ */
+@mixin eject($attr, $value) {
+  /*postcss-pxtransform rn eject enable*/
+  #{$attr}: $value;
+  /*postcss-pxtransform rn eject disable*/
+}
+
+/**
+ * // TODO 1px 的线在各端上实现方式不同，统一出来后续再兼容，目前注意两点：
+ * 1. Taro 中大写的 PX 不会被编译成 rpx/em，但 RN 还未兼容该写法
+ * 2. H5 中 1px(转成 rem 后实际小于 0.5px) + border-radius 会导致 border 不显示
+ */
+@mixin hairline($attr) {
+  #{$attr}: 1px;
+  @include eject($attr, 1PX);
+}

package/__tests__/styles/nest.rn.less

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

package/__tests__/styles/variable.scss

@@ -0,0 +1 @@
+$base-color: #c6538c;

package/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+}

package/dist/index.js

@@ -49,7 +49,7 @@ async function transform(src, filename, options) {
     }
     const ext = path.extname(filename);
     if (RN_CSS_EXT.includes(ext)) {
-        const styleTransform = getSingleStyleTransform(options.config || {});
+        const styleTransform = getSingleStyleTransform(options.config);
         const styles = await styleTransform.transform(src, filename, options);
         return upstreamTransformer.transform({
             src: styles,
@@ -62,11 +62,11 @@ async function transform(src, filename, options) {
 exports.transform = transform;
 function rollupTransform(options) {
     return {
-        name: 'rn-style-transformer', // this name will show up in warnings and errors
+        name: 'rn-style-transformer',
         async transform(src, filename) {
             const ext = path.extname(filename);
             if (RN_CSS_EXT.includes(ext)) {
-                const styleTransform = getSingleStyleTransform(options.config || {});
+                const styleTransform = getSingleStyleTransform(options.config);
                 const code = await styleTransform.transform(src, filename, options);
                 return { code };
             }