-
Notifications
You must be signed in to change notification settings - Fork 415
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add a CLI and expose the node API (#227)
- Loading branch information
Showing
12 changed files
with
297 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| /* eslint-disable import/no-unresolved */ | ||
|
|
||
| module.exports = require('../lib/cli'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # CLI | ||
|
|
||
| Linaria CLI allows you to extract CSS from your source files using a command line. | ||
|
|
||
| ### Usage | ||
|
|
||
| ```bash | ||
| yarn linaria [options] <file1> [<fileN>...] | ||
| ``` | ||
|
|
||
| Option `-o, --out-dir <dir>` __is always required__. | ||
|
|
||
| You can also use glob for specifying files to process: | ||
|
|
||
| ```bash | ||
| yarn linaria -o styles src/component/**/*.js | ||
| # or multiple globs | ||
| yarn linaria -o styles src/component/**/*.js src/screens/**/*.js | ||
| ``` | ||
|
|
||
| CLI supports adding a require statement for generated CSS file automatically: | ||
|
|
||
| ```bash | ||
| yarn linaria -o out-dir --source-root src --insert-css-requires dist src/**/*.js | ||
| ``` | ||
|
|
||
| where `source-root` is directory with source JS files and `insert-css-requires` has directory with transpiled/compiled JS files. | ||
|
|
||
| ### Options | ||
|
|
||
| * `-o, --out-dir <dir>` (__required__) - Output directory for the extracted CSS files | ||
| * `-s, --source-maps` - Generate source maps for the CSS files | ||
| * `-r, --source-root <dir>` - Directory containing the source JS files | ||
| * `-i, --insert-css-requires <dir>` - Directory containing JS files to insert require statements for the CSS files (__works only if `-r, --source-root` is provided__) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| /* eslint-disable import/no-unresolved */ | ||
|
|
||
| module.exports = require('./lib/node'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| /* @flow */ | ||
|
|
||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| const mkdirp = require('mkdirp'); | ||
| const glob = require('glob'); | ||
| const yargs = require('yargs'); | ||
| const transform = require('./transform'); | ||
|
|
||
| const { argv } = yargs | ||
| .usage('Usage: $0 [options] <files ...>') | ||
| .option('out-dir', { | ||
| alias: 'o', | ||
| type: 'string', | ||
| description: 'Output directory for the extracted CSS files', | ||
| demandOption: true, | ||
| requiresArg: true, | ||
| }) | ||
| .option('source-maps', { | ||
| alias: 's', | ||
| type: 'boolean', | ||
| description: 'Generate source maps for the CSS files', | ||
| default: false, | ||
| }) | ||
| .option('source-root', { | ||
| alias: 'r', | ||
| type: 'string', | ||
| description: 'Directory containing the source JS files', | ||
| requiresArg: true, | ||
| }) | ||
| .option('insert-css-requires', { | ||
| alias: 'i', | ||
| type: 'string', | ||
| description: | ||
| 'Directory containing JS files to insert require statements for the CSS files', | ||
| requiresArg: true, | ||
| }) | ||
| .implies('insert-css-requires', 'source-root') | ||
| .alias('help', 'h') | ||
| .alias('version', 'v') | ||
| .strict(); | ||
|
|
||
| processFiles(argv._, { | ||
| outDir: argv['out-dir'], | ||
| sourceMaps: argv['source-maps'], | ||
| sourceRoot: argv['source-root'], | ||
| insertCssRequires: argv['insert-css-requires'], | ||
| }); | ||
|
|
||
| type Options = { | ||
| outDir: string, | ||
| sourceMaps?: boolean, | ||
| sourceRoot?: string, | ||
| insertCssRequires?: string, | ||
| }; | ||
|
|
||
| function processFiles(files: string[], options: Options) { | ||
| let count = 0; | ||
|
|
||
| const resolvedFiles = files.reduce( | ||
| (acc, pattern) => [...acc, ...glob.sync(pattern, { absolute: true })], | ||
| [] | ||
| ); | ||
|
|
||
| resolvedFiles.forEach(filename => { | ||
| const outputFilename = resolveOutputFilename(filename, options.outDir); | ||
|
|
||
| const { cssText, sourceMap, cssSourceMapText } = transform( | ||
| fs.readFileSync(filename).toString(), | ||
| { | ||
| filename, | ||
| outputFilename, | ||
| pluginOptions: {}, | ||
| } | ||
| ); | ||
|
|
||
| if (cssText) { | ||
| mkdirp.sync(path.dirname(outputFilename)); | ||
|
|
||
| const cssContent = | ||
| options.sourceMaps && sourceMap | ||
| ? `${cssText}\n/*# sourceMappingURL=${outputFilename}.map */` | ||
| : cssText; | ||
|
|
||
| fs.writeFileSync(outputFilename, cssContent); | ||
|
|
||
| if ( | ||
| options.sourceMaps && | ||
| sourceMap && | ||
| typeof cssSourceMapText !== 'undefined' | ||
| ) { | ||
| fs.writeFileSync(`${outputFilename}.map`, cssSourceMapText); | ||
| } | ||
|
|
||
| if (options.insertCssRequires && options.sourceRoot) { | ||
| const inputFilename = path.resolve( | ||
| options.insertCssRequires, | ||
| path.relative(options.sourceRoot, filename) | ||
| ); | ||
|
|
||
| const requireStatement = `\nrequire('${path.relative( | ||
| path.dirname(inputFilename), | ||
| outputFilename | ||
| )}');`; | ||
|
|
||
| const inputContent = fs.readFileSync(inputFilename, 'utf-8'); | ||
|
|
||
| if (!inputContent.trim().endsWith(requireStatement)) { | ||
| fs.writeFileSync( | ||
| inputFilename, | ||
| `${inputContent}\n${requireStatement}` | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| count++; | ||
| } | ||
| }); | ||
|
|
||
| console.log(`Successfully extracted ${count} CSS files.`); | ||
| } | ||
|
|
||
| function resolveOutputFilename(filename: string, outDir: string) { | ||
| const folderStructure = path.relative(process.cwd(), path.dirname(filename)); | ||
| const outputBasename = path | ||
| .basename(filename) | ||
| .replace(path.extname(filename), '.css'); | ||
|
|
||
| return path.join(outDir, folderStructure, outputBasename); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| /* @flow */ | ||
|
|
||
| module.exports.transform = require('./transform'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.