diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..11cadc4
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = function (api) {
+  // Cache the returned value forever and don't call this function again.
+  if (api) api.cache(true);
+
+  return {
+    presets: [
+      ['@babel/preset-env', {
+        'loose': true,
+      }],
+    ]
+  };
+};
diff --git a/example-vanilla/component.html b/example-vanilla/component.html
new file mode 100644
index 0000000..bf6a64f
--- /dev/null
+++ b/example-vanilla/component.html
@@ -0,0 +1,27 @@
+<style>
+  .container {
+    color: red;
+    background: green;
+  }
+</style>
+
+<div>
+  HTML
+  <span id="foo" className="container">
+    hello world
+  </span>
+</div>
+
+<script>
+// Example code.
+function it(spec, fn) {
+  requestAnimationFrame(fn);
+};
+
+it('simple example', () => {
+  console.assert(
+    document.getElementById('foo').innerHTML === 'hello world',
+    'expect span#foo to equal \'hello world\''
+  );
+});
+</script>
\ No newline at end of file
diff --git a/example-vanilla/index.js b/example-vanilla/index.js
new file mode 100644
index 0000000..603514d
--- /dev/null
+++ b/example-vanilla/index.js
@@ -0,0 +1,6 @@
+import createComponent from './component.html';
+
+document
+  .body
+  .appendChild(document.createElement('div'))
+  .appendChild(createComponent());
\ No newline at end of file
diff --git a/example-vanilla/webpack.config.js b/example-vanilla/webpack.config.js
new file mode 100644
index 0000000..ac7732e
--- /dev/null
+++ b/example-vanilla/webpack.config.js
@@ -0,0 +1,37 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const rmlLoader = require.resolve('..');
+
+module.exports = {
+  context: __dirname,
+  devtool: 'source-map',
+  mode: 'development',
+  entry: './index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: rmlLoader,
+        options: {
+          renderer: 'vanilla',
+          inlineStyle: true,
+        },
+      },
+      {
+        test: /\.css$/,
+        use: require.resolve('stylesheet-loader'),
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+  ],
+  devServer: {
+    hot: false,
+    inline: false,
+  },
+};
diff --git a/example/component.rml b/example/component.rml
index 3711f43..413b1cd 100644
--- a/example/component.rml
+++ b/example/component.rml
@@ -76,11 +76,11 @@
     <span data-id={ foo ? color : 'undefined' }>
       计算
     </span>
-    {/* <Button type="primary" onClick={function() {
+    <Button type="primary" onClick={() => {
       alert(1);
     }}>
       点击
-    </Button> */}
+    </Button>
   </div>
   <div>
     <Button type="primary" onClick={handleClick}>
diff --git a/package.json b/package.json
index c653a44..a9901d5 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@reactml/loader",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Webpack loader for react markup language.",
   "main": "src/rml-loader.js",
   "scripts": {
     "lint": "eslint --cache --ext .js ./src",
     "lint:fix": "eslint --cache --ext .js ./src --fix",
     "start": "webpack-dev-server --config example/webpack.config.js",
+    "start:vanilla": "webpack-dev-server --config example-vanilla/webpack.config.js",
     "test": "jest --logHeapUsage --detectOpenHandles",
     "prepublish": "npm run lint && npm run test"
   },
@@ -62,7 +63,7 @@
   "devDependencies": {
     "@alifd/next": "^1.19.18",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^25.2.4",
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-rax": "^0.0.3",
diff --git a/src/__tests__/__snapshots__/parts.js.snap b/src/__tests__/__snapshots__/parts.js.snap
index b4ec93f..5011b58 100644
--- a/src/__tests__/__snapshots__/parts.js.snap
+++ b/src/__tests__/__snapshots__/parts.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`parts should parse rml 1`] = `
+exports[`parts should parse basic rml 1`] = `
 Object {
   "attrs": Object {},
   "content": "import { useState, useCallback } from 'react';
@@ -22,7 +22,7 @@ Object {
 }
 `;
 
-exports[`parts should parse rml 2`] = `
+exports[`parts should parse basic rml 2`] = `
 Object {
   "attrs": Object {},
   "content": Array [
@@ -43,7 +43,7 @@ Object {
 }
 `;
 
-exports[`parts should parse rml 3`] = `
+exports[`parts should parse basic rml 3`] = `
 Object {
   "attrs": Object {},
   "content": ".foo {
@@ -53,7 +53,7 @@ Object {
 }
 `;
 
-exports[`parts should parse rml 4`] = `
+exports[`parts should parse basic rml 4`] = `
 Array [
   Object {
     "Button": "Button",
diff --git a/src/__tests__/babel-plugin-with-props.js b/src/__tests__/babel-plugin-with-props.js
index 565c6e4..81b0792 100644
--- a/src/__tests__/babel-plugin-with-props.js
+++ b/src/__tests__/babel-plugin-with-props.js
@@ -21,6 +21,10 @@ const specs = [
     '<foo onClick={(foo, bar) => { alert(foo) }} />',
     '<foo onClick={(foo,bar)=>{alert(foo);}}/>',
   ],
+  [
+    '<foo onClick={function hello(foo, bar) { alert(foo) }} />',
+    '<foo onClick={function hello(foo,bar){alert(foo);}}/>',
+  ],
 ];
 
 describe('babel-plugin-with-props', () => {
@@ -30,6 +34,7 @@ describe('babel-plugin-with-props', () => {
       const expected = spec[1];
       const actual = transformSync(input, {
         compact: true,
+        configFile: false,
         plugins: [[plugin, {}]],
         parserOpts: {
           plugins: ['jsx']
diff --git a/src/__tests__/parts.rml b/src/__tests__/basic.rml
similarity index 100%
rename from src/__tests__/parts.rml
rename to src/__tests__/basic.rml
diff --git a/src/__tests__/get-css-module-name.js b/src/__tests__/get-css-module-name.js
new file mode 100644
index 0000000..ed685d0
--- /dev/null
+++ b/src/__tests__/get-css-module-name.js
@@ -0,0 +1,32 @@
+import getCSSModuleName from '../runtime/get-css-module-name';
+
+describe('GetCSSModuleName', () => {
+  const MAPPING = {
+    container: 'foo',
+    strong: 'bar',
+  };
+
+  it('should transform local name', () => {
+    const actual = getCSSModuleName(MAPPING, 'strong');
+
+    expect(actual).toEqual('bar');
+  });
+
+  it('should transform multi', () => {
+    const actual = getCSSModuleName(MAPPING, 'strong container');
+
+    expect(actual).toEqual('bar foo');
+  });
+
+  it('should transform global', () => {
+    const actual = getCSSModuleName(MAPPING, ':strong :container');
+
+    expect(actual).toEqual('strong container');
+  });
+
+  it('should not transform not match', () => {
+    const actual = getCSSModuleName(MAPPING, 'sss ddd');
+
+    expect(actual).toEqual('sss ddd');
+  });
+});
diff --git a/src/__tests__/parts.js b/src/__tests__/parts.js
index 7b569d1..30a614d 100644
--- a/src/__tests__/parts.js
+++ b/src/__tests__/parts.js
@@ -6,8 +6,8 @@ const { readFileSync } = require('fs');
 const { join } = require('path');
 
 describe('parts', () => {
-  it('should parse rml', () => {
-    const rml = readFileSync(join(__dirname, './parts.rml'), 'utf-8');
+  it('should parse basic rml', () => {
+    const rml = readFileSync(join(__dirname, './basic.rml'), 'utf-8');
     const parts = parseSFCParts(rml);
     const script = selectPart(parts, 'script');
     expect(script).toMatchSnapshot();
diff --git a/src/babel-plugin-with-props.js b/src/babel-plugin-with-props.js
index 243a64a..59c512b 100644
--- a/src/babel-plugin-with-props.js
+++ b/src/babel-plugin-with-props.js
@@ -36,20 +36,30 @@ module.exports = function({ types: t }, options) {
         && path.parentPath.node.key === path.node
       ) return;
 
-      // Eg: The params should not be replaced.
-      // <foo onClick={(foo, bar) => { alert(foo) }} />
-      if (
-        path.parentPath.isFunction()
-        && path.parentPath.node.params.indexOf(path.node) > -1
-      ) return;
+      // Skip function declaration cases.
+      if (path.parentPath.isFunction()) {
+        // Eg. The params should not be replaced.
+        // <foo onClick={(foo, bar) => { alert(foo) }} />
+        if (path.parentPath.node.params.indexOf(path.node) > -1) return;
+        // Eg. The id(theFnName) should not be replaced.
+        // <foo onClick={functioo theFnName(foo, bar) { alert(foo) }} />
+        if (path.parentPath.node.id === path.node) return;
+      }
 
       // Eg: The function arguments decleared identifier should not be replaced.
       // <foo onClick={(foo) => { alert(foo) }} />
       if (path.scope.getBinding(path.node.name)) return;
 
-      path.replaceWith(
-        t.memberExpression(prefix, path.node)
-      );
+      // Error do not break compiling.
+      try {
+        path.replaceWith(
+          t.memberExpression(prefix, path.node)
+        );
+      } catch (err) {
+        console.error('[WARNING] Failed to convert in babel-plugin-with-props.');
+        console.error();
+        console.error(err);
+      }
     } else if (path.isMemberExpression()) {
       let leftest = path;
       while (leftest.node.object) {
diff --git a/src/babel.config.js b/src/babel.config.js
index 3d432d7..bd2f44d 100644
--- a/src/babel.config.js
+++ b/src/babel.config.js
@@ -88,7 +88,14 @@ module.exports = (userOptions) => {
   if (styleSheet) {
     babelConfigList.push({
       plugins: [
-        [require.resolve('babel-plugin-transform-jsx-stylesheet'), { retainClassName: true }],
+        [
+          require.resolve('babel-plugin-transform-jsx-stylesheet'),
+          {
+            retainClassName: true,
+            injectedStyleName: styleSheet,
+            convertImport: false,
+          }
+        ],
       ],
     });
   }
diff --git a/src/parts.js b/src/parts.js
index a32b232..f214602 100644
--- a/src/parts.js
+++ b/src/parts.js
@@ -120,6 +120,7 @@ function parseSFCParts(html) {
 function preCompileParts(html, key) {
   const parts = parseSFCParts(html);
   partsStorage.set(key, parts);
+  return parts;
 }
 
 exports.getResourcePart = getResourcePart;
diff --git a/src/rml-loader.js b/src/rml-loader.js
index 796022e..8e305b8 100644
--- a/src/rml-loader.js
+++ b/src/rml-loader.js
@@ -4,6 +4,7 @@ const paths = require('./paths');
 
 const defaultOptions = {
   renderer: 'react', // Can be replaced with preact/rax/...
+  inlineStyle: false, // Style should be inlined, default to false.
 };
 
 /**
@@ -15,23 +16,27 @@ module.exports = function RMLLoader(rawContent) {
   const options = Object.assign({}, defaultOptions, loaderUtils.getOptions(context));
   const stringifyRequest = r => loaderUtils.stringifyRequest(context, r);
   const { resourcePath } = context;
-  const { renderer } = options;
+  const { renderer, inlineStyle } = options;
 
-  preCompileParts(rawContent, resourcePath);
+  const parts = preCompileParts(rawContent, resourcePath);
 
   const loadScriptRequest = stringifyRequest(`${paths.partLoader}?part=script!${resourcePath}`);
-  const loadTemplateRequest = stringifyRequest(`${paths.templateLoader}?renderer=${renderer}!${paths.partLoader}?part=template!${resourcePath}`);
+  const loadTemplateRequest = stringifyRequest(`${paths.templateLoader}?renderer=${renderer}&inlineStyle=${inlineStyle}!${paths.partLoader}?part=template!${resourcePath}`);
   const loadStyleRequest = stringifyRequest(`${paths.styleLoader}!${resourcePath}`);
 
-  const code = `
-import createData from ${loadScriptRequest};
+  let loadData;
+  if (parts.script) {
+    loadData = `import createData from ${loadScriptRequest};`;
+  }
+
+  const codeSafeCreateData = 'typeof createData === \'function\' ? createData(props) : null';
+  const code = `${loadData}
 import render from ${loadTemplateRequest};
 import * as style from ${loadStyleRequest};
-
 export default function AnonymousRMLModule(props) {
-  return render(createData(props), style);
+  return render(${loadData ? codeSafeCreateData : 'null'}, style);
 }
-  `;
+`;
 
   return code.trim() + '\n';
 };
diff --git a/src/runtime/get-css-module-name.js b/src/runtime/get-css-module-name.js
index c20d4a1..e3a5e63 100644
--- a/src/runtime/get-css-module-name.js
+++ b/src/runtime/get-css-module-name.js
@@ -1,4 +1,5 @@
 const CLASS_NAME_SPLITER = /\s/;
+const hasOwn = {}.hasOwnProperty;
 
 /**
  * Support syntax of `:module`, which means global css scope.
@@ -11,10 +12,11 @@ export default function getCSSModuleName(moduleMapping, className) {
     .split(CLASS_NAME_SPLITER)
     .map(local => {
       if (local[0] === ':') {
-        const module = moduleMapping[local.slice(1)];
-        return module ? module : local;
+        return local.slice(1);
       } else {
-        return local;
+        return hasOwn.call(moduleMapping, local)
+          ? moduleMapping[local]
+          : local;
       }
     })
     .join(' ');
diff --git a/src/runtime/vanilla.js b/src/runtime/vanilla.js
new file mode 100644
index 0000000..b00c4d3
--- /dev/null
+++ b/src/runtime/vanilla.js
@@ -0,0 +1,41 @@
+const ELEMENT_NODE = 1;
+const CLASSNAME = 'class';
+const STYLE = 'style';
+
+export function createElement(type, props) {
+  if (typeof type !== 'string') {
+    throw new Error('Only support W3C tag.\n' + type + ' is not supported.');
+  }
+
+  const el = document.createElement(type);
+  for (let prop in props) {
+    const value = props[prop];
+
+    switch (prop) {
+      case STYLE:
+        Object.assign(el.style, value);
+        break;
+      case CLASSNAME:
+        el.className = value;
+        break;
+      default:
+        if (prop in el) {
+          el[prop] = value;
+        } else {
+          el.setAttribute(prop, value);
+        }
+    }
+  }
+
+  if (arguments.length > 2) {
+    for (let i = 2; i < arguments.length; i++) {
+      let child = arguments[i];
+      if (child.nodeType !== ELEMENT_NODE) {
+        child = document.createTextNode(child);
+      }
+      el.appendChild(child);
+    }
+  }
+
+  return el;
+}
diff --git a/src/style-loader.js b/src/style-loader.js
index a115d4a..a348f91 100644
--- a/src/style-loader.js
+++ b/src/style-loader.js
@@ -8,6 +8,9 @@ module.exports = function styleLoader(styleContent) {
   const stringifyRequest = r => loaderUtils.stringifyRequest(this, r);
   const style = getResourcePart(resourcePath, 'style');
 
+  // No style tag exists.
+  if (!style) return '';
+
   // Use webpack's RuleSet utility to normalize user rules
   const compiler = this._compiler;
   const rawRules = compiler.options.module.rules;
diff --git a/src/template-loader.js b/src/template-loader.js
index 4e78649..125b522 100644
--- a/src/template-loader.js
+++ b/src/template-loader.js
@@ -5,6 +5,8 @@ const { getResourcePart } = require('./parts');
 
 const STYLE_IDENTIFIER = '__style__';
 const GET_CSS_MODULE_NAME = '__get_css_module_name__';
+const RENDERER_VANILLA = 'vanilla';
+const rendererVanillaPath = require.resolve('./runtime/vanilla');
 
 /**
  * Babel loader to parse rml templates.
@@ -14,7 +16,7 @@ const GET_CSS_MODULE_NAME = '__get_css_module_name__';
 module.exports = function(templates) {
   const { resourcePath } = this;
   const stringifyRequest = r => loaderUtils.stringifyRequest(this, r);
-  const { renderer } = Object.assign({}, loaderUtils.getOptions(this));
+  const { renderer, inlineStyle } = Object.assign({}, loaderUtils.getOptions(this));
   if (!Array.isArray(templates)) {
     templates = [templates];
   }
@@ -30,10 +32,12 @@ module.exports = function(templates) {
     const getCSSModuleNameRuntimeRequest = stringifyRequest(getCSSModuleNameRuntime);
     extraImports += `\nimport ${GET_CSS_MODULE_NAME} from ${getCSSModuleNameRuntimeRequest};`;
   }
-  const jsx = generateJSX(templates, scopeIds, enableCSSModules);
+  const jsx = generateJSX(templates, scopeIds, enableCSSModules, inlineStyle);
+
+  const rendererImport = renderer === RENDERER_VANILLA ? rendererVanillaPath : renderer;
 
   return `
-import { createElement } from '${renderer}';${imports}${extraImports}
+import { createElement } from '${rendererImport}';${imports}${extraImports}
 export default function __render__(props, ${STYLE_IDENTIFIER}) {
   return ${jsx};
 }
@@ -79,7 +83,7 @@ function compile(template, compileOptions, babelConfig) {
   return babel.transformSync(template, finalTransformOptions);
 }
 
-function generateJSX(templates, scopeIds, enableCSSModules) {
+function generateJSX(templates, scopeIds, enableCSSModules, inlineStyle) {
   const whiteList = ['createElement', STYLE_IDENTIFIER].concat(scopeIds);
   if (enableCSSModules) {
     whiteList.push(GET_CSS_MODULE_NAME);
@@ -103,7 +107,7 @@ function generateJSX(templates, scopeIds, enableCSSModules) {
     ]);
   }
   const babelConfig = getBabelConfig({
-    styleSheet: true,
+    styleSheet: inlineStyle ? STYLE_IDENTIFIER : false,
     override: babelConfigOverride,
   });