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

package/src/transforms/index.ts

@@ -0,0 +1,231 @@
+import { printLog, processTypeEnum, recursiveMerge } from '@tarojs/helper'
+import * as path from 'path'
+import transformCSS from 'taro-css-to-react-native'
+
+import { Config, PostcssConfig, RenderAdditionalResult, TransformOptions } from '../types'
+import { normalizeSourceMap } from '../utils'
+import lessTransform from './less'
+import postcssTransform, { makePostcssPlugins } from './postcss'
+import sassTransform from './sass'
+import { StyleSheetValidation } from './StyleSheet'
+import stylusTransform, { defaultOptions as stylusDefaultOptions } from './stylus'
+
+
+
+export function getWrapedCSS (css) {
+  return `
+import { StyleSheet } from 'react-native'
+import { scalePx2dp, scaleVu2dp } from '@tarojs/runtime-rn'
+
+// 用来标识 rn-runner transformer 是否读写缓存
+function ignoreStyleFileCache() {}
+
+export default StyleSheet.create(${css})
+`
+}
+
+/**
+ * 校验样式
+ */
+function validateStyle ({ styleObject, filename }) {
+  for (const name in styleObject) {
+    try {
+      StyleSheetValidation.validateStyle(name, styleObject)
+    } catch (err) {
+      // 先忽略掉 scalePx2dp 的报错
+      if (/Invalid prop `.*` of type `string` supplied to `.*`, expected `number`[^]*/g.test(err.message)) return
+      printLog(processTypeEnum.WARNING, err.message, `entry file: ${filename}`)
+    }
+  }
+}
+interface PostcssParam {
+  css: string
+  map: any
+  filename: string
+  additionalData: string
+  postcssConfig: PostcssConfig
+  transformOptions: TransformOptions
+}
+
+const designWidth = 750
+
+const deviceRatio = {
+  640: 2.34 / 2,
+  750: 1,
+  828: 1.81 / 2
+}
+
+const enum ProcessTypes {
+  POSTCSS = 'postcss',
+  SASS = 'sass',
+  LESS = 'less',
+  STYLUS = 'stylus',
+}
+
+const DEFAULT_RN_CONFIG = {
+  [ProcessTypes.POSTCSS]: {
+    options: {},
+    scalable: true
+  },
+  [ProcessTypes.SASS]: {
+    options: {}
+  },
+  [ProcessTypes.LESS]: {
+    options: {}
+  },
+  [ProcessTypes.STYLUS]: {
+    options: stylusDefaultOptions
+  }
+}
+
+export default class StyleTransform {
+  config: Config
+
+  processConfigMap = new Map()
+
+  constructor (config: Config) {
+    this.init(config)
+  }
+
+  init = (config: Config) => {
+    this.config = {
+      designWidth: config.designWidth || designWidth,
+      deviceRatio: config.deviceRatio || deviceRatio,
+      sass: config.sass || {},
+      alias: config.alias ?? {},
+      rn: recursiveMerge({}, DEFAULT_RN_CONFIG, config.rn)
+    }
+
+    Reflect.ownKeys(this.config.rn).forEach((key: string) => {
+      if (
+        [
+          ProcessTypes.SASS,
+          ProcessTypes.LESS,
+          ProcessTypes.STYLUS,
+          ProcessTypes.POSTCSS
+        ].includes(key.toLocaleLowerCase() as any)
+      ) {
+        const processConfig = {
+          ...this.config.rn[key],
+          alias: config.alias ?? {}
+        }
+        if (key.toLocaleLowerCase() === ProcessTypes.SASS) {
+          processConfig.sass = this.config.sass
+        }
+        this.processConfigMap.set(key, processConfig)
+      }
+    })
+  }
+
+  /**
+   * @description 样式文件处理
+   * @param {string} src
+   * @param {string} filename
+   * @param {object} options
+   */
+  async processStyle (src: string, filename: string, options: TransformOptions) {
+    let result: undefined | RenderAdditionalResult
+    let css = src
+    let map: undefined | string
+    let additionalData = ''
+    const ext = path.extname(filename)
+    if (/.less$/i.test(ext)) {
+      result = await lessTransform(src, filename, this.processConfigMap.get(ProcessTypes.LESS))
+    } else if (/.s(c|a)ss$/i.test(ext)) {
+      result = await sassTransform(src, filename, this.processConfigMap.get(ProcessTypes.SASS), options)
+    } else if (/.styl(us)?$/i.test(ext)) {
+      result = await stylusTransform(src, filename, this.processConfigMap.get(ProcessTypes.STYLUS))
+    }
+
+    if (result) {
+      css = Buffer.isBuffer(result.css) ? result.css.toString() : result.css
+      map = Buffer.isBuffer(result.map) ? result.map.toString() : result.map
+      additionalData = result.additionalData
+    }
+
+    // postcss 插件，比如处理平台特有样式，单位转换
+    return await this.postCSS({
+      css,
+      map,
+      filename,
+      additionalData,
+      transformOptions: options,
+      postcssConfig: this.processConfigMap.get(ProcessTypes.POSTCSS)
+    })
+  }
+
+  /**
+   * postcss处理
+   * @param param0 PostcssParam
+   * @returns {Promise | any}
+   */
+  postCSS ({
+    css,
+    map,
+    filename,
+    postcssConfig,
+    transformOptions,
+    additionalData
+  }: PostcssParam) {
+    const plugins = makePostcssPlugins({
+      filename,
+      postcssConfig,
+      transformOptions,
+      designWidth: this.config.designWidth,
+      deviceRatio: this.config.deviceRatio,
+      additionalData: additionalData
+    })
+
+    return postcssTransform(
+      css,
+      filename,
+      {
+        plugins,
+        options: {
+          ...postcssConfig.options,
+          map: map && {
+            prev: normalizeSourceMap(map, filename),
+            inline: false,
+            annotation: false
+          }
+        }
+      }
+    ).then(result => {
+      return {
+        ...result,
+        filename
+      }
+    })
+  }
+
+  /**
+   * @description 处理样式入口
+   * @param {string} src
+   * @param {string} filename
+   * @param {object} transform
+   * @return {string} JSONString
+   */
+  async transform (src: string, filename: string, options: TransformOptions) {
+    // printLog(processTypeEnum.START, '样式文件处理开始', filename)
+    const result = await this.processStyle(src, filename, options)
+
+    // 把 css 转换成对象 rn 的样式，接入 taro 的 css-to-react-native，比如有单位的处理
+    const styleObject = transformCSS(
+      result.css,
+      {
+        parseMediaQueries: true,
+        scalable: this.config.rn.postcss?.scalable
+      }
+    )
+
+    // stylelint，转换成对象，对对象进行校验
+    validateStyle({ styleObject, filename })
+    const css = JSON.stringify(styleObject, null, 2)
+      .replace(/"(scalePx2dp\(.*?\))"/g, '$1')
+      .replace(/"(scaleVu2dp\(.*?\))"/g, '$1')
+      .replace(/\\\\/g, '\\')
+
+    // 注入自适应方法 scalePx2dp
+    return getWrapedCSS(css)
+  }
+}

package/src/transforms/less.ts

@@ -0,0 +1,50 @@
+import less from 'less'
+import * as path from 'path'
+
+import { LessConfig, RenderAdditionalResult, RenderResult } from '../types'
+import { getAdditionalData, insertBefore } from '../utils'
+import makeLessImport from '../utils/lessImport'
+
+function renderToCSS (src, filename, options = {} as any) {
+  // default plugins
+  const plugins = [makeLessImport(options)]
+  // default paths set current filePath
+  const paths = [path.dirname(path.resolve(process.cwd(), filename))]
+  return new Promise((resolve, reject) => {
+    less
+      .render(src, {
+        ...options,
+        filename,
+        plugins: plugins.concat(options.plugins || []),
+        paths: paths.concat(options.paths || [])
+      }, (err, result) => {
+        if (err) {
+          return reject(err.message)
+        }
+        resolve(result)
+      })
+  })
+}
+
+export default function transform (
+  src: string,
+  filename: string,
+  config: LessConfig
+) {
+  const additionalData = getAdditionalData(src, config.additionalData)
+  const data = insertBefore(src, additionalData)
+
+  return renderToCSS(
+    data,
+    filename,
+    {
+      sourceMap: {
+        outputFilename: `${filename}.map`
+      },
+      alias: config.alias,
+      ...config.options
+    }
+  ).then((result: RenderResult) => {
+    return { ...result, additionalData } as RenderAdditionalResult
+  })
+}

package/src/transforms/postcss.ts

@@ -0,0 +1,96 @@
+import { isNpmPkg, printLog, processTypeEnum, recursiveMerge } from '@tarojs/helper'
+import * as path from 'path'
+import postcss from 'postcss'
+import postcssImport from 'postcss-import'
+import pxtransform from 'postcss-pxtransform'
+import { sync as resolveSync } from 'resolve'
+
+import stylelintConfig from '../config/rn-stylelint.json'
+import { resolveStyle } from '../utils'
+import reporterSkip from '../utils/reporterSkip'
+
+const defaultPxtransformOption: {
+  [key: string]: any
+} = {
+  enable: true,
+  config: {
+    platform: 'rn'
+  }
+}
+
+export function makePostcssPlugins ({
+  filename,
+  designWidth,
+  deviceRatio,
+  postcssConfig,
+  transformOptions,
+  additionalData
+}) {
+  const optionsWithDefaults = ['pxtransform', 'postcss-import', 'postcss-reporter', 'stylelint', 'cssModules']
+
+  if (designWidth) {
+    defaultPxtransformOption.config.designWidth = designWidth
+  }
+
+  if (deviceRatio) {
+    defaultPxtransformOption.config.deviceRatio = deviceRatio
+  }
+  const pxtransformOption = recursiveMerge({}, defaultPxtransformOption, postcssConfig.pxtransform)
+
+  const plugins = [
+    postcssImport({
+      resolve: function resolve (id: string, basedir: string, options: postcssImport.AtImportOptions) {
+        return resolveStyle(
+          id,
+          {
+            ...options,
+            basedir,
+            defaultExt: '.css', // 省略后缀则默认 `.css`
+            alias: postcssConfig.alias,
+            platform: transformOptions.platform
+          }
+        )
+      }
+    })
+  ]
+
+  if (pxtransformOption.enable) {
+    plugins.push(pxtransform(pxtransformOption.config))
+  }
+
+  const skipRows = additionalData ? additionalData.split('\n').length : 0
+
+  plugins.push(
+    require('stylelint')(stylelintConfig),
+    // @ts-ignore
+    reporterSkip({ skipRows, filename }),
+    require('postcss-reporter')({ clearReportedMessages: true })
+  )
+
+  Object.entries(postcssConfig).forEach(([pluginName, pluginOption]) => {
+    if (optionsWithDefaults.indexOf(pluginName) > -1) return
+    if (!pluginOption || !(pluginOption as any).enable) return
+
+    if (!isNpmPkg(pluginName)) { // local plugin
+      pluginName = path.join(process.cwd(), pluginName)
+    }
+
+    try {
+      const pluginPath = resolveSync(pluginName, { basedir: process.cwd() })
+      plugins.push(require(pluginPath)((pluginOption as any).config || {}))
+    } catch (e) {
+      const msg = e.code === 'MODULE_NOT_FOUND' ? `缺少postcss插件${pluginName}, 已忽略` : e
+      printLog(msg, processTypeEnum.WARNING)
+    }
+  })
+
+  return plugins
+}
+
+export default function transform (src: string, filename: string, { options, plugins }) {
+  return postcss(plugins)
+    .process(src, { from: filename, ...options })
+    .then(result => {
+      return result
+    })
+}

package/src/transforms/sass.ts

@@ -0,0 +1,151 @@
+import * as fs from 'fs'
+import * as path from 'path'
+
+import { RenderAdditionalResult, RenderResult, SassConfig, SassGlobalConfig, TransformOptions } from '../types'
+import { getAdditionalData, insertAfter, insertBefore, resolveStyle, sortStyle } from '../utils'
+
+/**
+ * 用过用户手动安装了 node-sass，启用node-sass，默认使用 sass
+ */
+function getSassImplementation () {
+  let sassImplPkg = 'node-sass'
+
+  try {
+    require.resolve('node-sass')
+  } catch (error) {
+    try {
+      require.resolve('sass')
+      sassImplPkg = 'sass'
+    } catch (ignoreError) {
+      sassImplPkg = 'sass'
+    }
+  }
+
+  return require(sassImplPkg)
+}
+
+const sassImplementation = getSassImplementation()
+
+function makeURL (resource: string, rootDir: string) {
+  const url = path.resolve(rootDir, resource)
+  if (!fs.existsSync(url)) {
+    throw new Error(`全局注入 scss 文件路径错误: ${url}`)
+  }
+  return url
+}
+
+function makeImportStatement (filePath: string, resource: string, rootDir: string) {
+  const url = makeURL(resource, rootDir)
+  const relativePath = path.relative(filePath, url).replace(/\\/g, '/') // fix window path error
+  return `@import './${relativePath}'`
+}
+
+function getGlobalResource (filename: string, config: SassGlobalConfig) {
+  let resource = ''
+  const projectDirectory = config.projectDirectory || process.cwd()
+  const filePath = path.dirname(path.resolve(projectDirectory, filename))
+  if (typeof config.resource === 'string') {
+    resource = makeImportStatement(filePath, config.resource, projectDirectory)
+  }
+  if (Array.isArray(config.resource)) {
+    const resources = config.resource?.map(source => makeImportStatement(filePath, source, projectDirectory)) || []
+    resource = resources.join(';\n')
+  }
+  // https://taro-docs.jd.com/taro/docs/config-detail/#sassdata, data 覆盖 resurce 配置
+  return insertAfter(resource, config?.data)
+}
+
+function combineResource (src: string, filename: string, config: SassConfig) {
+  // sass config
+  const globalResource = getGlobalResource(filename, config.sass || {})
+
+  // sass tranform config
+  const additionalData = getAdditionalData(src, config.additionalData)
+
+  return insertAfter(globalResource, additionalData)
+}
+
+function renderToCSS (src, filename, options, transformOptions: TransformOptions) {
+  const defaultOpts = {
+    importer: function (...params) { /* url, prev, done */
+      let [url, prev] = params
+      // url is the path in import as is, which LibSass encountered.
+      // prev is the previously resolved path.
+      // done is an optional callback, either consume it or return value synchronously.
+      // this.options contains this options hash, this.callback contains the node-style callback
+      let basedir = ''
+      let defaultExt = ''
+      if (process.platform === 'win32') {
+        prev = decodeURIComponent(prev)
+      }
+      if (path.isAbsolute(prev)) {
+        ({ dir: basedir, ext: defaultExt } = path.parse(prev))
+      } else {
+        ({ dir: basedir, ext: defaultExt } = path.parse(path.resolve(process.cwd(), filename)))
+      }
+
+      // 外部 sass importer 配置
+      if (typeof options.importer === 'function') {
+        ({ file: url } = options.importer(params))
+      }
+
+      try {
+        const file = resolveStyle(
+          url,
+          {
+            basedir,
+            defaultExt,
+            alias: options.alias,
+            platform: transformOptions.platform
+          }
+        )
+        const contents = fs.readFileSync(file, 'utf8')
+        return { file, contents }
+      } catch (err) {
+        return err
+      }
+    }
+  }
+
+  const opts = { ...options, ...defaultOpts, data: src }
+
+  return new Promise((resolve, reject) => {
+    sassImplementation.render(opts, (err, result) => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve(result)
+      }
+    })
+  })
+}
+
+export default function transform (
+  src: string,
+  filename: string,
+  config: SassConfig,
+  transformOptions: TransformOptions
+) {
+  const additionalData = combineResource(src, filename, config)
+  let data = insertBefore(src, additionalData)
+  data = sortStyle(data)
+
+  if (!data) {
+    data = `\n${data}` // fix empty file error. reference https://github.com/sass/node-sass/blob/91c40a0bf0a3923ab9f91b82dcd479c25486235a/lib/index.js#L430
+  }
+
+  return renderToCSS(
+    data,
+    filename,
+    {
+      // file: filename, // fix[issues/11983]: with file option，dart-sass importer donot execute。
+      outFile: `${filename}.map`,
+      sourceMap: true, // If no outFile is set, sourceMap parameter is ignored.
+      alias: config.alias,
+      ...config.options
+    },
+    transformOptions
+  ).then((result: RenderResult) => {
+    return { ...result, additionalData } as RenderAdditionalResult
+  })
+}

package/src/transforms/stylus.ts

@@ -0,0 +1,124 @@
+import stylus from 'stylus'
+
+import { RenderAdditionalResult, RenderResult, StylusConfig, StylusRenderOptions } from '../types'
+import { getAdditionalData, insertBefore } from '../utils'
+
+export const defaultOptions: StylusRenderOptions = {
+  use: [],
+  include: [],
+  import: [],
+  define: {},
+  includeCSS: false,
+  // resolveURL: { nocheck: false },
+  lineNumbers: false,
+  hoistAtrules: false,
+  disableCache: false
+}
+
+function renderToCSS (src, filename, options = {} as StylusRenderOptions) {
+  const stylusOptions = { filename, ...options }
+  const styl = stylus(src, stylusOptions)
+
+  styl.set(
+    'sourcemap',
+    {
+      comment: true,
+      sourceRoot: '.', // stylusOptions.dest
+      basePath: '.'
+    }
+  )
+
+  // include regular CSS on @import
+  if (stylusOptions.includeCSS) {
+    styl.set('include css', true)
+  }
+
+  if (stylusOptions.hoistAtrules) {
+    styl.set('hoist atrules', true)
+  }
+
+  if (stylusOptions.lineNumbers) {
+    styl.set('linenos', true)
+  }
+
+  if (stylusOptions.disableCache) {
+    styl.set('cache', false)
+  }
+
+  if (
+    typeof stylusOptions.use !== 'undefined' &&
+    stylusOptions.use.length > 0
+  ) {
+    let { length } = stylusOptions.use
+
+    // eslint-disable-next-line no-plusplus
+    while (length--) {
+      const [item] = stylusOptions.use.splice(length, 1)
+      let useIn: any = item
+      if (typeof item === 'string') {
+        try {
+          const resolved = require.resolve(item)
+
+          // eslint-disable-next-line import/no-dynamic-require, global-require
+          useIn = require(resolved)(stylusOptions)
+        } catch (error) {
+          const msg = `Failed to load "${item}" Stylus plugin.Are you sure it's installed?\n${error}`
+          throw new Error(msg)
+        }
+      }
+      styl.use(useIn)
+    }
+  }
+
+  if (typeof stylusOptions.import !== 'undefined') {
+    for (const imported of stylusOptions.import) {
+      styl.import(imported)
+    }
+  }
+
+  if (typeof stylusOptions.include !== 'undefined') {
+    for (const included of stylusOptions.include) {
+      styl.include(included)
+    }
+  }
+
+  // if (stylusOptions.resolveURL !== false) {
+  //   styl.define('url', urlResolver(stylusOptions.resolveURL))
+  // }
+
+  if (typeof stylusOptions.define !== 'undefined') {
+    const definitions = Array.isArray(stylusOptions.define)
+      ? stylusOptions.define
+      : Object.entries(stylusOptions.define)
+
+    for (const defined of definitions) {
+      styl.define.apply(null, defined)
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    styl.render((err, css) => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve({
+          css,
+          map: styl.sourcemap
+        })
+      }
+    })
+  })
+}
+
+export default function transform (src: string, filename: string, config: StylusConfig) {
+  const additionalData = getAdditionalData(src, config.additionalData)
+  const data = insertBefore(src, additionalData)
+
+  return renderToCSS(
+    data,
+    filename,
+    config.options
+  ).then((result: RenderResult) => {
+    return { ...result, additionalData } as RenderAdditionalResult
+  })
+}