-
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.
refactor: replace commander with yargs yargs has better validation options and seems easier to use than commander. the parsed args are typed as well, which is a bonus fix: pass options when evaluating a component chore: release 1.0.0-beta.4 Update src/cli.js Co-Authored-By: zamotany <zamotany@users.noreply.github.com> fix typo Co-Authored-By: zamotany <zamotany@users.noreply.github.com> feat: support configuring linaria with a config file The babel preset is used in several ways: - babel config - webpack loader - rollup plugin - stylelint preprocessor Having a config file makes it possible to configure it in one place instead of configuring separately for each tool. Merge branch 'master' into feat/node-api-and-cli
- Loading branch information
Showing
20 changed files
with
436 additions
and
105 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 was deleted.
Oops, something went wrong.
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,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,51 @@ | ||
| # Configuration | ||
|
|
||
| Linaria can be customized using a JavaScript, JSON or YAML file. This can be in form of: | ||
|
|
||
| - `linaria.config.js` JS file exporting the object (recommended). | ||
| - `linaria` property in a `package.json` file. | ||
| - `.linariarc` file with JSON or YAML syntax. | ||
| - `.linariarc.json`, `.linariarc.yaml`, `.linariarc.yml`, or `.linariarc.js` file. | ||
|
|
||
| Example `linaria.config.js`: | ||
|
|
||
| ```js | ||
| module.exports = { | ||
| evaluate: true, | ||
| displayName: false, | ||
| } | ||
| ``` | ||
|
|
||
| ## Options | ||
|
|
||
| - `evaluate: boolean` (default: `true`): | ||
|
|
||
| Enabling this will evaluate dynamic expressions in the CSS. You need to enable this if you want to use imported variables in the CSS or interpolate other components. Enabling this also ensures that your styled components wrapping other styled components will have the correct specificity and override styles properly. | ||
|
|
||
| - `displayName: boolean` (default: `false`): | ||
|
|
||
| Enabling this will add a display name to generated class names, e.g. `.Title_abcdef` instead of `.abcdef'. It is disabled by default to generate smaller CSS files. | ||
|
|
||
| - `ignore: RegExp` (default: `/node_modules/`): | ||
|
|
||
| If you specify a regex here, files matching the regex won't be processed, i.e. the matching files won't be transformed with Babel during evaluation. If you need to compile certain modules under `/node_modules/`, it's recommended to do it on a module by module basis for faster transforms, e.g. `ignore: /node_modules[\/\\](?!some-module|other-module)/`. | ||
|
|
||
| ## `linaria/babel` preset | ||
|
|
||
| The preset pre-processes and evaluates the CSS. The bundler plugins use this preset under the hood. You also might want to use this preset if you import the components outside of the files handled by your bundler, such as on your server or in unit tests. | ||
|
|
||
| To use this preset, add `linaria/babel` to your Babel configuration at the end of the presets list: | ||
|
|
||
| `.babelrc`: | ||
|
|
||
| ```diff | ||
| { | ||
| "presets": [ | ||
| "@babel/preset-env", | ||
| "@babel/preset-react", | ||
| + "linaria/babel" | ||
| ] | ||
| } | ||
| ``` | ||
|
|
||
| The babel preset can accept the same options supported by the configuration file, however it's recommended to use the configuration file directly. |
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 @@ | ||
| /* 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
Oops, something went wrong.