feat(css-loader): Fix basic of css loader (#5)

swc-project · Jul 26, 2023 · cbd1c46 · cbd1c46
1 parent 978cc01
commit cbd1c46
Show file tree

Hide file tree

Showing 16 changed files with 1,514 additions and 79 deletions.
diff --git a/packages/css-loader/.gitignore b/packages/css-loader/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+build/
+package-lock.json
+*.log
diff --git a/packages/css-loader/examples/modules/App.module.css b/packages/css-loader/examples/modules/App.module.css
@@ -0,0 +1,5 @@
+@import 'globals.css';
+
+.text {
+    color: green;
+}
diff --git a/packages/css-loader/examples/modules/globals.css b/packages/css-loader/examples/modules/globals.css
@@ -0,0 +1,3 @@
+:global div {
+    color: red;
+}
diff --git a/packages/css-loader/examples/modules/index.js b/packages/css-loader/examples/modules/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import * as classes from "./App.module.css";
+console.log(classes);
+function App() {
+    return (
+        <div>
+            <h1 className={classes.text}>JSX is working!</h1>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/packages/css-loader/examples/modules/package.json b/packages/css-loader/examples/modules/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "swc-css-loader-css-modules-app",
+    "private": false,
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "build": "(cd ../.. && pnpm build) && webpack && cp public/* build",
+        "start": "ecstatic build --port 3000"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@swc/css": "^0.0.25",
+        "@swc/css-loader": "workspace:^",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "swc-loader": "workspace:^"
+    },
+    "devDependencies": {
+        "ecstatic": "^4.1.4",
+        "style-loader": "^3.3.3",
+        "webpack": "^5.69.1",
+        "webpack-cli": "^5.1.4"
+    }
+}
diff --git a/packages/css-loader/examples/modules/public/index.html b/packages/css-loader/examples/modules/public/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+    <head>
+        <title>swc-loader example</title>
+        <script src="/bundle.js" async defer></script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/packages/css-loader/examples/modules/webpack.config.js b/packages/css-loader/examples/modules/webpack.config.js
@@ -0,0 +1,60 @@
+"use strict";
+
+const path = require("path");
+
+module.exports = {
+    mode: "development",
+    // Enable source map
+    devtool: "source-map",
+    entry: path.join(__dirname, "index.js"),
+    output: {
+        path: path.join(__dirname, "build"),
+        filename: "bundle.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                exclude: /(node_modules|bower_components)/,
+                use: [
+                    {
+                        loader: "style-loader",
+                    },
+                    {
+                        loader: "@swc/css-loader",
+                        options: {
+                            // Enable source map
+                            sourceMap: true,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: "swc-loader",
+                    options: {
+                        // Enable source map
+                        sourceMap: true,
+                        jsc: {
+                            parser: {
+                                syntax: "ecmascript",
+                                jsx: true,
+                            },
+                            transform: {
+                                react: {
+                                    pragma: "React.createElement",
+                                    pragmaFrag: "React.Fragment",
+                                    throwIfNamespace: true,
+                                    development: false,
+                                    useBuiltins: false,
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+    },
+};