|
4 | 4 |
|
5 | 5 | **Install:** npm i -D @webkrafters/ordercss |
6 | 6 |
|
7 | | -**Usage:** `ordercss <main entry module path>` |
| 7 | +**Usage:** `ordercss <...main entry module path>` |
8 | 8 |
|
9 | 9 | # Intro |
10 | 10 |
|
11 | 11 | This is a cli tool created to alleviate the CSS extraction conflict order issues encountered in next.js applications. It is intended to be run BEFORE the build process of next.js or similarly situated applications where the aforementioned CSS order conflict error is a concern. |
12 | 12 |
|
13 | 13 | # Mechanics |
14 | 14 |
|
15 | | -OrderCSS is designed to pull and organize in hierarchy all non-referenced CSS module imports from script files of .js, .jsx, .ts and .tsx modules found in the dependency graph of a main entry script module. The resultant organised CSS paths are listed in the terminal. |
| 15 | +OrderCSS is designed to pull and organize in hierarchy all non-referenced CSS module imports from script files of .js, .jsx, .ts and .tsx modules found in the dependency graph of a main entry script module. The resultant organised CSS paths are firstly listed in the terminal. |
16 | 16 |
|
17 | 17 | - The usage of the term "non-referenced" refers to imports and requires statements and expressions made for their side effects as defined in the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only) |
18 | 18 |
|
19 | | -Additionally, a newly generated module is also installed within the same directory as the main entry script module to serve as a CSS manifest listing all non-referenced CSS module imports in the order of priority. All of the curated CSS paths are imported into the manifest module relative to the entry script module. The installed module is named in the following format: |
| 19 | + |
| 20 | +Additionally, a newly generated module is also installed within the same directory as the main entry script module to serve as a CSS manifest listing all non-referenced CSS module imports in the order of priority. All of the curated CSS paths are imported into the manifest module relative to the entry script module. **Where multiple path arguments are supplied, the CSS manifest module is created at the last argument directory** The installed module is named in the following format: |
20 | 21 |
|
21 | 22 | <main entry script module filename>_css_manifest.<js or ts accoring to main entry script module extension> |
22 | 23 |
|
| 24 | +Please be sure to see the [Usage Steps](#usage-steps) section below for very crucial details. |
| 25 | + |
23 | 26 | ## Special cases |
24 | 27 |
|
25 | 28 | Any module import/require expression with path argument ***(better known as module name)*** without extension information is assumed to be either a direct script import with any of the following extensions **.js .jsx .ts .tsx** or a directory containing an index file with one of the four aforementioned extensions. |
@@ -56,12 +59,17 @@ open the command line terminal |
56 | 59 |
|
57 | 60 | cd into the project root or any other preferred location within the project. |
58 | 61 |
|
59 | | -run `ordercss <main entry module path>` |
| 62 | +run `ordercss <...main entry module path>` |
| 63 | + |
| 64 | +#### The mainEntryModulePath Arguments |
| 65 | + |
| 66 | +The ordercss cli is variadic. The lone ***mainEntryModulePath*** is a required argument set bearing the file location(s) of one or many module(s) whose dependency graph(s) would be inspected for non-referenced css module imports and curated. The expected parameter value for each argument item is the absolute path to the entry module file or the entry module file path relative to the current working directory. |
60 | 67 |
|
61 | | -#### The mainEntryModulePath Argument |
| 68 | +Note: the motivation behind the support for the variadic functionality is the accommodation for breaks in the in the import/require sequence. One good example of this is the disconnect between the next.js pages/_app.js and page/<specific_page>.js. For such a scenario, the following cli command is applicable: |
62 | 69 |
|
63 | | -The lone ***mainEntryModulePath*** is a required argument bearing the file location of a module whose dependency graph would be inspected for non-referenced css module imports and curated. The expected parameter value is either the absolute path to the entry module file or the entry module file path relative to the current working directory. |
| 70 | +`ordercss <pages dirname>/pages/_app.js <pages dirname>/pages/<specific page>.js` |
64 | 71 |
|
| 72 | +The resolution of the arguments into a single heirarchized CSS import list is carried out in a LIFO manner. The resulting css manifest module is created for the module residing in and stored in the parent directory of the last path argument. |
65 | 73 |
|
66 | 74 | # Prologue |
67 | 75 |
|
|
0 commit comments