Merge branch 'master' into feat/node-api-and-cli

README.md

@@ -59,6 +59,8 @@ Optionally, add the `linaria/babel` preset to your Babel configuration at the en
 }
 ```
 
+See [Configuration](/docs/CONFIGURATION.md) to customize how Linaria processes your files.
+
 ## Syntax
 
 Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:
@@ -123,13 +125,14 @@ Dynamic styles will be applied using CSS custom properties (aka CSS variables) a
 - [API and usage](/docs/API.md)
   - [Client APIs](/docs/API.md#client-apis)
   - [Server APIs](/docs/API.md#server-apis)
-- [Configuring Babel](/docs/BABEL_PRESET.md)
+- [Configuration](/docs/CONFIGURATION.md)
 - [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)
 - [Theming](/docs/THEMING.md)
 - [Critical CSS extraction](/docs/CRITICAL_CSS.md)
 - [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)
   - [Webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
   - [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)
+- [CLI](/docs/CLI.md)
 - [Linting](/docs/LINTING.md)
 - [How it works](/docs/HOW_IT_WORKS.md)
 - [Example](/website)
@@ -190,9 +193,9 @@ Special thanks to [@kentcdodds](https://github.com/kentcdodds) for his babel plu
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars2.githubusercontent.com/u/17573635?v=4" width="100px;"/><br /><sub>Paweł Trysła</sub>](https://twitter.com/_zamotany)<br />[💻](https://github.com/satya164/linara/commits?author=zamotany "Code") [📖](https://github.com/satya164/linara/commits?author=zamotany "Documentation") [🤔](#ideas-zamotany "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/1174278?v=4" width="100px;"/><br /><sub>Satyajit Sahoo</sub>](https://medium.com/@satya164)<br />[💻](https://github.com/satya164/linara/commits?author=satya164 "Code") [🤔](#ideas-satya164 "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/5106466?v=4" width="100px;"/><br /><sub>Michał Pierzchała</sub>](https://github.com/thymikee)<br />[💻](https://github.com/satya164/linara/commits?author=thymikee "Code") [📖](https://github.com/satya164/linara/commits?author=thymikee "Documentation") [🤔](#ideas-thymikee "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/1909761?v=4" width="100px;"/><br /><sub>Lucas</sub>](https://lcs.sh)<br />[📖](https://github.com/satya164/linara/commits?author=AgtLucas "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/680439?v=4" width="100px;"/><br /><sub>Alexey Pronevich</sub>](https://github.com/pronevich)<br />[📖](https://github.com/satya164/linara/commits?author=pronevich "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/18573330?v=4" width="100px;"/><br /><sub>Wojtek Szafraniec</sub>](https://github.com/wojteg1337)<br />[💻](https://github.com/satya164/linara/commits?author=wojteg1337 "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub>Tushar Sonawane</sub>](https://twitter.com/tushkiz)<br />[📖](https://github.com/satya164/linara/commits?author=Tushkiz "Documentation") [💡](#example-Tushkiz "Examples") |
-| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [<img src="https://avatars2.githubusercontent.com/u/774577?v=4" width="100px;"/><br /><sub>Ferran Negre</sub>](http://twitter.com/ferrannp)<br />[📖](https://github.com/satya164/linara/commits?author=ferrannp "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/8135252?v=4" width="100px;"/><br /><sub>Jakub Beneš</sub>](https://jukben.cz)<br />[💻](https://github.com/satya164/linara/commits?author=jukben "Code") [📖](https://github.com/satya164/linara/commits?author=jukben "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/13413409?v=4" width="100px;"/><br /><sub>Oscar Busk</sub>](https://github.com/oBusk)<br />[🐛](https://github.com/satya164/linara/issues?q=author%3AoBusk "Bug reports") [💻](https://github.com/satya164/linara/commits?author=oBusk "Code") | [<img src="https://avatars3.githubusercontent.com/u/18584155?v=4" width="100px;"/><br /><sub>Dawid</sub>](https://github.com/Trancever)<br />[💻](https://github.com/satya164/linara/commits?author=Trancever "Code") [📖](https://github.com/satya164/linara/commits?author=Trancever "Documentation") |
+| [<img src="https://avatars2.githubusercontent.com/u/17573635?v=4" width="100px;"/><br /><sub>Paweł Trysła</sub>](https://twitter.com/_zamotany)<br />[💻](https://github.com/satya164/linara/commits?author=zamotany "Code") [📖](https://github.com/satya164/linara/commits?author=zamotany "Documentation") [🤔](#ideas-zamotany "Ideas, Planning, & Feedback") |      [<img src="https://avatars2.githubusercontent.com/u/1174278?v=4" width="100px;"/><br /><sub>Satyajit Sahoo</sub>](https://medium.com/@satya164)<br />[💻](https://github.com/satya164/linara/commits?author=satya164 "Code") [🤔](#ideas-satya164 "Ideas, Planning, & Feedback")       | [<img src="https://avatars2.githubusercontent.com/u/5106466?v=4" width="100px;"/><br /><sub>Michał Pierzchała</sub>](https://github.com/thymikee)<br />[💻](https://github.com/satya164/linara/commits?author=thymikee "Code") [📖](https://github.com/satya164/linara/commits?author=thymikee "Documentation") [🤔](#ideas-thymikee "Ideas, Planning, & Feedback") |                                             [<img src="https://avatars1.githubusercontent.com/u/1909761?v=4" width="100px;"/><br /><sub>Lucas</sub>](https://lcs.sh)<br />[📖](https://github.com/satya164/linara/commits?author=AgtLucas "Documentation")                                              | [<img src="https://avatars0.githubusercontent.com/u/680439?v=4" width="100px;"/><br /><sub>Alexey Pronevich</sub>](https://github.com/pronevich)<br />[📖](https://github.com/satya164/linara/commits?author=pronevich "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/18573330?v=4" width="100px;"/><br /><sub>Wojtek Szafraniec</sub>](https://github.com/wojteg1337)<br />[💻](https://github.com/satya164/linara/commits?author=wojteg1337 "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub>Tushar Sonawane</sub>](https://twitter.com/tushkiz)<br />[📖](https://github.com/satya164/linara/commits?author=Tushkiz "Documentation") [💡](#example-Tushkiz "Examples") |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                 [<img src="https://avatars2.githubusercontent.com/u/774577?v=4" width="100px;"/><br /><sub>Ferran Negre</sub>](http://twitter.com/ferrannp)<br />[📖](https://github.com/satya164/linara/commits?author=ferrannp "Documentation")                                                                 | [<img src="https://avatars3.githubusercontent.com/u/8135252?v=4" width="100px;"/><br /><sub>Jakub Beneš</sub>](https://jukben.cz)<br />[💻](https://github.com/satya164/linara/commits?author=jukben "Code") [📖](https://github.com/satya164/linara/commits?author=jukben "Documentation") |                                  [<img src="https://avatars2.githubusercontent.com/u/13413409?v=4" width="100px;"/><br /><sub>Oscar Busk</sub>](https://github.com/oBusk)<br />[🐛](https://github.com/satya164/linara/issues?q=author%3AoBusk "Bug reports") [💻](https://github.com/satya164/linara/commits?author=oBusk "Code")                                  | [<img src="https://avatars3.githubusercontent.com/u/18584155?v=4" width="100px;"/><br /><sub>Dawid</sub>](https://github.com/Trancever)<br />[💻](https://github.com/satya164/linara/commits?author=Trancever "Code") [📖](https://github.com/satya164/linara/commits?author=Trancever "Documentation") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

docs/BUNDLERS_INTEGRATION.md

@@ -86,7 +86,7 @@ The loader accepts the following options:
 - `sourceMap: boolean` (default: `false`) - Setting this option to `true` will include source maps for the generated CSS so that you can see where source of the class name in devtools. We recommend to enable this only in development mode because the sourcemap is inlined into the CSS files.
 - `cacheDirectory: string` (default: `'.linaria-cache'`) - Path to the directory where the loader will output the intermediate CSS files. You can pass a relative or absolute directory path. Make sure the directory is inside the working directory for things to work properly. **You should add this directory to `.gitignore` so you don't accidentally commit them.**
 
-In addition to the above options, the loader also accepts all the options accepted by the [babel preset](/docs/BABEL_PRESET.md).
+In addition to the above options, the loader also accepts all the options supported in the [configuration file](/docs/CONFIGURATION.md).
 
 You can pass options to the loader like so:
 

docs/CLI.md

@@ -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__)

docs/CONFIGURATION.md

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

docs/LINTING.md

@@ -29,6 +29,8 @@ Here's the example `.stylelintrc` configuration file:
 
 Please refer to the [official stylelint documentation](https://stylelint.io/user-guide/configuration/) for more info about configuration.
 
+The preprocessor will use the [options from the configuration file](/docs/CONFIGURATION.md) for processing your files.
+
 ### Linting your files
 
 Add the following to your `package.json` scripts:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linaria",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Blazing fast zero-runtime CSS in JS library",
   "main": "lib/index.js",
   "bin": "./bin/linaria.js",
@@ -85,6 +85,7 @@
     "@babel/register": "^7.0.0",
     "dedent": "^0.7.0",
     "glob": "^7.1.3",
+    "cosmiconfig": "^5.0.7",
     "loader-utils": "^1.1.0",
     "mkdirp": "^0.5.1",
     "postcss": "^7.0.2",

src/babel/evaluate.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import type { Options as PluginOptions } from './extract';
+
 const generator = require('@babel/generator').default;
 const babel = require('@babel/core');
 const Module = require('./module');
@@ -59,7 +61,7 @@ module.exports = function evaluate(
   t: any,
   filename: string,
   transformer?: (text: string) => { code: string },
-  options?: { ignore?: RegExp }
+  options?: PluginOptions
 ) {
   const requirements = [];
 
@@ -159,14 +161,14 @@ module.exports = function evaluate(
           return babel.transformSync(text, {
             caller: { name: 'linaria', evaluate: true },
             filename: this.filename,
+            presets: [[require.resolve('./index'), options]],
             plugins: [
               // Include this plugin to avoid extra config when using { module: false } for webpack
               '@babel/plugin-transform-modules-commonjs',
               '@babel/plugin-proposal-export-namespace-from',
               // We don't support dynamic imports when evaluating, but don't wanna syntax error
               // This will replace dynamic imports with an object that does nothing
               require.resolve('./dynamic-import-noop'),
-              [require.resolve('./extract'), { evaluate: true }],
             ],
           });
         };

src/babel/extract.js

@@ -168,20 +168,12 @@ type State = {|
 |};
 
 export type Options = {
-  displayName?: boolean,
-  evaluate?: boolean,
-  ignore?: RegExp,
+  displayName: boolean,
+  evaluate: boolean,
+  ignore: RegExp,
 };
 
-module.exports = function extract(babel: any, options: Options = {}) {
-  // Set some defaults for options
-  options = {
-    displayName: false,
-    evaluate: true,
-    ignore: /node_modules/,
-    ...options,
-  };
-
+module.exports = function extract(babel: any, options: Options) {
   const { types: t } = babel;
 
   return {
@@ -447,7 +439,9 @@ module.exports = function extract(babel: any, options: Options = {}) {
               let { value } = evaluate(
                 styled.component,
                 t,
-                state.file.opts.filename
+                state.file.opts.filename,
+                undefined,
+                options
               );
 
               while (isValidElementType(value) && value.className) {

src/babel/index.js

@@ -1,4 +1,21 @@
+const cosmiconfig = require('cosmiconfig');
+
+const explorer = cosmiconfig('linaria');
+
 module.exports = function linaria(context, options) {
+  // Load configuration file
+  const result = explorer.searchSync();
+
+  // Set some defaults for options
+  // eslint-disable-next-line no-param-reassign
+  options = {
+    displayName: false,
+    evaluate: true,
+    ignore: /node_modules/,
+    ...(result ? result.config : null),
+    ...options,
+  };
+
   return {
     plugins: [[require('./extract'), options]],
   };

src/cli.js

@@ -70,7 +70,7 @@ function processFiles(files: string[], options: Options) {
     const { cssText, sourceMap, cssSourceMapText } = transform(
       fs.readFileSync(filename).toString(),
       {
-        inputFilename: filename,
+        filename,
         outputFilename,
         pluginOptions: {},
       }

src/loader.js

@@ -23,10 +23,9 @@ module.exports = function loader(content: string, inputSourceMap: ?Object) {
   );
 
   const result = transform(content, {
-    inputFilename: this.resourcePath,
+    filename: this.resourcePath,
     inputSourceMap: inputSourceMap != null ? inputSourceMap : undefined,
     outputFilename,
-    /* $FlowFixMe */
     pluginOptions: rest,
   });