chore: update playground

Author: chenjiahan

.gitignore

@@ -13,3 +13,11 @@ test-results
 !.vscode/settings.json
 !.vscode/extensions.json
 .idea
+
+# Ignore auto generated CSS declarations
+*.module.css.d.ts
+*.module.sass.d.ts
+*.module.scss.d.ts
+*.module.less.d.ts
+*.module.styl.d.ts
+*.module.stylus.d.ts

playground/rsbuild.config.ts

@@ -1,6 +1,14 @@
 import { defineConfig } from '@rsbuild/core';
-import { pluginTypedCSSModules } from '../src';
+import { pluginLess } from '@rsbuild/plugin-less';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginStylus } from '@rsbuild/plugin-stylus';
+import { pluginTypedCSSModules } from '../dist';
 
 export default defineConfig({
-  plugins: [pluginTypedCSSModules()],
+  plugins: [
+    pluginLess(),
+    pluginSass(),
+    pluginStylus(),
+    pluginTypedCSSModules(),
+  ],
 });

playground/src/a.css

@@ -0,0 +1,3 @@
+.the-a-class {
+  color: red;
+}

playground/src/a.module.scss

@@ -0,0 +1,3 @@
+.a {
+  font-size: 14px;
+}

playground/src/b.module.scss

@@ -0,0 +1,20 @@
+@value primary: blue;
+
+.btn {
+  padding: 20px;
+  border: 1px solid #000;
+}
+
+.the-b-class {
+  composes: btn;
+  composes: a from './a.module.scss';
+  color: primary;
+}
+
+.default {
+  color: red;
+}
+
+._underline {
+  color: blue;
+}

playground/src/c.module.less

@@ -0,0 +1,3 @@
+.the-c-class {
+  color: yellow;
+}

playground/src/d.global.less

@@ -0,0 +1,3 @@
+.the-d-class {
+  color: green;
+}

playground/src/e.module.styl

@@ -0,0 +1,2 @@
+.title-class
+  font-size: 14px;

playground/src/index.css

@@ -1,8 +1,5 @@
-import './index.css';
-
-document.querySelector('#root').innerHTML = `
-<div class="content">
-  <h1>Vanilla Rsbuild</h1>
-  <p>Start building amazing things with Rsbuild.</p>
-</div>
-`;
+import './a.css';
+import './b.module.scss';
+import './c.module.less';
+import './d.global.less';
+import './e.module.styl';