feat(vue-css-loader): change dist file name to be parsed by vue-loader

Tencent · Oct 11, 2022 · b5d94e4 · b5d94e4
1 parent 751e2e0
commit b5d94e4
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 68 deletions.
diff --git a/docs/en-us/hippy-vue/style.md b/docs/en-us/hippy-vue/style.md
@@ -32,7 +32,7 @@ At present, the basic `Universal`, `Type`, `ID`, `Class`, `Grouping` selectors h
 
 How to use?
 
-1. Update `@hippy/vue` and  `@hippy/vue-loader` to `2.15.0+` version.
+1. Update `@hippy/vue` and  `@hippy/vue-css-loader` to `2.15.0+` version.
 2. Vue2.0 set `Vue.config.scoped = true;`（Vue2.0 `scoped` and `Attribute` disabled by default，Vue3.0 enabled by default）
 
 

diff --git a/docs/hippy-vue/style.md b/docs/hippy-vue/style.md
@@ -29,7 +29,7 @@ HippyVue 提供了 `beforeLoadStyle` 的 Vue options 勾子函数，供开发者
 
 如何开启？
 
-1. 升级 `@hippy/vue` 和 `@hippy/vue-loader` 到 `2.15.0+` 版本
+1. 升级 `@hippy/vue` 和 `@hippy/vue-css-loader` 到 `2.15.0+` 版本
 2. Vue2.0 设置全局开关 `Vue.config.scoped = true;`（Vue2.0 默认 `scoped` 和 `Attribute` 选择器能力关闭，Vue3.0 默认开启无需设置开关）
 
 

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.android.js b/examples/hippy-vue-demo/scripts/hippy-webpack.android.js
@@ -8,7 +8,7 @@ const manifest = require('../dist/android/vendor-manifest.json');
 
 const platform = 'android';
 let cssLoader = '@hippy/vue-css-loader';
-const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/index.js');
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
 if (fs.existsSync(hippyVueCssLoaderPath)) {
   console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
   cssLoader = hippyVueCssLoaderPath;

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js b/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js
@@ -6,7 +6,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const pkg = require('../package.json');
 
 let cssLoader = '@hippy/vue-css-loader';
-const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/index.js');
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
 if (fs.existsSync(hippyVueCssLoaderPath)) {
   console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
   cssLoader = hippyVueCssLoaderPath;

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js b/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js
@@ -8,7 +8,7 @@ const manifest = require('../dist/ios/vendor-manifest.json');
 
 const platform = 'ios';
 let cssLoader = '@hippy/vue-css-loader';
-const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/index.js');
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
 if (fs.existsSync(hippyVueCssLoaderPath)) {
   console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
   cssLoader = hippyVueCssLoaderPath;

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js b/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js
@@ -7,7 +7,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const pkg = require('../package.json');
 
 let cssLoader = '@hippy/vue-css-loader';
-const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/index.js');
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
 if (fs.existsSync(hippyVueCssLoaderPath)) {
   console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
   cssLoader = hippyVueCssLoaderPath;

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js b/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js
@@ -7,7 +7,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const pkg = require('../package.json');
 
 let cssLoader = '@hippy/vue-css-loader';
-const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/index.js');
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
 if (fs.existsSync(hippyVueCssLoaderPath)) {
   console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
   cssLoader = hippyVueCssLoaderPath;

diff --git a/packages/hippy-vue-css-loader/package.json b/packages/hippy-vue-css-loader/package.json
@@ -2,7 +2,7 @@
   "name": "@hippy/vue-css-loader",
   "version": "2.14.7",
   "description": "hippy-vue style loader module for webpack",
-  "main": "dist/index.js",
+  "main": "dist/css-loader.js",
   "homepage": "https://hippyjs.org",
   "repository": "https://github.com/Tencent/Hippy",
   "author": "OpenHippy Team",

diff --git a/packages/hippy-vue-css-loader/src/css-loader.js b/packages/hippy-vue-css-loader/src/css-loader.js
@@ -0,0 +1,75 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import crypto from 'crypto';
+import { getOptions } from 'loader-utils';
+import { GLOBAL_STYLE_NAME, GLOBAL_DISPOSE_STYLE_NAME } from '@vue/runtime/constants';
+import parseCSS from './css-parser';
+import translateColor from './color-parser';
+
+let sourceId = 0;
+
+/**
+ * Convert the CSS text to AST that able to parse by selector parser.
+ */
+function hippyVueCSSLoader(source) {
+  const options = getOptions(this);
+  const parsed = parseCSS(source, { source: sourceId });
+
+  const majorNodeVersion = parseInt(process.versions.node.split('.')[0], 10);
+  const hashType = majorNodeVersion >= 17 ? 'md5' : 'md4';
+  const hash = crypto.createHash(hashType);
+  const contentHash = hash.update(source).digest('hex');
+  sourceId += 1;
+  const rulesAst = parsed.stylesheet.rules.filter(n => n.type === 'rule').map(n => ({
+    hash: contentHash,
+    selectors: n.selectors,
+    declarations: n.declarations.map((dec) => {
+      let { value } = dec;
+      if (dec.property && dec.property.toLowerCase().indexOf('color') > -1) {
+        value = translateColor(value, options);
+      }
+      return {
+        type: dec.type,
+        property: dec.property,
+        value,
+      };
+    }),
+  }));
+  const code = `(function() {
+    if (!global['${GLOBAL_STYLE_NAME}']) {
+      global['${GLOBAL_STYLE_NAME}'] = [];
+    }
+    global['${GLOBAL_STYLE_NAME}'] = global['${GLOBAL_STYLE_NAME}'].concat(${JSON.stringify(rulesAst)});
+
+    if(module.hot) {
+      module.hot.dispose(() => {
+        console.log('disposeHandlers');
+        if(!global['${GLOBAL_DISPOSE_STYLE_NAME}']) {
+          global['${GLOBAL_DISPOSE_STYLE_NAME}'] = [];
+        }
+        global['${GLOBAL_DISPOSE_STYLE_NAME}'] = global['${GLOBAL_DISPOSE_STYLE_NAME}'].concat('${contentHash}');
+      })
+    }
+  })()`;
+  return `module.exports=${code}`;
+}
+
+export default hippyVueCSSLoader;
diff --git a/packages/hippy-vue-css-loader/src/index.js b/packages/hippy-vue-css-loader/src/index.js
@@ -2,7 +2,7 @@
  * Tencent is pleased to support the open source community by making
  * Hippy available.
  *
- * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company.
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
  * All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17,59 +17,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import crypto from 'crypto';
-import { getOptions } from 'loader-utils';
-import { GLOBAL_STYLE_NAME, GLOBAL_DISPOSE_STYLE_NAME } from '@vue/runtime/constants';
-import parseCSS from './css-parser';
-import translateColor from './color-parser';
-
-let sourceId = 0;
-
-/**
- * Convert the CSS text to AST that able to parse by selector parser.
- */
-function hippyVueCSSLoader(source) {
-  const options = getOptions(this);
-  const parsed = parseCSS(source, { source: sourceId });
-
-  const majorNodeVersion = parseInt(process.versions.node.split('.')[0], 10);
-  const hashType = majorNodeVersion >= 17 ? 'md5' : 'md4';
-  const hash = crypto.createHash(hashType);
-  const contentHash = hash.update(source).digest('hex');
-  sourceId += 1;
-  const rulesAst = parsed.stylesheet.rules.filter(n => n.type === 'rule').map(n => ({
-    hash: contentHash,
-    selectors: n.selectors,
-    declarations: n.declarations.map((dec) => {
-      let { value } = dec;
-      if (dec.property && dec.property.toLowerCase().indexOf('color') > -1) {
-        value = translateColor(value, options);
-      }
-      return {
-        type: dec.type,
-        property: dec.property,
-        value,
-      };
-    }),
-  }));
-  const code = `(function() {
-    if (!global['${GLOBAL_STYLE_NAME}']) {
-      global['${GLOBAL_STYLE_NAME}'] = [];
-    }
-    global['${GLOBAL_STYLE_NAME}'] = global['${GLOBAL_STYLE_NAME}'].concat(${JSON.stringify(rulesAst)});
-
-    if(module.hot) {
-      module.hot.dispose(() => {
-        console.log('disposeHandlers');
-        if(!global['${GLOBAL_DISPOSE_STYLE_NAME}']) {
-          global['${GLOBAL_DISPOSE_STYLE_NAME}'] = [];
-        }
-        global['${GLOBAL_DISPOSE_STYLE_NAME}'] = global['${GLOBAL_DISPOSE_STYLE_NAME}'].concat('${contentHash}');
-      })
-    }
-  })()`;
-  return `module.exports=${code}`;
-}
-
-export default hippyVueCSSLoader;
+import defaultExport from './css-loader';
+export default defaultExport;
diff --git a/packages/hippy-vue-loader/lib/loaders/pitcher.js b/packages/hippy-vue-loader/lib/loaders/pitcher.js
@@ -27,7 +27,7 @@ const stylePostLoaderPath = require.resolve('./stylePostLoader');
 
 const isESLintLoader = l => /(\/|\\|@)eslint-loader/.test(l.path);
 const isNullLoader = l => /(\/|\\|@)null-loader/.test(l.path);
-const isCSSLoader = l => /(\/|\\|@?)css-loader/.test(l.path);
+const isCSSLoader = l => /(\/|\\|@)css-loader/.test(l.path);
 const isCacheLoader = l => /(\/|\\|@)cache-loader/.test(l.path);
 const isPitcher = l => l.path !== __filename;
 const isPreLoader = l => !l.pitchExecuted;

diff --git a/scripts/vue-configs.js b/scripts/vue-configs.js
@@ -98,8 +98,12 @@ const builds = {
     banner: banner('@hippy/vue', hippyVuePackage.version),
   },
   '@hippy/vue-css-loader': {
-    entry: resolvePackage('hippy-vue-css-loader', 'src/index.js'),
-    dest: resolvePackage('hippy-vue-css-loader', 'dist/index.js'),
+    entry: {
+      index: resolvePackage('hippy-vue-css-loader', 'src/index.js'),
+      'css-loader': resolvePackage('hippy-vue-css-loader', 'src/css-loader.js'),
+    },
+    dir: resolvePackage('hippy-vue-css-loader', 'dist'),
+    entryFileNames: '[name].js',
     format: 'cjs',
     moduleName: 'hippy-vue-css-loader',
     banner: banner('@hippy/vue-css-loader', cssLoaderPackage.version),
@@ -175,6 +179,8 @@ function genConfig(name) {
       }),
     ].concat(opts.plugins || []),
     output: {
+      entryFileNames: opts.entryFileNames,
+      dir: opts.dir,
       file: opts.dest,
       format: opts.format,
       banner: opts.banner,