@tarojs/rn-style-transformer 4.0.0-beta.93 → 4.0.0-beta.94

package/package.json

@@ -1,55 +1,56 @@
 {
   "name": "@tarojs/rn-style-transformer",
-  "version": "4.0.0-beta.93",
-  "description": "提供Taro RN 统一处理样式文件能力",
+  "version": "4.0.0-beta.94",
+  "description": "提供 Taro RN 统一处理样式文件能力",
+  "author": "O2Team",
+  "license": "MIT",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/NervJS/taro/issues"
   },
   "engines": {
-    "node": ">= 18",
-    "npm": ">= 6"
+    "node": ">= 18"
   },
   "dependencies": {
-    "@babel/core": "^7.14.5",
-    "fbjs": "^2.0.0",
-    "less": "^3.12.2",
     "@react-native/metro-babel-transformer": "^0.73.2",
-    "postcss-import": "^14.0.0",
-    "postcss-reporter": "^7.0.5",
-    "prop-types": "^15.7.2",
-    "resolve": "^1.22.0",
-    "sass": "1.37.5",
-    "stylelint": "^14.9.1",
-    "stylus": "^0.55.0",
-    "@tarojs/helper": "4.0.0-beta.93",
-    "stylelint-config-taro-rn": "4.0.0-beta.93",
-    "stylelint-taro-rn": "4.0.0-beta.93",
-    "postcss-pxtransform": "4.0.0-beta.93",
-    "taro-css-to-react-native": "4.0.0-beta.93"
+    "fbjs": "^3.0.5",
+    "less": "^4.2.0",
+    "postcss-import": "^16.1.0",
+    "postcss-reporter": "^7.1.0",
+    "prop-types": "^15.8.1",
+    "resolve": "^1.22.8",
+    "sass": "^1.75.0",
+    "stylelint": "^16.4.0",
+    "stylus": "^0.63.0",
+    "@tarojs/helper": "4.0.0-beta.94",
+    "postcss-pxtransform": "4.0.0-beta.94",
+    "stylelint-config-taro-rn": "4.0.0-beta.94",
+    "stylelint-taro-rn": "4.0.0-beta.94",
+    "taro-css-to-react-native": "4.0.0-beta.94"
   },
   "devDependencies": {
-    "babel-jest": "^29.7.0",
-    "jest": "^29.3.1",
-    "jest-cli": "^29.3.1",
-    "postcss": "^8.4.18",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.7.4"
+    "@babel/core": "^7.14.5",
+    "postcss": "^8.4.38"
   },
   "peerDependencies": {
-    "postcss": "^8.4.18"
+    "postcss": ">= 8"
   },
   "scripts": {
+    "prod": "pnpm run build",
+    "prebuild": "pnpm run clean",
+    "clean": "rimraf --impl=move-remove ./dist",
     "build": "tsc",
     "dev": "tsc -w",
-    "lint": "eslint .",
-    "test": "jest",
-    "test:ci": "jest --ci -i --coverage --silent",
-    "test:clear": "jest --clearCache"
+    "lint": "eslint src __tests__ --ext .js,.ts",
+    "test": "vitest run",
+    "test:ci": "vitest run --coverage"
   }
 }

package/.eslintrc.js

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

package/__tests__/config.spec.js

@@ -1,203 +0,0 @@
-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

@@ -1,252 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

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

package/__tests__/styles/b.less

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

package/__tests__/styles/b.rn.css

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

package/__tests__/styles/b.scss

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

package/__tests__/styles/b.styl

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

package/__tests__/styles/c.css

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

package/__tests__/styles/c.less

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

package/__tests__/styles/c.rn.scss

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

package/__tests__/styles/c.scss

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

package/__tests__/styles/d.rn.scss

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

package/__tests__/styles/d.scss

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