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

package/src/transforms/index.ts

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

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

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

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

@@ -1,124 +0,0 @@
-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
-  })
-}