@tarojs/rn-style-transformer 3.3.7 → 3.3.8

package/src/transforms/less.ts

@@ -1,6 +1,8 @@
 import path from 'path'
 import less from 'less'
 import makeLessImport from '../utils/lessImport'
+import { insertBefore, getAdditionalData } from '../utils'
+import { RenderResult, RenderAdditionalResult } from '../types'
 
 interface SourceMapOption {
   sourceMapURL?: string;
@@ -58,7 +60,7 @@ export interface Options {
 export interface Config {
   alias?: Record<string, string>
   options: Options
-  additionalData?: string | ((string) => string)
+  additionalData?: string | ((key: string) => string)
 }
 
 function renderToCSS (src, filename, options = {} as any) {
@@ -73,26 +75,34 @@ function renderToCSS (src, filename, options = {} as any) {
         filename,
         plugins: plugins.concat(options.plugins || []),
         paths: paths.concat(options.paths || [])
-      }, (err, output) => {
+      }, (err, result) => {
         if (err) {
           return reject(err.message)
         }
-        resolve(output.css)
+        resolve(result)
       })
   })
 }
 
-export default function transform (src: string, filename: string, config: Config) {
-  let data = src
+export default function transform (
+  src: string,
+  filename: string,
+  config: Config
+) {
+  const additionalData = getAdditionalData(src, config.additionalData)
+  const data = insertBefore(src, additionalData)
 
-  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 })
-    .then((css: string) => {
-      return css
-    })
+  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

@@ -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;
@@ -31,13 +32,7 @@ function makeImportStatement (filePath: string, resource: string, rootDir: strin
   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

@@ -3,30 +3,30 @@ import path from 'path'
 import { printLog, processTypeEnum } from '@tarojs/helper'
 import { ResolveStyleOptions, LogLevelEnum } from '../types'
 
-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
@@ -99,4 +99,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/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
+        }
+      }
+    })
+  }
+}