-
-
Notifications
You must be signed in to change notification settings - Fork 595
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: css-extract-plugin should keep file dependencies (#6576)
- Loading branch information
Showing
12 changed files
with
220 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/playground/cases/react/tailwindcss-with-css-extract/index.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { test, expect } from "@/fixtures"; | ||
|
||
test("tailwindcss should work when modify js file", async ({ | ||
page, | ||
fileAction, | ||
rspack | ||
}) => { | ||
function getAppFontSize() { | ||
return page.evaluate(() => { | ||
const app = document.querySelector("#app"); | ||
if (!app) { | ||
return ""; | ||
} | ||
return window.getComputedStyle(app).fontSize; | ||
}); | ||
} | ||
|
||
let appFontSize = await getAppFontSize(); | ||
expect(appFontSize).toBe("24px"); | ||
|
||
// update | ||
fileAction.updateFile("src/App.jsx", content => { | ||
return content.replace("text-2xl", "text-3xl"); | ||
}); | ||
|
||
await expect(page.locator("#app")).toHaveClass(/text-3xl/); | ||
|
||
appFontSize = await getAppFontSize(); | ||
expect(appFontSize).toBe("30px"); | ||
}); |
66 changes: 66 additions & 0 deletions
66
packages/playground/cases/react/tailwindcss-with-css-extract/rspack.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
const path = require("path"); | ||
const rspack = require("@rspack/core"); | ||
const ReactRefreshPlugin = require("@rspack/plugin-react-refresh"); | ||
|
||
module.exports = { | ||
context: __dirname, | ||
mode: "development", | ||
entry: { | ||
main: "./src/main.jsx" | ||
}, | ||
plugins: [ | ||
new rspack.HtmlRspackPlugin({ template: "./src/index.html" }), | ||
new ReactRefreshPlugin(), | ||
new rspack.CssExtractRspackPlugin() | ||
], | ||
resolve: { | ||
extensions: ["...", ".ts", ".tsx", ".jsx"] | ||
}, | ||
experiments: { | ||
css: false | ||
}, | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.jsx$/, | ||
use: { | ||
loader: "builtin:swc-loader", | ||
options: { | ||
jsc: { | ||
parser: { | ||
syntax: "ecmascript", | ||
jsx: true | ||
}, | ||
transform: { | ||
react: { | ||
runtime: "automatic", | ||
development: true, | ||
refresh: true | ||
} | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
rspack.CssExtractRspackPlugin.loader, | ||
"css-loader", | ||
{ | ||
loader: "postcss-loader", | ||
options: { | ||
postcssOptions: { | ||
plugins: { | ||
tailwindcss: { | ||
config: path.join(__dirname, "./tailwind.config.js") | ||
} | ||
} | ||
} | ||
} | ||
} | ||
] | ||
} | ||
] | ||
} | ||
}; |
10 changes: 10 additions & 0 deletions
10
packages/playground/cases/react/tailwindcss-with-css-extract/src/App.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
|
||
#root { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} |
12 changes: 12 additions & 0 deletions
12
packages/playground/cases/react/tailwindcss-with-css-extract/src/App.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from "react"; | ||
import "./App.css"; | ||
|
||
function App() { | ||
return ( | ||
<h1 id="app" className="text-2xl font-bold underline"> | ||
Hello world! | ||
</h1> | ||
); | ||
} | ||
|
||
export default App; |
12 changes: 12 additions & 0 deletions
12
packages/playground/cases/react/tailwindcss-with-css-extract/src/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
</body> | ||
</html> |
5 changes: 5 additions & 0 deletions
5
packages/playground/cases/react/tailwindcss-with-css-extract/src/main.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import React from "react"; | ||
import ReactDOM from "react-dom/client"; | ||
import App from "./App"; | ||
|
||
ReactDOM.createRoot(document.getElementById("root")).render(<App />); |
9 changes: 9 additions & 0 deletions
9
packages/playground/cases/react/tailwindcss-with-css-extract/tailwind.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
const path = require("path"); | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
content: [path.join(__dirname, "./src/**/*.{html,js,jsx}")], | ||
theme: { | ||
extend: {} | ||
}, | ||
plugins: [] | ||
}; |
093a237
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 Benchmark detail: Open
093a237
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 Ran ecosystem CI: Open