@tarojs/rn-style-transformer 4.0.0-beta.78 → 4.0.0-beta.79

package/src/types/index.ts

@@ -0,0 +1,242 @@
+import { ProcessOptions } from 'postcss'
+import { Options } from 'sass'
+
+// sass
+// https://github.com/sass/node-sass#options
+export interface SassConfig {
+  sass?: SassGlobalConfig
+  alias?: Record<string, string>
+  options: Options
+  additionalData?: string | ((key: string) => string)
+}
+
+export interface SassGlobalConfig {
+  resource?: string | string[]
+  projectDirectory?: string
+  data?: string
+}
+
+// postcss
+export interface PostcssConfig {
+  options: ProcessOptions // https://github.com/postcss/postcss#options
+  scalable: boolean // 控制是否对 css value 进行 scalePx2dp 转换
+  pxtransform?: {
+    enable: boolean
+    config: any
+  }
+}
+
+// less
+interface SourceMapOption {
+  sourceMapURL?: string
+  sourceMapBasepath?: string
+  sourceMapRootpath?: string
+  outputSourceFiles?: boolean
+  sourceMapFileInline?: boolean
+}
+// http://lesscss.org/usage/#less-options
+export interface LessOptions {
+  sourceMap?: SourceMapOption
+  /** Filename of the main file to be passed to less.render() */
+  filename?: string
+  /** The locations for less looking for files in @import rules */
+  paths?: string[]
+  /** True, if run the less parser and just reports errors without any output. */
+  lint?: boolean
+  /** Pre-load global Less.js plugins */
+  plugins?: Plugin[]
+  /** @deprecated If true, compress using less built-in compression. */
+  compress?: boolean
+  strictImports?: boolean
+  /** If true, allow imports from insecure https hosts. */
+  insecure?: boolean
+  depends?: boolean
+  maxLineLen?: number
+  /** @deprecated If false, No color in compiling. */
+  color?: boolean
+  /** @deprecated False by default. */
+  ieCompat?: boolean
+  /** @deprecated If true, enable evaluation of JavaScript inline in `.less` files. */
+  javascriptEnabled?: boolean
+  /** Whether output file information and line numbers in compiled CSS code. */
+  dumpLineNumbers?: 'comment' | string
+  /** Add a path to every generated import and url in output css files. */
+  rootpath?: string
+  /** Math mode options for avoiding symbol conficts on math expressions. */
+  math?: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy' | number
+  /** If true, stops any warnings from being shown. */
+  silent?: boolean
+  /** Without this option, Less attempts to guess at the output unit when it does maths. */
+  strictUnits?: boolean
+  /** Defines a variable that can be referenced by the file. */
+  globalVars?: {
+    [key: string]: string
+  }
+  /** Puts Var declaration at the end of base file. */
+  modifyVars?: {
+    [key: string]: string
+  }
+  /** Read files synchronously in Node.js */
+  syncImport?: boolean
+}
+
+export interface LessConfig {
+  alias?: Record<string, string>
+  options: LessOptions
+  additionalData?: string | ((key: string) => string)
+}
+
+// stylus
+class Evaluator { }
+
+interface Dictionary<T> {
+  [key: string]: T
+}
+
+// https://stylus-lang.com/docs/js.html
+export interface StylusRenderOptions {
+  globals?: Dictionary<any>
+  functions?: Dictionary<any>
+  imports?: string[]
+  paths?: string[]
+  filename?: string
+  Evaluator?: typeof Evaluator
+  /**
+   * Specify Stylus plugins to use. Plugins may be passed as
+   * strings instead of importing them in your Webpack config.
+   *
+   * @type {(string|Function)[]}
+   * @default []
+   */
+  use: (string | ((string) => string))[]
+  /**
+   * Add path(s) to the import lookup paths.
+   *
+   * @type {string[]}
+   * @default []
+   */
+  include: string[]
+  /**
+   * Import the specified Stylus files/paths.
+   *
+   * @type {string[]}
+   * @default []
+   */
+  import: string[]
+
+  /**
+   * Define Stylus variables or functions.
+   *
+   * @type {Array|Object}
+   * @default {}
+   */
+  // Array is the recommended syntax: [key, value, raw]
+  define: Array<any> | Record<string, any>
+  // Object is deprecated syntax (there is no possibility to specify "raw')
+  // define: {
+  //   $development: process.env.NODE_ENV === 'development',
+  //   rawVar: 42,
+  // },
+
+  /**
+   * Include regular CSS on @import.
+   *
+   * @type {boolean}
+   * @default false
+   */
+  includeCSS: boolean
+
+  /**
+   * Resolve relative url()'s inside imported files.
+   *
+   * @see https://stylus-lang.com/docs/js.html#stylusresolveroptions
+   *
+   * @type {boolean|Object}
+   * @default { nocheck: true }
+   */
+  // resolveURL: boolean | Record<string, any>,
+  // resolveURL: { nocheck: true },
+
+  /**
+   * Emits comments in the generated CSS indicating the corresponding Stylus line.
+   *
+   * @see https://stylus-lang.com/docs/executable.html
+   *
+   * @type {boolean}
+   * @default false
+   */
+  lineNumbers: boolean
+  /**
+   * @type {boolean}
+   * @default false
+   */
+  disableCache: boolean
+
+  /**
+   * Move @import and @charset to the top.
+   *
+   * @see https://stylus-lang.com/docs/executable.html
+   *
+   * @type {boolean}
+   * @default false
+   */
+  hoistAtrules: boolean
+}
+
+export interface StylusConfig {
+  alias?: Record<string, string>
+  options: StylusRenderOptions
+  additionalData?: string | ((key: string) => string)
+}
+
+// config
+interface RNConfig {
+  postcss?: PostcssConfig
+  sass?: SassConfig
+  less?: LessConfig
+  stylus?: StylusConfig
+}
+
+export interface Config {
+  designWidth?: number | ((size?: string | number) => number)
+  deviceRatio?: Record<string, number>
+  sass?: SassGlobalConfig
+  alias?: Record<string, string>
+  rn: RNConfig
+}
+
+export interface TransformOptions {
+  dev?: boolean
+  hot?: boolean
+  minify?: boolean
+  platform: 'android' | 'ios'
+  projectRoot?: string
+  publicPath?: string
+  customTransformOptions?: any
+  config: Config
+}
+
+// resolve
+export const enum ResolveLogLevelEnum {
+  ERROR = 'error',
+  WARNING = 'warning',
+}
+
+export interface ResolveStyleOptions {
+  basedir: string
+  platform: 'android' | 'ios'
+  paths?: string[]
+  logLevel?: ResolveLogLevelEnum
+  defaultExt?: string
+  alias?: Record<string, string>
+}
+
+// postcss result
+export interface RenderResult {
+  css: string | Buffer
+  map?: string | Buffer
+}
+
+export interface RenderAdditionalResult extends RenderResult {
+  additionalData: string
+}

package/src/utils/index.ts

@@ -0,0 +1,229 @@
+import { printLog, processTypeEnum } from '@tarojs/helper'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as resolve from 'resolve'
+import nodeModulesPaths from 'resolve/lib/node-modules-paths'
+
+import { ResolveLogLevelEnum, ResolveStyleOptions } from '../types'
+
+export function insertBefore (source?: string, additional?: string) {
+  if (!source && !additional) {
+    return ''
+  }
+  if (!source) {
+    return additional
+  }
+  if (!additional) {
+    return source
+  }
+  return additional + ';\n' + source
+}
+
+/**
+ * sort scss source by \@use
+ * @param source scss source
+ * @returns  sorted scss source
+ */
+export function sortStyle (source) {
+  if (!source) {
+    return ''
+  }
+
+  if (source.indexOf('@use') === -1 && source.indexOf('@import') === -1) {
+    return source
+  }
+
+  // @use highest priority
+  const useReg = /@use\s+['"](.*)['"];/g
+  const useList: string[] = []
+  let match: RegExpExecArray | null = null
+  while ((match = useReg.exec(source))) {
+    useList.push(match[0])
+    source = source.replace(match[0], '')
+  }
+
+  // css last
+  const css = source.trim()
+  return [...useList, css].join('\n')
+}
+
+export function insertAfter (source?: string, additional?: string) {
+  if (!source && !additional) {
+    return ''
+  }
+  if (!source) {
+    return additional
+  }
+  if (!additional) {
+    return source
+  }
+  return source + ';\n' + additional
+}
+
+// Iterate through the include paths and extensions to find the file variant
+export function findVariant (name, extensions, includePaths) {
+  for (let i = 0; i < includePaths.length; i++) {
+    const includePath = includePaths[i]
+
+    // try to find the file iterating through the extensions, in order.
+    const foundExtention = extensions.find(extension => {
+      const fname = path.join(includePath, name + extension)
+      return fs.existsSync(fname)
+    })
+
+    if (foundExtention) {
+      return path.join(includePath, name + foundExtention)
+    }
+  }
+
+  return ''
+}
+
+/**
+ * 返回存在的文件path
+ * @param id import id
+ * @param opts { basedir, platform, paths }
+ */
+export function resolveStyle (id: string, opts: ResolveStyleOptions) {
+  const {
+    basedir,
+    platform,
+    paths = [],
+    alias = {},
+    defaultExt = '',
+    logLevel = ResolveLogLevelEnum.ERROR
+  } = opts
+  id = id.trim()
+  Object.keys(alias).forEach(key => {
+    if (id.startsWith(key)) {
+      id = id.replace(key, alias[key])
+    }
+  })
+
+  const { dir, name, ext: idExt } = path.parse(id)
+  const incPaths = [path.resolve(basedir, dir)].concat(paths)
+  const ext = idExt || defaultExt
+
+  const extensions = [
+    // add the platform specific extension, first in the array to take precedence
+    platform === 'android' ? '.android' + ext : '.ios' + ext,
+    '.rn' + ext,
+    ext
+  ]
+
+  let file = ''
+  let isNodeModulesPath = false
+  try {
+    if ((/^(?:\.\.?(?:\/|$)|\/|([A-Za-z]:)?[/\\])/).test(id)) {
+      file = findVariant(name, extensions, incPaths)
+    } else {
+      // lookup node_modules file
+      isNodeModulesPath = true
+      // like `@import 'taro-ui/dist/base.css';` or `@import '~taro-ui/dist/base.css';`
+      file = resolve.sync(path.join(dir, name).replace(/^~/, ''), { basedir, extensions })
+    }
+  } catch (error) { } // eslint-disable-line no-empty
+
+  if (!file) {
+    let includePaths = incPaths
+    if (isNodeModulesPath) {
+      includePaths = nodeModulesPaths(basedir, { extensions }, id)
+    }
+    const levelMessage = `
+    样式文件没有找到，请检查文件路径: ${id}
+      在 [
+        ${includePaths.join(',\n       ')}
+      ]
+    `
+    if (logLevel === ResolveLogLevelEnum.ERROR) {
+      throw new Error(levelMessage)
+    }
+    if (logLevel === ResolveLogLevelEnum.WARNING) {
+      printLog(processTypeEnum.WARNING, levelMessage)
+      return id
+    }
+  }
+
+  return file
+}
+
+// copy from https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js
+const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i
+const ABSOLUTE_SCHEME = /^[a-z0-9+\-.]+:/i
+
+export function normalizePath (file) {
+  return path.sep === '\\' ? file.replace(/\\/g, '/') : file
+}
+
+function getURLType (source) {
+  if (source[0] === '/') {
+    if (source[1] === '/') {
+      return 'scheme-relative'
+    }
+
+    return 'path-absolute'
+  }
+
+  if (IS_NATIVE_WIN32_PATH.test(source)) {
+    return 'path-absolute'
+  }
+
+  return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative'
+}
+
+export function normalizeSourceMap (map, resourcePath) {
+  let newMap = map
+
+  // Some loader emit source map as string
+  // Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON.
+  if (typeof newMap === 'string') {
+    newMap = JSON.parse(newMap)
+  }
+
+  delete newMap.file
+
+  const { sourceRoot } = newMap
+
+  delete newMap.sourceRoot
+
+  if (newMap.sources) {
+    // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91)
+    // We should normalize path because previous loaders like `sass-loader` using backslash when generate source map
+    newMap.sources = newMap.sources.map((source) => {
+      // Non-standard syntax from `postcss`
+      if (source.indexOf('<') === 0) {
+        return source
+      }
+
+      const sourceType = getURLType(source)
+
+      // Do no touch `scheme-relative` and `absolute` URLs
+      if (sourceType === 'path-relative' || sourceType === 'path-absolute') {
+        const absoluteSource =
+          sourceType === 'path-relative' && sourceRoot
+            ? path.resolve(sourceRoot, normalizePath(source))
+            : normalizePath(source)
+
+        return path.relative(path.dirname(resourcePath), absoluteSource)
+      }
+
+      return source
+    })
+  }
+
+  return newMap
+}
+// copy end
+
+export function getAdditionalData (data: string, config?: string | ((key: string) => string)) {
+  let additionalData = ''
+  if (typeof config !== 'undefined') {
+    additionalData =
+      typeof config === 'function'
+        ? `${config(data)}`
+        : config
+  }
+  return additionalData
+}
+
+export default {}

package/src/utils/lessImport.ts

@@ -0,0 +1,50 @@
+import Less from 'less'
+
+import { resolveStyle } from './index'
+
+class LessImporter extends Less.FileManager {
+  platform: 'android' | 'ios'
+  alias: Record<string, string> = {}
+
+  constructor (opt) {
+    super()
+    this.platform = opt.platform
+    this.alias = opt.alias
+  }
+
+  supports () {
+    return true
+  }
+
+  supportsSync () {
+    return false
+  }
+
+  async loadFile (
+    filename: string,
+    currentDirectory: string,
+    options: any,
+    environment: any
+  ) {
+    const resolveOpts = {
+      basedir: currentDirectory,
+      alias: this.alias,
+      platform: this.platform,
+      defaultExt: '.less'
+    }
+    const rewriteFilename = resolveStyle(filename, resolveOpts)
+
+    return super.loadFile(rewriteFilename, currentDirectory, options, environment)
+  }
+}
+
+function makeLessImport (options) {
+  return {
+    install: (_, pluginManager) => {
+      pluginManager.addFileManager(new LessImporter(options))
+    },
+    minVersion: [2, 7, 1]
+  }
+}
+
+export default makeLessImport

package/src/utils/reporterSkip.ts

@@ -0,0 +1,27 @@
+interface Location {
+  line: number
+  column: number
+  file: string
+}
+
+export default function reporterSkip ({ skipRows, filename }) {
+  return {
+    postcssPlugin: 'postcss-reporter-skip',
+    // @ts-ignore
+    Once (css, result) {
+      result.messages?.forEach((message: any) => {
+        const { line, column, node } = message
+
+        const messageInput = node?.source?.input
+        if (messageInput) {
+          const originLocation: Location = messageInput.origin(line, column)
+          // 如果是原始引入的样式文件，则对拼接的代码（addionalData）函数做减法
+          if (originLocation && originLocation.file.includes(filename)) {
+            // force modify line，then source map cannot read origin column, value is 0.
+            message.line -= skipRows
+          }
+        }
+      })
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.root.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "commonjs",
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "rootDir": "./src"
+  },
+  "include": ["./src"]
+}

package/dist/index.d.ts

@@ -1,8 +0,0 @@
-import { TransformOptions } from './types';
-export declare function transform(src: string, filename: string, options: TransformOptions): Promise<any>;
-export declare function rollupTransform(options: TransformOptions): {
-    name: string;
-    transform(src: string, filename: string): Promise<{
-        code: string;
-    } | undefined>;
-};

package/dist/transforms/StyleSheet/ColorPropType.d.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-declare const ColorPropType: any;
-export default ColorPropType;

package/dist/transforms/StyleSheet/ImageResizeMode.d.ts

@@ -1,6 +0,0 @@
-/**
- * ImageResizeMode - Enum for different image resizing modes, set via
- * `resizeMode` style property on `<Image>` components.
- */
-declare const ImageResizeMode: any;
-export default ImageResizeMode;