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
This is a babel plugin to transform all your string classes into css-module classes automatically.
3
+
This is a babel plugin to transform all your string classes into css-module classes automatically.
4
+
5
+
Its lets you use css-module classes without style object.
6
+
It is faster to write, improves code readability and supports multiple css-module using [named-module](#introducing-named-css-modules)
6
7
7
-
Its lets you write css-module classes just like normal classes (without using style objects). Its faster to write and improves code readability.
8
-
You can import multiple css-modules with different names and then use it as [named-module](#introducing-named-css-modules). supports \*sass/scss modules also.
8
+
Also supports \*sass/scss modules.
9
9
10
-
*\*you may need to use sass-loader with webpack*
10
+
_\*you may need to use sass-loader with webpack_
11
11
12
12
# Installation
13
13
14
-
Install the plugin using npm:
14
+
- Install the plugin with npm:
15
+
15
16
```sh
16
-
npm install --save-dev jsx-css-module-transforms
17
+
npm install --save-dev jsx-css-module-transforms
17
18
```
18
19
19
-
after installing, If you are using babel, add this to your plugins:
20
+
- If you are using babel, add this to your plugins:
21
+
20
22
```jsonc
21
23
// .babelrc
22
24
23
25
{
24
-
"plugins": [
25
-
"module:jsx-css-module-transforms",
26
-
]
26
+
"plugins": ["module:jsx-css-module-transforms"]
27
27
}
28
28
```
29
29
30
-
Or, for Webpack, modify the babel-loader options to include the plugin:
30
+
- For Webpack, modify the babel-loader options to include the plugin:
31
31
32
32
```js
33
33
// webpack.config.js
@@ -46,8 +46,9 @@ module.exports = {
46
46
}
47
47
```
48
48
49
-
> Note: *The plugin expects source code with **JSX**, plugins that executes before might transform JSX even before it reaches to the plugin.
50
-
> If plugin isn't working or throwing unexpected errors, try keeping it at the beginning of the list.*
49
+
> Note: _The plugin relies on the **JSX** syntax. Other plugins that executes early might transform JSX
50
+
> before it reaches to the plugin which might cause some problems. jsx-css-module-transforms plugin needs
51
+
> to be placed before(ideally, at the beginning) other plugins that transform JSX._
51
52
52
53
# Usage
53
54
@@ -56,36 +57,43 @@ We can import the css-module like normal css import without any import variable.
56
57
```jsx
57
58
import"./m1.module.css"
58
59
```
59
-
The plugin will automatically change this import statement to use style object,
60
-
which will then be used to access the css-module classes.
60
+
61
+
The plugin will automatically change the import statement to include style object,
62
+
which will be used to access the css-module classes.
61
63
62
64
```jsx
63
65
import_stylefrom"./m1.module.css"// modified
64
66
```
65
67
66
-
If we now want to use the css-module, we have to write all our css classes using style object that we just imported:
68
+
If we want to use the css-module, we need to write all our css classes using
This sometimes can get too verbose and hurts **code readibility**. It would be nice if we could write our classes as strings and not having to deal with any style objects.
76
78
77
-
*remember, because of style objects we need to introduce template strings and object notations within our `className` attribute.*
79
+
This sometimes can get too verbose and hurts **code readibility**.
80
+
It would be nice if we could write classnames within a string and not
81
+
having to deal with any style objects.
82
+
83
+
84
+
With the help of plugin, we don't have to use style object anymore, instead we can specify our classes by just using strings:
78
85
79
-
With the help of the plugin, we don't have to use style object anymore, instead we can specify our classes just using strings:
80
86
```jsx
81
87
import"./m1.module.css"
82
88
83
89
functionComponent() {
84
-
return<h1 className="foo bar">.....</h1>
90
+
return<h1 className="foo bar">...</h1>
85
91
}
86
92
```
87
-
This looks more readable and is faster to write as well.
88
-
The plugin will modify our code to use css-module and its style object automatically without us having to do anything:
93
+
94
+
This looks more readable and is faster to write as well.
95
+
__jsx-css-modules-transforms__ will modify the code to use css-module and its style object automatically without
96
+
us having to do anything:
89
97
90
98
```jsx
91
99
// modified
@@ -96,15 +104,20 @@ function Component() {
96
104
}
97
105
```
98
106
99
-
**By default, If plugin found any `'*.module.css'` import, it will transform all our css classes to use style objects.**
107
+
The transformed code uses object bracket-notation instead of dot-notation as this allows
108
+
us to use `-` (dash) within our classnames (eg. `className="foo-bar"`).
100
109
101
-
If we want to use global css classes, we need to add `':g'` at the end of the class. This will tell plugin not to transform these classes and keep them as is:
110
+
## Global Styles
111
+
112
+
By default, If plugin finds **any**`'*.module.css'` import, it will transform **all** the css classes
113
+
to use style objects. To use global css classnames, we need to add `':g'` at the end of the classname.
114
+
This tells plugin not to transform these classes and keep them as is:
102
115
103
116
```jsx
104
117
import"./m1.module.css"
105
118
106
119
functionComponent() {
107
-
return<h1 className="foo bar:g baz">....</h1>
120
+
return<h1 className="foo bar:g baz">...</h1>
108
121
}
109
122
```
110
123
@@ -113,25 +126,26 @@ function Component() {
113
126
import_stylefrom"./m1.module.css"
114
127
115
128
functionComponent() {
116
-
return<h1 className={`${_style["foo"]} bar ${_style["baz"]}`}>....</h1>
129
+
return<h1 className={`${_style["foo"]} bar ${_style["baz"]}`}>...</h1>
117
130
}
118
131
```
119
132
120
-
In this example, `'bar'` might be declared in the global stylesheet while `'foo'` and `'baz'` are scoped to the imported module.
133
+
In this example, `'bar'` might be declared in the global style-sheet, while `'foo'` and `'baz'` are
134
+
scoped to the imported css module.
135
+
121
136
122
-
*The transformed code will use object indexing instead of dot-notation, this helps us to use dashes within our class names (eg. `className="foo-bar baz"`) or else, we would have to use camel-case pattern while using css classes.*
137
+
## Usage With Already Imported CSS-Module
123
138
124
-
## Usage With Already Imported CSS-Module
139
+
If you are already using CSS-Modules, the plugin will transform string (containing classnames)
140
+
that is given to any `className` attr. For example:
125
141
126
-
If you were already been using css-module with style objects, the plugin will see it and transform other css-classes accordingly.
127
-
for example:
128
142
```jsx
129
143
importstylefrom"./component.module.css"
130
144
131
145
functionComponent() {
132
146
return (
133
-
<div className={style.foo}>
134
-
<h1 className="bar baz">....</h1>
147
+
<div className={style.foo}>
148
+
<h1 className="bar baz">...</h1>
135
149
</div>
136
150
)
137
151
}
@@ -143,47 +157,51 @@ import style from "./component.module.css"
0 commit comments