Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: escape css #8698

Merged
merged 2 commits into from
Dec 16, 2024
Merged

fix: escape css #8698

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
f84b707
fix: escape css
JSerFeng Dec 13, 2024
4c1b7ed
Merge branch 'main' into fix/css-escape
JSerFeng Dec 16, 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
37 changes: 25 additions & 12 deletions crates/rspack_plugin_css/src/parser_and_generator/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,8 @@ impl ParserAndGenerator for CssParserAndGenerator {
css_module_lexer::Dependency::LocalClass { name, range, .. }
| css_module_lexer::Dependency::LocalId { name, range, .. } => {
let (_prefix, name) = name.split_at(1); // split '#' or '.'
let name = unescape(name);

let local_ident = LocalIdentOptions::new(
resource_data,
self
Expand All @@ -223,13 +225,13 @@ impl ParserAndGenerator for CssParserAndGenerator {
.expect("should have local_ident_name for module_type css/auto or css/module"),
compiler_options,
)
.get_local_ident(name);
.get_local_ident(&name);
let convention = self
.convention
.as_ref()
.expect("should have local_ident_name for module_type css/auto or css/module");
let exports = self.exports.get_or_insert_default();
let convention_names = export_locals_convention(name, convention);
let convention_names = export_locals_convention(&name, convention);
for name in convention_names.iter() {
update_css_exports(
exports,
Expand All @@ -249,6 +251,7 @@ impl ParserAndGenerator for CssParserAndGenerator {
)));
}
css_module_lexer::Dependency::LocalKeyframes { name, range, .. } => {
let name = unescape(name);
let local_ident = LocalIdentOptions::new(
resource_data,
self
Expand All @@ -257,13 +260,13 @@ impl ParserAndGenerator for CssParserAndGenerator {
.expect("should have local_ident_name for module_type css/auto or css/module"),
compiler_options,
)
.get_local_ident(name);
.get_local_ident(&name);
let exports = self.exports.get_or_insert_default();
let convention = self
.convention
.as_ref()
.expect("should have local_ident_name for module_type css/auto or css/module");
let convention_names = export_locals_convention(name, convention);
let convention_names = export_locals_convention(&name, convention);
for name in convention_names.iter() {
update_css_exports(
exports,
Expand All @@ -285,6 +288,7 @@ impl ParserAndGenerator for CssParserAndGenerator {
)));
}
css_module_lexer::Dependency::LocalKeyframesDecl { name, range, .. } => {
let name = unescape(name);
let local_ident = LocalIdentOptions::new(
resource_data,
self
Expand All @@ -293,13 +297,13 @@ impl ParserAndGenerator for CssParserAndGenerator {
.expect("should have local_ident_name for module_type css/auto or css/module"),
compiler_options,
)
.get_local_ident(name);
.get_local_ident(&name);
let exports = self.exports.get_or_insert_default();
let convention = self
.convention
.as_ref()
.expect("should have local_ident_name for module_type css/auto or css/module");
let convention_names = export_locals_convention(name, convention);
let convention_names = export_locals_convention(&name, convention);
for name in convention_names.iter() {
update_css_exports(
exports,
Expand All @@ -324,38 +328,47 @@ impl ParserAndGenerator for CssParserAndGenerator {
from,
range,
} => {
let local_classes = local_classes
.into_iter()
.map(|s| unescape(s).to_string())
.collect::<Vec<_>>();
let names = names
.into_iter()
.map(|s| unescape(s).to_string())
.collect::<Vec<_>>();

let mut dep_id = None;
if let Some(from) = from
&& from != "global"
{
let from = from.trim_matches(|c| c == '\'' || c == '"');
let dep = CssComposeDependency::new(
from.to_string(),
names.iter().map(|s| (*s).into()).collect(),
names.iter().map(|s| s.to_owned().into()).collect(),
DependencyRange::new(range.start, range.end),
);
dep_id = Some(*dep.id());
dependencies.push(Box::new(dep));
} else if from.is_none() {
dependencies.push(Box::new(CssSelfReferenceLocalIdentDependency::new(
names.iter().map(|s| (*s).into()).collect(),
names.iter().map(|s| s.to_string()).collect(),
vec![],
)));
}
let exports = self.exports.get_or_insert_default();
for name in names {
for &local_class in local_classes.iter() {
if let Some(existing) = exports.get(name)
for local_class in local_classes.iter() {
if let Some(existing) = exports.get(name.as_str())
&& from.is_none()
{
let existing = existing.clone();
exports
.get_mut(local_class)
.get_mut(local_class.as_str())
.expect("composes local class must already added to exports")
.extend(existing);
} else {
exports
.get_mut(local_class)
.get_mut(local_class.as_str())
.expect("composes local class must already added to exports")
.insert(CssExport {
ident: name.to_string(),
Expand Down
13 changes: 7 additions & 6 deletions crates/rspack_plugin_css/src/utils.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ pub fn stringified_exports<'a>(
let content = elements
.iter()
.map(|CssExport { ident, from, id: _ }| match from {
None => json_stringify(&unescape(ident)),
None => json_stringify(&ident),
Some(from_name) => {
let from = module
.get_dependencies()
Expand Down Expand Up @@ -233,7 +233,7 @@ pub fn stringified_exports<'a>(
writeln!(
stringified_exports,
" {}: {},",
json_stringify(&unescape(key)),
json_stringify(&key),
content
)
.map_err(|e| error!(e.to_string()))?;
Expand Down Expand Up @@ -266,7 +266,7 @@ pub fn css_modules_exports_to_concatenate_module_string<'a>(
let content = elements
.iter()
.map(|CssExport { ident, from, id: _ }| match from {
None => json_stringify(&unescape(ident)),
None => json_stringify(&ident),
Some(from_name) => {
let from = module
.get_dependencies()
Expand Down Expand Up @@ -297,7 +297,7 @@ pub fn css_modules_exports_to_concatenate_module_string<'a>(
format!(
"{}({from})[{}]",
RuntimeGlobals::REQUIRE,
json_stringify(&unescape(ident))
json_stringify(&ident)
)
}
})
Expand All @@ -306,15 +306,15 @@ pub fn css_modules_exports_to_concatenate_module_string<'a>(
let mut identifier = to_identifier(key);
let mut i = 0;
while used_identifiers.contains(&identifier) {
identifier = Cow::Owned(format!("{key}{}", itoa!(i)));
identifier = Cow::Owned(format!("{identifier}{}", itoa!(i)));
i += 1;
}
// TODO: conditional support `const or var` after we finished runtimeTemplate utils
concate_source.add(RawStringSource::from(format!(
"var {identifier} = {content};\n"
)));
used_identifiers.insert(identifier.clone());
scope.register_export(unescape(key).as_ref().into(), identifier.into_owned());
scope.register_export(key.into(), identifier.into_owned());
}
Ok(())
}
Expand All @@ -330,6 +330,7 @@ static UNESCAPE: LazyLock<Regex> =

static DATA: LazyLock<Regex> = LazyLock::new(|| Regex::new(r"^(?i)data:").expect("Invalid RegExp"));

// `\/foo` in css should be treated as `foo` in js
pub fn unescape(s: &str) -> Cow<str> {
UNESCAPE.replace_all(s.as_ref(), |caps: &Captures| {
caps
Expand Down
66 changes: 33 additions & 33 deletions packages/rspack-test-tools/tests/__snapshots__/Config.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,46 +54,46 @@ Object {

exports[`config config/builtins/css-modules-local-ident-name-hash exported tests css modules localIdentName with hash 1`] = `
Object {
#: c36b985d54c6917,
##: ab513cc8abd7e7d,
#.#.#: b6aa9e623eb8be,
#fake-id: d65fd648c910d0f,
++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.: fe85c4cd33dc7b53,
#: ab5b3430521fed0b,
##: cb547534b9bb8e,
#.#.#: a4c570203a26b7a,
#fake-id: f7b6eb7b0e0c18,
++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.: c40d0c7abfea21c2,
-a-b-c-: b1d2002fed1364,
-a0-34a___f: bd6992764ef,
.: f8dc72200543c02,
123: fc54982b169de010,
1a2b3c: e0d288534c575c7c,
:): ce45aa5fbb24,
:\`(: c3a47328b233,
:hover: c9cb40d597d6145,
:hover:focus:active: adb078f8a010,
<><<<>><>: e57bed6057bf,
<p>: d4d795aa031981a3,
?: ca312bbe575926f7,
@: e73735f9a6fa1e2a,
B&W?: c28b11d8276955d9,
[attr=value]: aefb3cf784f22f09,
_: b892aeed406cef6,
.: aba9a87983bb4,
123: fc0eed74768cf0,
1a2b3c: cd4a1680594,
:): f173228435cfb0b1,
:\`(: c028ead51dd2190,
:hover: bcf55b240a0c8c3,
:hover:focus:active: a9b6b582b414966b,
<><<<>><>: c75f56ad7787952,
<p>: aeefcae4950d33f5,
?: e40713fc7c65c3f,
@: cd391b9e31254d,
B&W?: daaf197c50aa167,
[attr=value]: fa72982cc3b312,
_: bd050c4fe,
_test: f95d7802389a,
className: b88ec9c3ddaa088,
f!o!o: bc20be6f8aa6ba2b,
f'o'o: a1ad39e5bcb2a,
f*o*o: ee490440b4d27dd,
f+o+o: b2f2e8203ab92e0,
f/o/o: e8e6467eba546855,
f\\o\\o: ac4b388a402f1b,
foo.bar: bf09604a510669,
foo/bar: f06b4ed00041408a,
foo/bar/baz: b62901907350b529,
foo\\bar: cf1721b3e29,
foo\\bar\\baz: db46f3e1d8ecc82b,
f~o~o: e22953bae58b7,
m_x_@: eede355cc6b0366,
f!o!o: ae3ae8c7841a7dc,
f'o'o: df77f78fe66aae2,
f*o*o: a7fec00e3ce42886,
f+o+o: eb6cf0061b2d78e,
f/o/o: d0e703c722b26d0c,
f\\o\\o: a496c6306a14d13d,
foo.bar: cd2e4302e8b6edf3,
foo/bar: cd90db0f2125295,
foo/bar/baz: f253f688730bc76e,
foo\\bar: eb2a9acb231,
foo\\bar\\baz: b41adbd8ba363134,
f~o~o: b5f0b0aac1e4e,
m_x_@: deacd91fcb5633e3,
someId: f39bfe4a4606a57c,
subClass: dbb85e97d7af8a70,
test: db0a8ac9537cb87c,
{}: c849d7d50310c200,
{}: b674276dd02fd15,
©: fc4038317,
“‘’”: b1f8cf023766,
⌘⌥: cad802,
Expand Down
9 changes: 8 additions & 1 deletion packages/rspack-test-tools/tests/configCases/css/escape-ident/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import * as styles from "./index.module.css";

it("should generate correct exports", () => {
const fs = __non_webpack_require__('fs')
const path = __non_webpack_require__('path')
expect(styles).toEqual(
nsObj({
a: '"aaa" 123',
b: "multiple lines bbb"
b: "multiple lines bbb",
'a/b': 'a/b-./'
})
);

const css = fs.readFileSync(path.resolve(__dirname, './bundle0.css')).toString()
const escape = css.replaceAll('\\', '')
expect(escape).toContain(styles['a/b'])
});
6 changes: 5 additions & 1 deletion packages/rspack-test-tools/tests/configCases/css/escape-ident/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,8 @@
comment2
comment3
*/ bbb/* comment4 */
}
}

.a\/b {
color: red
};
10 changes: 9 additions & 1 deletion packages/rspack-test-tools/tests/configCases/css/escape-ident/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,13 @@
module.exports = {
experiments: {
css: true
}
},
module: {
generator: {
'css/auto': {
exportsOnly: false,
localIdentName: '[local]-[path]'
}
}
},
};
5 changes: 5 additions & 0 deletions packages/rspack-test-tools/tests/configCases/css/escape-ident/test.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
findBundle() {
return ['bundle0.js']
}
}
9 changes: 7 additions & 2 deletions ...test-tools/tests/configCases/css/minify-lightning-css-remove-unused-local-idents/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ it("should remove unused local idents", async () => {
const fs = __non_webpack_require__("fs");
const path = __non_webpack_require__("path");
expect(styles.a).toBe("./style.module-a");
expect(styles['local/used']).toBe("./style.module-local/used");

const css = await fs.promises.readFile(path.resolve(__dirname, "./bundle0.css"), "utf-8");
expect(css).not.toContain(".module-b")
if (!EXPORTS_ONLY) {
const css = await fs.promises.readFile(path.resolve(__dirname, "./bundle0.css"), "utf-8");
expect(css).not.toContain(".module-b")
expect(css).toContain("local\\/used")
expect(css).not.toContain("local\\/unused")
}
})
36 changes: 35 additions & 1 deletion ...ls/tests/configCases/css/minify-lightning-css-remove-unused-local-idents/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const rspack = require("@rspack/core");

/** @type {import("@rspack/core").Configuration} */
module.exports = {
const common = {
target: 'web',
node: {
__dirname: false,
Expand All @@ -25,3 +25,37 @@ module.exports = {
css: true
}
};

module.exports = [
{
...common,
plugins: [
new rspack.DefinePlugin({
EXPORTS_ONLY: false
})
]
},
{
...common,
plugins: [
new rspack.DefinePlugin({
EXPORTS_ONLY: true
})
],
module: {
generator: {
"css/auto": {
localIdentName: "[path][name]-[local]",
exportsOnly: true,
}
}
},
optimization: {
minimize: true,
concatenateModules: true,
minimizer: [
new rspack.LightningCssMinimizerRspackPlugin(),
]
},
}
]
8 changes: 8 additions & 0 deletions ...ls/tests/configCases/css/minify-lightning-css-remove-unused-local-idents/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,11 @@
.b {
color: blue;
}

.local\/used {
color: red;
}

.local\/unused {
color: blue
}
Loading
Loading