Skip to content
This repository has been archived by the owner on Jul 5, 2024. It is now read-only.

feat: add vanilla extract case #22

Merged
merged 2 commits into from
Jul 1, 2024
+700 −13
Merged

feat: add vanilla extract case #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb61cc0
feat: add vanilla extract case
9aoy Jul 1, 2024
9a79042
fix: CI
9aoy Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/@vanilla-extract/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rspack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
16 changes: 16 additions & 0 deletions packages/@vanilla-extract/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "@rspack-compat/vanilla-extract",
"scripts": {
"build": "rspack build",
"dev": "rspack dev"
},
"devDependencies": {
"@vanilla-extract/css": "^1.15.1",
"@rspack/cli": "1.0.0-alpha.0",
"@rspack/core": "1.0.0-alpha.0",
"@vanilla-extract/webpack-plugin": "^2.3.8"
},
"rspack": {
"version": "1.0.0-alpha.0"
}
}
13 changes: 13 additions & 0 deletions packages/@vanilla-extract/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const { defineConfig } = require("@rspack/cli");
const rspack = require("@rspack/core");
const { VanillaExtractPlugin } = require("@vanilla-extract/webpack-plugin");

module.exports = defineConfig({
plugins: [
new VanillaExtractPlugin(),
new rspack.HtmlRspackPlugin({ template: "./index.html" }),
],
experiments: {
css: true,
},
});
17 changes: 17 additions & 0 deletions packages/@vanilla-extract/src/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { createTheme, style } from "@vanilla-extract/css";

export const [themeClass, vars] = createTheme({
color: {
brand: "blue",
},
font: {
body: "arial",
},
});

export const exampleStyle = style({
backgroundColor: vars.color.brand,
fontFamily: vars.font.body,
color: "white",
padding: 10,
});
10 changes: 10 additions & 0 deletions packages/@vanilla-extract/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { themeClass, exampleStyle } from "./index.css.ts";

function render() {
const container = document.getElementById("root");
container.innerHTML = ` <section class="${themeClass}">
<h1 class="${exampleStyle}">Hello world!</h1>
</section>`;
}

render();
19 changes: 7 additions & 12 deletions packages/terser-webpack-plugin@5/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
const { defineConfig } = require('@rspack/cli')
const tererPlugin = require('terser-webpack-plugin');
const { StatsWriterPlugin } = require('webpack-stats-plugin');
const rspack = require('@rspack/core');
const terserPlugin = require("terser-webpack-plugin");
const { StatsWriterPlugin } = require("webpack-stats-plugin");
const rspack = require("@rspack/core");
module.exports = defineConfig({
plugins: [
new StatsWriterPlugin()
],
plugins: [new StatsWriterPlugin()],
optimization: {
minimizer: [
new tererPlugin(),
new rspack.SwcCssMinimizerRspackPlugin()
]
}
});;
minimizer: [new terserPlugin(), new rspack.SwcCssMinimizerRspackPlugin()],
},
});;
Loading
Loading