Skip to content

Commit 2913d4e

Browse files
committed
update parser to handle variadic input
1 parent 6097add commit 2913d4e

13 files changed

Lines changed: 180 additions & 80 deletions

File tree

debug.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
require = require( 'esm' )( module );
2-
require( './src/cli' ).runCli( `${ process.cwd() }/test/stub-modules/index.js` );
2+
require( './src/cli' ).runCli([ `${ process.cwd() }/test/stub-modules/index.js` ]);

package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"chalk": "^4.1.0",
1111
"esm": "^3.2.25",
1212
"lodash.get": "^4.4.2",
13-
"lodash.isempty": "^4.4.0"
13+
"lodash.isempty": "^4.4.0",
14+
"strip-comments": "^2.0.1"
1415
},
1516
"devDependencies": {
1617
"@babel/core": "^7.12.10",

readme.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,25 @@
44

55
**Install:** npm i -D @webkrafters/ordercss
66

7-
**Usage:** `ordercss <main entry module path>`
7+
**Usage:** `ordercss <...main entry module path>`
88

99
# Intro
1010

1111
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.
1212

1313
# Mechanics
1414

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.
1616

1717
- 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)
1818

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:
2021

2122
<main entry script module filename>_css_manifest.<js or ts accoring to main entry script module extension>
2223

24+
Please be sure to see the [Usage Steps](#usage-steps) section below for very crucial details.
25+
2326
## Special cases
2427

2528
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
5659

5760
cd into the project root or any other preferred location within the project.
5861

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.
6067

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:
6269

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`
6471

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.
6573

6674
# Prologue
6775

src/cli.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,15 @@ import isEmpty from 'lodash.isempty';
66

77
import { generateOutputModule, getCssImportOrder } from '.';
88

9-
export const runCli = entryModulePath => {
10-
const realEntryPath = resolve( process.cwd(), entryModulePath );
11-
const orderedCssPaths = getCssImportOrder( realEntryPath );
9+
const getAbsolutePath = (() => {
10+
const cwd = process.cwd();
11+
return path => resolve( cwd, path );
12+
})();
13+
14+
/** @param {FilePath[]} entryModulePaths */
15+
export const runCli = entryModulePaths => {
16+
const realEntryPaths = entryModulePaths.map( getAbsolutePath );
17+
const orderedCssPaths = getCssImportOrder( realEntryPaths );
1218
if( isEmpty( orderedCssPaths ) ) {
1319
console.warn( chalk.yellow.bold(
1420
'No compliantly commented CSS imports detected in the generated dependency graph.'
@@ -19,7 +25,7 @@ export const runCli = entryModulePath => {
1925
console.log( orderedCssPaths.join( '\n' ) );
2026
console.info( chalk.blue.bold( 'Listing completed.' ) );
2127
try {
22-
generateOutputModule( orderedCssPaths, realEntryPath );
28+
generateOutputModule( orderedCssPaths, realEntryPaths.slice( -1 ).pop() );
2329
console.log( chalk.green.bold( 'Module update completed.' ) );
2430
} catch ( e ) {
2531
console.log( '\n\n%s', chalk.yellow.bold( 'Unsuccessful module update attempt.' ) );
@@ -30,7 +36,7 @@ export const runCli = entryModulePath => {
3036
};
3137

3238
const cli = () => {
33-
const entryModulePath = process.argv[ 2 ];
39+
const entryModulePath = process.argv.slice( 2 );
3440
try {
3541
if( isEmpty( entryModulePath ) ) {
3642
throw new TypeError( 'No entry module path supplied.' );
@@ -45,3 +51,5 @@ const cli = () => {
4551
};
4652

4753
export default cli;
54+
55+
/** @typedef {import("./order-imports/index").FilePath} FilePath */

src/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@ const getCssModuleCalc = outputFilePath => {
2727
};
2828

2929
/**
30-
* @param {FilePath} entryModulePath root module absolute path (in a next.js application: could refer to the current page module)
30+
* @param {FilePath|FilePaths[]} entryModulePath root module absolute path(s) (in a next.js application: could refer to the current page module; perhaps preceded by the _app.js file path.)
3131
* @returns {FilePath[]} aggregated queue containing absolute paths to css import hierarchy from the leaf to the entry module.
32+
* @see readme.md for further details on the entryModulePath argument
3233
*/
3334
export const getCssImportOrder = entryModulePath => ( new Order( entryModulePath ) ).calculate();
3435

0 commit comments

Comments
 (0)