example: add with vanilla-extract (umijs#474)

* example: add with vanilla-extract

* style: fix body height

examples/with-vanilla-extract/.umirc.ts

@@ -0,0 +1,19 @@
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+
+export default {
+  chainWebpack(config) {
+    config.plugin('vanilla-extract').use(VanillaExtractPlugin, []);
+
+    config.module
+      .rule('jsx-ts-tsx')
+      .use('babel-loader')
+      .tap((opts) => {
+        opts.plugins ??= [];
+        opts.plugins.unshift('@vanilla-extract/babel-plugin');
+        return opts;
+      });
+
+    return config;
+  },
+  mfsu: false,
+};

examples/with-vanilla-extract/app.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+// import { GlobalStyles } from './Global';
+
+export function rootContainer(container: any, opts: any) {
+  return React.createElement(Foo, opts, container);
+}
+
+export function innerProvider(container: any) {
+  return React.createElement(Foo, { title: 'innerProvider' }, container);
+}
+
+export function i18nProvider(container: any) {
+  return React.createElement(Foo, { title: 'i18nProvider' }, container);
+}
+
+export function dataflowProvider(container: any) {
+  return React.createElement(Foo, { title: 'dataflowProvider' }, container);
+}
+
+export function outerProvider(container: any) {
+  return React.createElement(Foo, { title: 'outerProvider' }, container);
+}
+
+function Foo(props: any) {
+  return <div>{props.children}</div>;
+}

examples/with-vanilla-extract/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@example/with-vanilla-extract",
+  "private": true,
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@vanilla-extract/babel-plugin": "^1.1.4",
+    "@vanilla-extract/css": "^1.6.8",
+    "@vanilla-extract/webpack-plugin": "^2.1.5",
+    "umi": "4.0.0-rc.6"
+  }
+}

examples/with-vanilla-extract/pages/index.css.ts

@@ -0,0 +1,74 @@
+import { style, globalStyle, keyframes } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  margin: 0,
+  height: '100%',
+  fontFamily: `'Lucida Sans', sans-serif`,
+});
+
+export const center = style([
+  {
+    textAlign: 'center',
+  },
+]);
+
+export const container = style([
+  {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+]);
+
+export const title = style([
+  {
+    fontSize: 32,
+  },
+]);
+
+export const hoverText = style([
+  {
+    marginTop: 100,
+    padding: 32,
+    backgroundColor: '#2eabff',
+    fontSize: 24,
+    ':hover': {
+      color: 'white',
+    },
+  },
+]);
+
+const bounce = keyframes({
+  '20%, 53%, 80%': { transform: 'translate3d(0,0,0)' },
+  '40%, 43%': { transform: 'translate3d(0, -30px, 0)' },
+  '70%': { transform: 'translate3d(0, -15px, 0)' },
+  '90%': { transform: 'translate3d(0, -4px, 0)' },
+});
+
+export const bounceText = style([
+  {
+    paddingTop: 100,
+    animation: `${bounce} 1s ease infinite`,
+  },
+]);
+
+export const breakpoints = [576, 768, 992, 1200];
+
+export const medias = breakpoints.map(
+  (bp) => `screen and (min-width: ${bp}px)`,
+);
+
+export const mediaText = style([
+  {
+    marginTop: 100,
+    color: 'green',
+    '@media': {
+      [medias[0]]: {
+        color: 'hotpink',
+      },
+      [medias[1]]: {
+        color: '#2eabff',
+      },
+    },
+  },
+]);

examples/with-vanilla-extract/pages/index.tsx

@@ -0,0 +1,22 @@
+import * as styles from './index.css';
+
+export default function HomePage(props) {
+  return (
+    <div className={styles.center}>
+      <p className={styles.title}>UmiJS x vanilla-extract</p>
+      <div className={styles.hoverText}>
+        This is css string example. Hover to change color to white.
+      </div>
+
+      <div className={styles.mediaText}>
+        This is css media example. color default green <br /> {styles.medias[1]}{' '}
+        change to #2eabff <br /> {styles.medias[0]} change to hotpink
+      </div>
+      <div>
+        <div className={styles.bounceText}>
+          This is animation example. bouncing text!
+        </div>
+      </div>
+    </div>
+  );
+}

examples/with-vanilla-extract/readme.md

@@ -0,0 +1,3 @@
+# with-vanilla-extract
+
+An example of using [UmiJS](https://umijs.org/zh-CN) with [with-vanilla-extract](https://vanilla-extract.style/).