[Feat]Support component use separated css file

packages/babel-plugin-transform-jsx-stylesheet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-jsx-stylesheet",
-  "version": "0.6.6",
+  "version": "0.6.8-0",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/rax-compile-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-compile-config",
-  "version": "0.1.3",
+  "version": "0.1.4-1",
   "description": "rax app base plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",
@@ -33,7 +33,7 @@
     "babel-plugin-transform-jsx-list": "^0.1.0",
     "babel-plugin-transform-jsx-memo": "^0.1.2",
     "babel-plugin-transform-jsx-slot": "^0.1.1",
-    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+    "babel-plugin-transform-jsx-stylesheet": "0.6.8-0",
     "babel-runtime-jsx-plus": "^0.1.3",
     "chalk": "^2.4.2",
     "fs-extra": "^8.1.0",

packages/rax-compile-config/src/getBabelConfig.js

@@ -94,7 +94,9 @@ module.exports = (userOptions = {}) => {
 
   if (styleSheet) {
     configArr.push({
-      plugins: [require.resolve('babel-plugin-transform-jsx-stylesheet')]
+      plugins: [
+        [require.resolve('babel-plugin-transform-jsx-stylesheet'), { retainClassName: true }]
+      ]
     });
   }
 

packages/rax-plugin-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-plugin-component",
-  "version": "0.1.8",
+  "version": "0.1.9-1",
   "description": "rax component base plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",
@@ -18,8 +18,6 @@
   "dependencies": {
     "address": "^1.0.1",
     "babel-loader": "8.0.4",
-    "babel-merge": "^3.0.0",
-    "babel-plugin-transform-jsx-stylesheet": "^0.6.7",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.2",
     "console-clear": "^1.1.1",
@@ -41,10 +39,11 @@
     "postcss-plugin-rpx2vw": "^0.0.1",
     "postcss-preset-env": "^6.6.0",
     "qrcode-terminal": "^0.12.0",
-    "rax-compile-config": "^0.1.2",
+    "rax-compile-config": "0.1.4-1",
     "rax-hot-loader": "^0.6.5",
     "rax-webpack-plugin": "^0.6.5",
     "run-sequence": "^2.2.1",
+    "style-loader": "^1.0.0",
     "stylesheet-loader": "^0.6.5",
     "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",

packages/rax-plugin-component/src/buildLib.js

@@ -2,152 +2,25 @@
 
 const chalk = require('chalk');
 const path = require('path');
-const babel = require('gulp-babel');
-const ts = require('gulp-typescript');
 const fs = require('fs-extra');
-const { getBabelConfig } = require('rax-compile-config');
 
 const gulp = require('gulp');
 const runSequence = require('run-sequence').use(gulp);
-const mpBuild = require('./config/miniapp/build');
 
-const babelConfig = getBabelConfig({
-  styleSheet: true,
-  custom: {
-    ignore: ['**/**/*.d.ts']
-  }
-});
+const { registerTasks } = require('./gulpConfig');
 
-const JS_FILES_PATTERN = 'src/**/*.+(js|jsx)';
-const OTHER_FILES_PATTERN = 'src/**/*.!(js|jsx|ts|tsx)';
-const IGNORE_PATTERN = '**/__tests__/**';
+const mpBuild = require('./config/miniapp/build');
 
-module.exports = async({ context, log }, options = {}) => {
+module.exports = async(api, options = {}) => {
+  const { context, log } = api;
   const { rootDir, userConfig } = context;
-  const { targets = [] } = options;
   const { outputDir } = userConfig;
+  const { targets = [] } = options;
+  const BUILD_DIR = path.resolve(rootDir, outputDir);
   const enableTypescript = fs.existsSync(path.join(rootDir, 'tsconfig.json'));
 
   log.info('component', chalk.green('Build start... '));
-  const BUILD_DIR = path.resolve(rootDir, outputDir);
-
-  gulp.task('clean', function(done) {
-    log.info('component', `Cleaning build directory ${BUILD_DIR}`);
-    fs.removeSync(BUILD_DIR);
-    log.info('component', 'Build directory has been Cleaned');
-    done();
-  });
-
-  // for js/jsx.
-  gulp.task('js', function() {
-    log.info('component', 'Compiling javascript files');
-    return gulp
-      .src([JS_FILES_PATTERN], { ignore: IGNORE_PATTERN })
-      .pipe(babel(babelConfig))
-      .pipe(gulp.dest(BUILD_DIR))
-      .on('end', () => {
-        log.info('component', 'Javascript files have been compiled');
-      });
-  });
-
-  const tsProject = ts.createProject('tsconfig.json', {
-    skipLibCheck: true,
-    declaration: true,
-    declarationDir: BUILD_DIR,
-    outDir: BUILD_DIR
-  });
-
-  // for ts/tsx.
-  gulp.task('ts', function() {
-    log.info('component', 'Compiling typescript files');
-    return tsProject.src()
-      .pipe(tsProject())
-      .pipe(babel(babelConfig))
-      .pipe(gulp.dest(BUILD_DIR))
-      .on('end', () => {
-        log.info('component', 'Typescript files have been compiled');
-      });
-  });
-
-  // for other.
-  gulp.task('copyOther', function() {
-    log.info('component', 'Copy other files');
-    return gulp
-      .src([OTHER_FILES_PATTERN], { ignore: IGNORE_PATTERN })
-      .pipe(gulp.dest(BUILD_DIR))
-      .on('end', () => {
-        log.info('component', 'Other Files have been copied');
-      });
-  });
-
-  // for miniapp build
-  const buildTemp = path.resolve(rootDir, outputDir, 'miniappTemp');
-  gulp.task('miniappClean', function(done) {
-    log.info('component', `Cleaning miniapp build directory ${buildTemp}`);
-    fs.removeSync(buildTemp);
-    log.info('component', 'Build directory has been Cleaned');
-    done();
-  });
-
-  const miniappTsProject = ts.createProject('tsconfig.json', {
-    skipLibCheck: true,
-    declaration: true,
-    declarationDir: BUILD_DIR,
-    outDir: BUILD_DIR
-  });
-
-  //  build ts/tsx to miniapp
-  gulp.task('miniappTs', function() {
-    log.info('component', 'Compiling typescript files for miniapp');
-    return miniappTsProject.src()
-      .pipe(miniappTsProject())
-      .pipe(gulp.dest(buildTemp))
-      .on('end', () => {
-        log.info('component', 'Typescript files have been compiled');
-      });
-  });
-
-  // for other.
-  gulp.task('miniappCopyOther', function() {
-    log.info('component', 'Copy other files for miniapp');
-    return gulp
-      .src([OTHER_FILES_PATTERN], { ignore: IGNORE_PATTERN })
-      .pipe(gulp.dest(buildTemp))
-      .on('end', () => {
-        log.info('component', 'Other Files have been copied');
-      });
-  });
-
-  function getTasks(enableTS, buildMiniapp) {
-    if (enableTS) {
-      if (buildMiniapp) {
-        return [
-          'miniappClean',
-          [
-            'miniappTs',
-            'miniappCopyOther',
-          ],
-        ];
-      }
-
-      return [
-        'clean',
-        [
-          'js',
-          'ts',
-          'copyOther',
-        ],
-      ];
-    }
-
-    return [
-      'clean',
-      [
-        'js',
-        'copyOther',
-      ],
-    ];
-  }
+  registerTasks({ api, gulp });
 
   return new Promise((resolve, reject) => {
     const buildMiniapp = ~targets.indexOf('miniapp');
@@ -183,3 +56,34 @@ module.exports = async({ context, log }, options = {}) => {
     });
   });
 };
+
+function getTasks(enableTS, buildMiniapp) {
+  if (enableTS) {
+    if (buildMiniapp) {
+      return [
+        'miniappClean',
+        [
+          'miniappTs',
+          'miniappCopyOther',
+        ],
+      ];
+    }
+
+    return [
+      'clean',
+      [
+        'js',
+        'ts',
+        'copyOther',
+      ],
+    ];
+  }
+
+  return [
+    'clean',
+    [
+      'js',
+      'copyOther',
+    ],
+  ];
+}

packages/rax-plugin-component/src/config/demo.html

@@ -4,10 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <title>Rax Component Demo</title>
-  <script>
-  	(function(global){if(global.define){return}var modules={};var inGuard=false;function def(id,deps,factory){if(deps instanceof Function){factory=deps;deps=[]}modules[id]={factory:factory,deps:deps,module:{exports:{}},isInitialized:false,hasError:false,}}function req(id){if(id.indexOf("@weex-module")===0){return{}}var originId=id;var mod=modules[id];if(!mod){id=id+"/index";mod=modules[id]}if(mod&&mod.isInitialized){return mod.module.exports}return requireImpl(id,originId)}function requireImpl(id,originId){if(global.ErrorUtils&&!inGuard){inGuard=true;var returnValue;try{returnValue=requireImpl.apply(this,arguments)}catch(e){global.ErrorUtils.reportFatalError(e)}inGuard=false;return returnValue}var mod=modules[id];if(!mod){throw new Error('Requiring unknown module "'+originId+'"')}if(mod.hasError){throw new Error('Requiring module "'+originId+'" which threw an exception')}try{mod.isInitialized=true;mod.factory(req,mod.module.exports,mod.module)}catch(e){mod.hasError=true;mod.isInitialized=false;throw e}return mod.module.exports}global.define=def;global.require=req})(this||typeof global==="object"&&global||typeof window==="object"&&window);
-  </script>
 </head>
-<body>
+<body style="padding: 0;margin: 0">
 </body>
 </html>

packages/rax-plugin-component/src/config/getBaseWebpack.js

@@ -6,6 +6,7 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const babelConfig = getBabelConfig({
+  styleSheet: true,
   custom: {
     ignore: ['**/**/*.d.ts']
   }
@@ -45,11 +46,6 @@ module.exports = (context) => {
     .use('ts')
       .loader(require.resolve('ts-loader'));
 
-  config.module.rule('css')
-    .test(/\.css?$/)
-    .use('css')
-      .loader(require.resolve('stylesheet-loader'));
-
   config.module.rule('assets')
     .test(/\.(svg|png|webp|jpe?g|gif)$/i)
     .use('source')

packages/rax-plugin-component/src/config/getDistConfig.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const nodeExternals = require('webpack-node-externals');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const getBaseWebpack = require('./getBaseWebpack');
 const setUserConfig = require('./user/setConfig');
@@ -16,6 +17,34 @@ module.exports = (context) => {
 
   config.externals(nodeExternals());
 
+  config.module.rule('css')
+    .test(/\.css?$/)
+    .use('minicss')
+      .loader(MiniCssExtractPlugin.loader)
+      .end()
+    .use('css')
+      .loader(require.resolve('css-loader'))
+      .end()
+    .use('postcss')
+      .loader(require.resolve('postcss-loader'))
+      .options({
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+          require('postcss-plugin-rpx2vw')(),
+        ],
+      });
+
+  config.plugin('minicss')
+    .use(MiniCssExtractPlugin, [{
+      filename: '[name].css',
+    }]);
+
   setUserConfig(config, context, 'weex');
 
   return config;

packages/rax-plugin-component/src/config/miniapp/build.js

@@ -1,6 +1,5 @@
 const fs = require('fs-extra');
 const jsx2mp = require('jsx2mp-cli');
-const path = require('path');
 
 const getOutputPath = require('./getOutputPath');
 

packages/rax-plugin-component/src/config/user/default.config.js

@@ -1,8 +1,9 @@
 const address = require('address');
 
 module.exports = {
-  inlineStyle: true,
   outputDir: 'lib',
+  devOutputDir: 'lib',
+  devWatchLib: false,
   distDir: 'build',
   publicPath: '/',
   devPublicPath: '/',