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
First, you should to read about [post-import](https://github.com/postcss/postcss-import), because the plugin uses its functionality and acts in the same way, with one exception: in the options you can define the specific rules the path substitution.
14
+
First, you should read about [post-import](https://github.com/postcss/postcss-import), because the plugin uses its functionality and acts in the same way, with one exception: in the options you can define the specific rules the path substitution.
15
15
```js
16
16
// dependencies
17
17
var fs =require("fs")
@@ -68,7 +68,7 @@ subImport([
68
68
```
69
69
This import will always search for red.css instead any required filename. Impractical example :)
70
70
71
-
But how about to replace only _blue.css_ into the _red.css_ and only if the request comes from a directory `pencil`?
71
+
But how about to replace only the _blue.css_ into the _red.css_ and only if the request comes from a directory `pencil`?
72
72
73
73
_app/components/pencil/style.css_
74
74
```css
@@ -90,11 +90,11 @@ subImport([
90
90
])
91
91
```
92
92
93
-
Hmm, how to use it in practice? To answer this question let's learn some more capability of plugin.
93
+
Hmm, how to use it in practice? To answer this question let's learn some more capability of the plugin.
94
94
95
95
## Customization of styles
96
96
97
-
A nice feature of the plugin is the fact that if the overridden path is not exists, it will use the standard method of file resolving. It allows you to create an environment in which any style can work fine without substitution (for example, in the case of using classic postcss-import plugin). When you replace postcss-import to postcss-import-sub, you have the opportunity to customize the styles without spoiling the original sources.
97
+
A nice feature of the plugin is the fact that if the overridden path does not exists, it will use the standard method of file resolving. It allows you to create an environment in which any style can work fine without substitution (for example, in the case of using the classic postcss-import plugin). When you replace postcss-import to postcss-import-sub, you have the opportunity to customize the styles without spoiling the original sources.
98
98
99
99
Imagine a set of components with styles which we'd like to have able to replace without editing component's files themselves.
100
100
@@ -144,18 +144,18 @@ subImport([
144
144
}
145
145
]);
146
146
```
147
-
Last thing - we should to create the new file with new variables.
147
+
The last thing, we should create the new file with new variables.
148
148
149
149
_theme/components/Pencil/variables.css_
150
150
```css
151
151
$PencilColor: blue;
152
152
```
153
153
154
-
If you will build the application with same configuration, you'll see that Pencil became blue.
154
+
If you will build the application with the same configuration, you'll see that Pencil became blue.
155
155
156
156
### Total coverage
157
157
158
-
In the last example we have indicated a specific file name, with which the substitution of imports must occur. And we have formed target filename. But in fact, we are not obliged to do so.
158
+
In the last example, we have indicated a specific file name, with which the substitution of imports must occur. And we have formed target filename. But in fact, we are not obliged to do so.
159
159
160
160
Let's remove the excess.
161
161
@@ -170,15 +170,15 @@ subImport([
170
170
]);
171
171
```
172
172
173
-
This example will _sub_ each imported css file in components directory.
173
+
This example will _sub_ each imported CSS file in components directory.
174
174
175
175
The difference between option `path` and `to` is that __to__ - clearly specifies the file location, while __path__ - indicates only the directory to resolve. The requested file will be found in this directory automatically.
176
176
177
177
## Challenges
178
178
179
-
For the formation of complex paths, you should use regex. Regular expressions allow you to find specific words and then use them in the formation of paths.
179
+
For the formation of complex paths, you should use regex. Regular expressions allow you to find specific words and then use them in the formation of paths.
180
180
181
-
Each result of the regular expression is placed in a special hashmap of aliases. Those aliases you can insert to the template string. Look at example to understand how it works.
181
+
Each result of the regular expression is placed in a special hashmap of aliases. Those aliases you can insert to the template string. Look at next example to understand how it works.
182
182
183
183
```js
184
184
subImport([
@@ -219,7 +219,7 @@ Usage of approach of the regular expression is limited only by your imagination.
219
219
220
220
## Using original postcss-import options
221
221
222
-
You can define original postcss-import options as well as the usual. But in this case the rules for a postcss-import-sub is specified in the property `sub`.
222
+
You can define original postcss-import options as well as the usual. But in this case, the rules for a postcss-import-sub is specified in the property `sub`.
0 commit comments