From fa29e2f059c76dd69adec6019fd1f4bd4427f8ac Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 5 Jan 2022 14:44:55 +0800 Subject: [PATCH 1/2] apply linear-gradient patch --- deps/weex-styler/lib/validator.js | 99 ++++++++++++++++++++----------- 1 file changed, 64 insertions(+), 35 deletions(-) diff --git a/deps/weex-styler/lib/validator.js b/deps/weex-styler/lib/validator.js index 707a968..d6286a1 100644 --- a/deps/weex-styler/lib/validator.js +++ b/deps/weex-styler/lib/validator.js @@ -1,6 +1,7 @@ var util = require('./util') var OHOS_THEME_PROP_GROUPS = require('../../theme/ohosStyles'); +var bind = require('../../templater/bind'); // http://www.w3.org/TR/css3-color/#html4 var BASIC_COLOR_KEYWORDS = { @@ -1338,7 +1339,9 @@ var BACKGROUND_VALIDATOR = function BACKGROUND_VALIDATOR(v) { if (util.isValidValue(validateResult.value)) { let jsonValue = JSON.parse(validateResult.value) resultValues.values.push(jsonValue) - } + } else if (typeof validateResult.value === 'function') { + resultValues.values.push(validateResult.value); + } let check = checkReason(validateResult, temp, realValue, length) length = check.length if (check.realReason !== null) { @@ -1350,7 +1353,7 @@ var BACKGROUND_VALIDATOR = function BACKGROUND_VALIDATOR(v) { } }) return { - value: length < 2 ? JSON.stringify(resultValues) : null, + value: length < 2 ? bind(JSON.stringify(resultValues)) : null, reason: reasonMaps.length > 0 ? function (k, v) { return logTypes[length] + ': Value `' + v + '` of the `' + util.camelCaseToHyphened(k) + @@ -1437,13 +1440,34 @@ var LINEAR_GRADIENT_VALIDATOR = function LINEAR_GRADIENT_VALIDATOR(v) { } var ARRAY_COLOR_STOP_VALIDATOR = function ARRAY_COLOR_STOP_VALIDATOR(v) { - v = (v || '').toString().trim() - let values = v.match(ARRAY_COLOR_STOP_REGEXP) - if (values && values.length > 1) { + let bindValues = []; + let setValue = 0; + v.forEach(itemV => { + itemV = itemV.toString().trim(); + const bindItemV = bind(itemV); + if (typeof bindItemV === 'function') { + bindValues.push(itemV); + } else { + if (setValue == 0) { + if (itemV.indexOf('rgb') == 0 || itemV.indexOf('RGB') == 0) { + setValue = 1; + bindValues.push(itemV); + } else { + bindValues.push(itemV); + } + } else { + bindValues[bindValues.length - 1] = bindValues[bindValues.length - 1] ',' itemV; + if (itemV.indexOf(')') >= 0) { + setValue = 0; + } + } + } + }); + if (bindValues && bindValues.length > 1) { let resultValues = [] let reasonMaps = [] let length = 0 - processValueItem(v, values, resultValues, reasonMaps, length) + processValueItem(v, bindValues, resultValues, reasonMaps, length) return { value: length < 2 ? JSON.stringify(resultValues) : null, reason: reasonMaps.length > 0 ? @@ -1462,37 +1486,42 @@ var ARRAY_COLOR_STOP_VALIDATOR = function ARRAY_COLOR_STOP_VALIDATOR(v) { } } -function processValueItem(v, values, resultValues, reasonMaps, length) { - values.forEach(function (value, n) { - let widthMatch = value.match(/[\s]+[-+0-9]+(px|%|vp|fp)?$/) - let tempValues = [] - if (widthMatch) { - let matchResult = PERCENTAGE_LENGTH_VALIDATOR(widthMatch[0]) - let index = value.indexOf(widthMatch[0]) - value = value.substring(0, index) - if (util.isValidValue(matchResult.value)) { - tempValues.push(matchResult.value) - } - let check = checkReason(matchResult, n.toString(), widthMatch[0], length) - length = check.length - if (check.realReason !== null) { - reasonMaps.push(check.realReason) - } - } - if (value) { - let colorResult = COLOR_VALIDATOR(value) - if (util.isValidValue(colorResult.value)) { - tempValues.unshift(colorResult.value) +function processValueItem(v, bindValues, resultValues, reasonMaps, length) { + bindValues.forEach(function (value, n) { + const bindValue = bind(value); + if (typeof bindValue === 'function') { + resultValues.push(value); + } else { + let widthMatch = value.match(/[\s] [- 0-9] (px|%|vp|fp)?$/) + let tempValues = [] + if (widthMatch) { + let matchResult = PERCENTAGE_LENGTH_VALIDATOR(widthMatch[0]) + let index = value.indexOf(widthMatch[0]) + value = value.substring(0, index) + if (util.isValidValue(matchResult.value)) { + tempValues.push(matchResult.value) + } + let check = checkReason(matchResult, n.toString(), widthMatch[0], length) + length = check.length + if (check.realReason !== null) { + reasonMaps.push(check.realReason) + } } - resultValues.push(tempValues.join(' ')) - let check = checkReason(colorResult, n.toString(), value, length) - length = check.length - if (check.realReason !== null) { - reasonMaps.push(check.realReason) + if (value) { + let colorResult = COLOR_VALIDATOR(value) + if (util.isValidValue(colorResult.value)) { + tempValues.unshift(colorResult.value) + } + resultValues.push(tempValues.join(' ')) + let check = checkReason(colorResult, n.toString(), value, length) + length = check.length + if (check.realReason !== null) { + reasonMaps.push(check.realReason) + } + } else { + length = 2 + reasonMaps.push("parameter '" + v + "' is incorrect format.") } - } else { - length = 2 - reasonMaps.push("parameter '" + v + "' is incorrect format.") } }) } -- Gitee From 319f198b46cfb83e4dafe2edd32e181445317dee Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 5 Jan 2022 15:32:59 +0800 Subject: [PATCH 2/2] apply import css watch patch --- src/loader.js | 113 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 108 insertions(+), 5 deletions(-) diff --git a/src/loader.js b/src/loader.js index 9908af1..56147a9 100644 --- a/src/loader.js +++ b/src/loader.js @@ -20,6 +20,7 @@ import loaderUtils from 'loader-utils' import path from 'path' import fs from 'fs' +import css from 'css' import * as legacy from './legacy' import { @@ -47,8 +48,12 @@ const defaultLoaders = { json: path.resolve(loaderPath, 'json.js'), babel: loadBabelModule('babel-loader'), manifest: path.resolve(loaderPath, 'manifest-loader.js'), - resourceReferenceScript: path.resolve(loaderPath, 'resource-reference-script.js') + resourceReferenceScript: path.resolve(loaderPath, 'resource-reference-script.js'), + resourceReferenceStyle: path.resolve(loaderPath, 'resource-reference-style.js') } +const cssImportPaths = new Set(); +const IMPORT_MATCHER = + /(['"]([^()]+?)['"])|(['"]([^()]+?)['"]\s+(only|not)?\s?(screen)?\s?((and|or|,|not|landscape)?\s?[(]([^()])+[)]\s*)+)/g function getLoaderString (type, config) { config = config || {} @@ -67,6 +72,8 @@ function getLoaderString (type, config) { return scriptLoaderString(loaders, config, customLoader) case 'config': return configLoaderString(loaders, config) + case 'referenceStyle': + return referenceStyleLoaderString(loaders, config) case 'data': return dataLoaderString(loaders, config) } @@ -165,6 +172,18 @@ function dataLoaderString (loaders, config) { return stringifyLoaders(loaders) } +function referenceStyleLoaderString (loaders, config, customLoader) { + loaders = [{ + name: defaultLoaders.json + }, { + name: defaultLoaders.resourceReferenceStyle + }] + if (customLoader) { + loaders = loaders.concat(customLoader) + } + return stringifyLoaders(loaders) +} + function loader (source) { this.cacheable && this.cacheable() @@ -342,20 +361,21 @@ function loadPageFindCss (_this, filename, customLang) { const cssFileName = filename + '.css' if (fs.existsSync(cssFileName)) { extcss = true - output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { + output += 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { customLang, lang: undefined, element: undefined, elementName: undefined, source: cssFileName }), cssFileName) + output += loadImportCss(_this, cssFileName, customLang) } else { // find less const lessFileName = filename + '.less' if (fs.existsSync(lessFileName)) { extcss = true - output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { + output += 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { customLang, lang: 'less', element: undefined, @@ -368,7 +388,7 @@ function loadPageFindCss (_this, filename, customLang) { const scssFileName = filename + '.scss' if (fs.existsSync(scssFileName)) { extcss = true - output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { + output += 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { customLang, lang: 'scss', element: undefined, @@ -381,7 +401,7 @@ function loadPageFindCss (_this, filename, customLang) { const sassFileName = filename + '.sass' if (fs.existsSync(sassFileName)) { extcss = true - output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { + output += 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', { customLang, lang: 'sass', element: undefined, @@ -473,4 +493,87 @@ function checkEntry(_this, filePath, elementSrc) { } } + +function loadImportCss(_this, cssFileName, customLang) { + let output = ''; + parse(_this, fs.readFileSync(cssFileName, 'utf-8'), cssFileName); + let index = 0; + for (const cssImportPath of cssImportPaths) { + output += `var $app_style${index}$ = ` + getRequireString(_this, getLoaderString('referenceStyle', { + customLang, + lang: undefined, + element: undefined, + elementName: undefined, + source: cssImportPath + }), cssImportPath); + index++; + } + return output; +} + +function parse(_this, code, resourcePath) { + const ast = css.parse(code, { silent: true }) + if (ast.stylesheet.parsingErrors && ast.stylesheet.parsingErrors.length) { + ast.stylesheet.parsingErrors.forEach(function (error) { + logWarn(_this, [{ + line: error.line, + column: error.column, + reason: error.toString().replace('Error', 'ERROR') + }]) + }) + } + if (ast && ast.type === 'stylesheet' && ast.stylesheet && + ast.stylesheet.rules && ast.stylesheet.rules.length) { + ast.stylesheet.rules.forEach(function (rule) { + const type = rule.type + if (type === 'import') { + parseImport(_this, resourcePath, rule) + } + else if (type === 'media') { + if (rule.rules && rule.rules.length) { + rule.rules.forEach(function(rule) { + if (rule.type === 'import') { + parseImport(_this, resourcePath, rule) + } + }) + } + } + }) + } +} + +function parseImport(_this, resourcePath, rule) { + if(!resourcePath) { + return + } + let importString = rule.import + let importPath + let mediaString = '' + let source = '' + if (importString.match(IMPORT_MATCHER)) { + let filePath = importString.match(/['"]([^()]+?)['"]/) + importPath = filePath[1] + mediaString = importString.replace(importPath, '').replace(/['"]/g, '') + } + if(/^(\.)|(\.\.)\//.test(importPath)) { + resourcePath = resourcePath.substring(0, resourcePath.lastIndexOf(path.sep) + 1); + importPath = path.resolve(resourcePath, importPath) + } + if (fs.existsSync(importPath)) { + source = fs.readFileSync(importPath).toString() + cssImportPaths.add(importPath) + } else { + logWarn(_this, [{ + line: rule.position.start.line, + column: rule.position.start.column, + reason: 'ERROR: no such file or directory, open ' + importPath + }]) + return + } + if (mediaString.length !== 0) { + source = '@media ' + mediaString + '{\n' + source + '\n}' + } + parse(_this, source, importPath) +} + module.exports = loader \ No newline at end of file -- Gitee