You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-4Lines changed: 5 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -34,10 +34,10 @@ In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules)
34
34
35
35
## Performance
36
36
37
-
The important metric here is "Difference from base" (DFB). "base" is defined as using React with hardcoded `className` values. The lesser the DFB value, the bigger the performance impact.
37
+
The important metric here is the "Difference from the base benchmark". "base" is defined as using React with hardcoded `className` values. The lesser the difference, the bigger the performance impact.
38
38
39
39
> Note:
40
-
> This benchmark suite does not include a scenario when `babel-plugin-react-css-modules` can statically construct the value of `className`.
40
+
> This benchmark suite does not include a scenario when `babel-plugin-react-css-modules` can statically construct a literal value at the build time.
41
41
> If a literal value of the `className` is constructed at the compile time, the performance is equal to the base benchmark.
42
42
43
43
|Name|Operations per second (relative margin of error)|Sample size|Difference from the base benchmark|
@@ -74,11 +74,12 @@ NODE_ENV=production ./test
74
74
1. Builds index of all stylesheet imports per file.
75
75
1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files.
76
76
1. Iterates through all [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) element declarations.
77
-
1. Uses the `styleName` value to resolve the generated CSS class name of the CSS module.
77
+
1. Parses the `styleName` attribute value into anonymous and named CSS module references.
78
+
1. Finds the CSS class name matching the CSS module reference:
78
79
* If `styleName` value is a string literal, generates a string literal value.
79
80
* If `styleName` value is a [`jSXExpressionContainer`](https://github.com/babel/babel/tree/master/packages/babel-types#jsxexpressioncontainer), uses a helper function ([`getClassName`](./src/getClassName.js)) to construct the `className` value at the runtime.
80
81
1. Removes the `styleName` attribute from the element.
81
-
1. Appends the resulting `className` to the existing `className` value (or creates `className` attribute if one does not exist).
82
+
1. Appends the resulting `className` to the existing `className` value (creates `className` attribute if one does not exist).
0 commit comments