FP-1648: Build Individual Stylesheets — ⚠️ API Change

.gitignore

@@ -1,7 +1,7 @@
 # Project
 node_modules
 .postcssrc.yml
-dist/_tests.css
+dist/_tests
 
 # IDE
 .vscode

README.md

@@ -24,8 +24,8 @@ Options:
 Commands:
   build [options]    build stylesheets with TACC standard process:
   - "post-css" plugins
-  - custom input dir
-  - custom output dir
+  - custom input path
+  - custom output path
   - custom configs
   - prepend build id
 
@@ -39,35 +39,44 @@ Usage: core-styles build [options]
 
 build stylesheets with TACC standard process:
 - "post-css" plugins
-- custom input dir
-- custom output dir
+- custom input path
+- custom output path
 - custom configs
+- prepend build id
 
 Options:
-  -i, --input-dir <path>           parse source from which directory¹
-  -o, --output-dir <path>          output CSS files to which directory¹
-  -e, --file-ext <ext>             extensions to parse (default: "css")
+  -i, --input <path>               parse source at which path¹
+  -o, --output <path>              output CSS files to which path¹
   -v, --verbose                    print more info during build process
   -c, --custom-configs <paths...>  extend base config with YAML files²³
   -b, --build-id <identifier>      any value to identify the build (default: version of app)
+  -m, --base-mirror-dir <path>     if input folder structure is mirrored, this path is not⁴
   -h, --help                       display help for command
 
 Notes:
-  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" e.g.
+  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" i.e.
 
     given input
     - "input_dir/x.css"
     - "input_dir/sub_dir_a/y.css"
+    - "input_dir"
+    - "input_dir/**/*"
 
     expect output
     - "output_dir/x.css"
     - "output_dir/sub_dir_a/y.css"
+    - "output_dir/..." (all files from input not in sub-directories)
+    - "output_dir/.../..." (all files from input as nested)
 
   ² The file formats are like ".postcssrc.yml" from
     https://github.com/postcss/postcss-load-config#postcssrc
 
   ³ The first file is merged on top of the base config.
     Each successive file overwrites the file before it.
+
+  ⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
+    Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
+    Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".
 ```
 
 ### Module

bin/build.js

@@ -11,23 +11,24 @@ process.env.FORCE_COLOR = true
 
 /**
  * Build stylesheets from source CSS
- * @param {string} inputDir - Parse CSS files from which directory
- * @param {string} outputDir - Output CSS files to which directory
+ * @param {string} input - Parse CSS files from which path
+ * @param {string} output - Output CSS files to which path
  * @param {object} [opts={}] - Options
- * @param {object} [opts.fileExt='css'] - Extension of CSS files to parse
+ * @param {string} [opts.baseMirrorDir] - Do not add this path when mirroring
  * @param {string} [opts.configDir] - Custom config directory
  * @param {boolean} [opts.verbose=false] - To print more info from build log
+ * @param {boolean} [opts.verbose=false] - To print more info from build log
  */
-function build(inputDir, outputDir, opts = {}) {
+function build(input, output, opts = {}) {
   // Get data
-  const fileExt = opts.fileExt || 'css';
   const configDir = opts.configDir || `${__dirname}/../`;
   const verbose = (opts.verbose === true) ? '--verbose' : '';
+  const base = (opts.baseMirrorDir) ? `--base "${opts.baseMirrorDir}"` : '';
 
   // Build command
-  const command = `postcss "${inputDir}/*.${fileExt}" --dir "${outputDir}" ${verbose} --config "${configDir}"`;
+  const command = `postcss "${input}" --dir "${output}" ${verbose} --config "${configDir}" ${base}`;
 
-  console.log(`Building stylesheets to ${outputDir}`);
+  console.log(`Building stylesheet(s) to ${output}`);
 
   // Run command
   cmd.runSync(command);

cli.js

@@ -2,7 +2,7 @@
 
 /** CLI to custom build stylesheets and create a version stylesheet */
 
-const { program } = require('commander');
+const { program, Option } = require('commander');
 
 const package = require(process.env.npm_package_json || './package.json');
 
@@ -23,44 +23,52 @@ program
     .command('build')
     .description(`build stylesheets with TACC standard process:
 - "post-css" plugins
-- custom input dir
-- custom output dir
+- custom input path
+- custom output path
 - custom configs
 - prepend build id
     `)
-    .requiredOption('-i, --input-dir <path>',
-        'parse source from which directory¹')
-    .requiredOption('-o, --output-dir <path>',
-        'output CSS files to which directory¹')
-    .option('-e, --file-ext <ext>',
-        'extensions to parse', 'css')
+    .requiredOption('-i, --input <path>',
+        'parse source at which path¹')
+    .requiredOption('-o, --output <path>',
+        'output CSS files to which path¹')
     .option('-v, --verbose',
         'print more info during build process')
     .option('-c, --custom-configs <paths...>',
         `extend base config with YAML files²³`)
     .option('-b, --build-id <identifier>',
         'any value to identify the build (default: version of app)')
+    .option('-m, --base-mirror-dir <path>',
+        'if input folder structure is mirrored, this path is not⁴')
     .addHelpText('after', `
 Notes:
-  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" e.g.
+  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" i.e.
 
     given input
     - "input_dir/x.css"
     - "input_dir/sub_dir_a/y.css"
+    - "input_dir"
+    - "input_dir/**/*"
 
     expect output
     - "output_dir/x.css"
     - "output_dir/sub_dir_a/y.css"
+    - "output_dir/..." (all files from input not in sub-directories)
+    - "output_dir/.../..." (all files from input as nested)
 
   ² The file formats are like ".postcssrc.yml" from
     https://github.com/postcss/postcss-load-config#postcssrc
 
   ³ The first file is merged on top of the base config.
     Each successive file overwrites the file before it.
+
+  ⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
+    Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
+    Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".
     `).action( programOpts => {
-        const { inputDir, outputDir, ...opts } = programOpts;
+        const { input, output, ...opts } = programOpts;
 
-        buildStylesheets( inputDir, outputDir, opts );
+        buildStylesheets( input, output, opts );
     });
 
 

dist/components/README.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */