@tarojs/rn-style-transformer 3.3.6 → 3.3.10

package/src/transforms/postcss.ts

@@ -3,6 +3,7 @@ import pxtransform from 'postcss-pxtransform'
 import postcssImport from 'postcss-import'
 import { recursiveMerge } from '@tarojs/helper'
 import { resolveStyle } from '../utils'
+import reporterSkip from '../utils/reporterSkip'
 import stylelintConfig from '../config/rn-stylelint.json'
 
 export interface Config {
@@ -11,7 +12,7 @@ export interface Config {
   pxtransform: {
     enable: boolean;
     config: any;
-  },
+  };
 }
 
 const defaultPxtransformOption: {
@@ -23,11 +24,13 @@ const defaultPxtransformOption: {
   }
 }
 
-export function getPostcssPlugins ({
+export function makePostcssPlugins ({
+  filename,
   designWidth,
   deviceRatio,
   postcssConfig,
-  transformOptions
+  transformOptions,
+  additionalData
 }) {
   if (designWidth) {
     defaultPxtransformOption.config.designWidth = designWidth
@@ -59,8 +62,11 @@ export function getPostcssPlugins ({
     plugins.push(pxtransform(pxtransformOption.config))
   }
 
+  const skipRows = additionalData ? additionalData.split('\n').length : 0
+
   plugins.push(
     require('stylelint')(stylelintConfig),
+    reporterSkip({ skipRows, filename }),
     require('postcss-reporter')({ clearReportedMessages: true })
   )
 
@@ -71,7 +77,6 @@ export default function transform (src: string, filename: string, { options, plu
   return postcss(plugins)
     .process(src, { from: filename, ...options })
     .then(result => {
-      const css = result.css
-      return css
+      return result
     })
 }

package/src/transforms/sass.ts

@@ -1,17 +1,18 @@
 import fs from 'fs'
 import path from 'path'
 import sass, { Options } from 'sass'
-import { insertBefore, resolveStyle } from '../utils'
-import { TransformOptions } from '../types'
+import { insertAfter, insertBefore, resolveStyle, getAdditionalData } from '../utils'
+import { TransformOptions, RenderResult, RenderAdditionalResult } from '../types'
 
 // https://github.com/sass/node-sass#options
 export interface Config {
+  sass?: SassGlobalConfig
   alias?: Record<string, string>
   options?: Options
-  additionalData?: string | ((string) => string)
+  additionalData?: string | ((key: string) => string)
 }
 
-export interface SassExternalConfig {
+export interface SassGlobalConfig {
   resource?: string | string[];
   projectDirectory?: string;
   data?: string;
@@ -28,16 +29,10 @@ function makeURL (resource: string, rootDir: string) {
 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}'`
+  return `@import './${relativePath}'`
 }
 
-/**
- * 处理 additional 配置，比如 config.sass 配置
- * @param src
- * @param filename
- * @returns
- */
-export function processByExternal (src, filename, config: SassExternalConfig) {
+function getGlobalResource (filename: string, config: SassGlobalConfig) {
   let resource = ''
   const projectDirectory = config.projectDirectory || process.cwd()
   const filePath = path.dirname(path.resolve(projectDirectory, filename))
@@ -48,8 +43,18 @@ export function processByExternal (src, filename, config: SassExternalConfig) {
     const resources = config.resource?.map(source => makeImportStatement(filePath, source, projectDirectory)) || []
     resource = resources.join(';\n')
   }
-  const combineSource = insertBefore(config?.data, resource)
-  return insertBefore(src, combineSource)
+  // https://taro-docs.jd.com/taro/docs/config-detail/#sassdata, data 覆盖 resurce 配置
+  return insertAfter(resource, config?.data)
+}
+
+function combineResource (src: string, filename: string, config: Config) {
+  // 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) {
@@ -98,8 +103,7 @@ function renderToCSS (src, filename, options, transformOptions) {
       if (err) {
         reject(err)
       } else {
-        const css = result.css.toString()
-        resolve(css)
+        resolve(result)
       }
     })
   })
@@ -111,21 +115,25 @@ export default function transform (
   config: Config,
   transformOptions: TransformOptions
 ) {
-  let data = src
+  const additionalData = combineResource(src, filename, config)
+  let data = insertBefore(src, additionalData)
 
   if (!data) {
     data = `\n${data}` // fix empty file error. reference https://github.com/sass/node-sass/blob/91c40a0bf0a3923ab9f91b82dcd479c25486235a/lib/index.js#L430
   }
 
-  if (typeof config.additionalData !== 'undefined') {
-    data =
-      typeof config.additionalData === 'function'
-        ? `${config.additionalData(data)}`
-        : `${config.additionalData}\n${data}`
-  }
-
-  return renderToCSS(data, filename, { ...config.options, alias: config.alias }, transformOptions)
-    .then((css: string) => {
-      return css
-    })
+  return renderToCSS(
+    data,
+    filename,
+    {
+      file: filename,
+      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,4 +1,6 @@
 import stylus from 'stylus'
+import { RenderResult, RenderAdditionalResult } from '../types'
+import { getAdditionalData, insertBefore } from '../utils'
 
 class Evaluator { }
 
@@ -99,7 +101,7 @@ interface RenderOptions {
 export interface Config {
   alias?: Record<string, string>
   options: RenderOptions
-  additionalData?: string | ((string) => string)
+  additionalData?: string | ((key: string) => string)
 }
 
 export const defaultOptions = {
@@ -118,6 +120,15 @@ function renderToCSS (src, filename, options = {} as RenderOptions) {
   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)
@@ -191,23 +202,24 @@ function renderToCSS (src, filename, options = {} as RenderOptions) {
       if (err) {
         reject(err)
       } else {
-        resolve(css)
+        resolve({
+          css,
+          map: styl.sourcemap
+        })
       }
     })
   })
 }
 
 export default function transform (src: string, filename: string, config: Config) {
-  let data = src
-
-  if (typeof config.additionalData !== 'undefined') {
-    data =
-      typeof config.additionalData === 'function'
-        ? `${config.additionalData(data)}`
-        : `${config.additionalData}\n${data}`
-  }
-  return renderToCSS(data, filename, config.options)
-    .then((css: string) => {
-      return css
-    })
+  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
+  })
 }

package/src/types/index.ts

@@ -8,7 +8,7 @@ export interface TransformOptions {
   customTransformOptions: any
 }
 
-export enum LogLevelEnum {
+export const enum LogLevelEnum {
   ERROR = 'error',
   WARNING = 'warning',
 }
@@ -21,3 +21,12 @@ export interface ResolveStyleOptions {
   defaultExt?: string
   alias?: Record<string, string>
 }
+
+export interface RenderResult {
+  css: string | Buffer
+  map?: string | Buffer
+}
+
+export interface RenderAdditionalResult extends RenderResult {
+  additionalData: string
+}

package/src/utils/index.ts

@@ -2,31 +2,33 @@ import fs from 'fs'
 import path from 'path'
 import { printLog, processTypeEnum } from '@tarojs/helper'
 import { ResolveStyleOptions, LogLevelEnum } from '../types'
+import resolve from 'resolve'
+import nodeModulesPaths from 'resolve/lib/node-modules-paths'
 
-export function insertBefore (source: string, target: string) {
-  if (!source && !target) {
+export function insertBefore (source: string, additional: string) {
+  if (!source && !additional) {
     return ''
   }
   if (!source) {
-    return target
+    return additional
   }
-  if (!target) {
+  if (!additional) {
     return source
   }
-  return target + ';\n' + source
+  return additional + ';\n' + source
 }
 
-export function insertAfter (source: string, target: string) {
-  if (!source && !target) {
+export function insertAfter (source: string, additional: string) {
+  if (!source && !additional) {
     return ''
   }
   if (!source) {
-    return target
+    return additional
   }
-  if (!target) {
+  if (!additional) {
     return source
   }
-  return source + ';\n' + target
+  return source + ';\n' + additional
 }
 
 // Iterate through the include paths and extensions to find the file variant
@@ -62,6 +64,7 @@ export function resolveStyle (id: string, opts: ResolveStyleOptions) {
     defaultExt = '',
     logLevel = LogLevelEnum.ERROR
   } = opts
+  id = id.trim()
   Object.keys(alias).forEach(key => {
     if (id.startsWith(key)) {
       id = id.replace(key, alias[key])
@@ -72,19 +75,36 @@ export function resolveStyle (id: string, opts: ResolveStyleOptions) {
   const incPaths = [path.resolve(basedir, dir)].concat(paths)
   const ext = idExt || defaultExt
 
-  const exts = [
+  const extensions = [
     // add the platform specific extension, first in the array to take precedence
     platform === 'android' ? '.android' + ext : '.ios' + ext,
     '.rn' + ext,
     ext
   ]
 
-  const file = findVariant(name, exts, incPaths)
+  let file: string
+  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) {
+  }
+
   if (!file) {
+    let includePaths = incPaths
+    if (isNodeModulesPath) {
+      includePaths = nodeModulesPaths(basedir, { extensions }, id)
+    }
     const levelMessage = `
     样式文件没有找到，请检查文件路径: ${id}
       在 [
-        ${incPaths.join(',\n       ')}
+        ${includePaths.join(',\n       ')}
       ]
     `
     if (logLevel === LogLevelEnum.ERROR) {
@@ -99,4 +119,83 @@ export function resolveStyle (id: string, opts: ResolveStyleOptions) {
   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

@@ -1,47 +1,46 @@
-import path from 'path'
+import less from 'less'
 import { resolveStyle } from './index'
-import { LogLevelEnum } from '../types'
 
-class Importer {
+class Importer extends less.FileManager {
+  platform: 'android' | 'ios'
+  alias: Record<string, string> = {}
+
   constructor (opt) {
+    super()
     this.platform = opt.platform
     this.alias = opt.alias
   }
 
-  platform: 'android' | 'ios'
-
-  alias: Record<string, string> = {}
-
-  process (src: string, options: Less.PreProcessorExtraInfo) {
-    const { fileInfo } = options
-    const { filename, currentDirectory: basedir } = fileInfo
+  supports () {
+    return true
+  }
 
-    if (!basedir) {
-      return src
-    }
+  supportsSync () {
+    return false
+  }
 
+  async loadFile (
+    filename: string,
+    currentDirectory: string,
+    options: any,
+    environment: any
+  ) {
     const resolveOpts = {
-      basedir,
+      basedir: currentDirectory,
       alias: this.alias,
       platform: this.platform,
-      logLevel: LogLevelEnum.WARNING,
-      defaultExt: path.extname(filename)
+      defaultExt: '.less'
     }
+    const rewriteFilename = resolveStyle(filename, resolveOpts)
 
-    // 解析 @import "a.less" 字符串里面的内容
-    src = src.replace(/@import\s+['"]([^'|"]*)['"]/gi, (_, id) => {
-      const relativePath = path.relative(basedir, resolveStyle(id.trim(), resolveOpts)).replace(/\\/g, '/')
-      return `@import '${relativePath}';`
-    })
-
-    return src
+    return super.loadFile(rewriteFilename, currentDirectory, options, environment)
   }
 }
 
 function makeLessImport (options) {
   return {
     install: (_, pluginManager) => {
-      pluginManager.addPreProcessor(new Importer(options))
+      pluginManager.addFileManager(new Importer(options))
     },
     minVersion: [2, 7, 1]
   }

package/src/utils/reporterSkip.ts

@@ -0,0 +1,24 @@
+interface Location {
+  line: number
+  column: number
+  file: string
+}
+
+export default function reporterSkip ({ skipRows, filename }) {
+  // @ts-ignore
+  return (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
+        }
+      }
+    })
+  }
+}