Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use project's babel config when parsing #261

Merged
merged 1 commit into from
Oct 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions docs/BUNDLERS_INTEGRATION.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# Bundlers Integration

## webpack
## Pre-requisites

If you use Babel in your project, make sure to have a [config file for Babel](https://babeljs.io/docs/en/config-files) in your project root with the plugins and presets you use. Otherwise Linaria won't be able to parse the code.

## Bundlers

### webpack

To use Linaria wih webpack, in your webpack config, add `linaria/loader`:

Expand Down Expand Up @@ -75,7 +81,7 @@ If you want to hot reload your styles when they change, you will also need to co

Linaria integrates with your CSS pipeline, so you can always perform additional operations on the CSS, for example, using [postcss](https://postcss.org/) plugins such as [clean-css](https://github.com/jakubpawlowicz/clean-css) to further minify your CSS.

## Rollup
### Rollup

To use Linaria with Rollup, you need to use it together with a plugin which handles CSS files, such as `rollup-plugin-css-only`:

Expand Down
51 changes: 4 additions & 47 deletions src/transform.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,60 +62,17 @@ module.exports = function transform(
};
}

const parserOpts = {
// Enable these options so we don't error if user is using these
// https://babeljs.io/docs/en/babel-parser#options
allowImportExportEverywhere: true,
allowAwaitOutsideFunction: true,
allowReturnOutsideFunction: true,
allowSuperOutsideMethod: true,

// Specify all the plugins manually since there's no way to infer them
// https://babeljs.io/docs/en/next/babel-parser.html#plugins
plugins: [
// ECMAScript proposals
'asyncGenerators',
'bigInt',
'classProperties',
'classPrivateProperties',
'classPrivateMethods',
['decorators', { decoratorsBeforeExport: true }],
'doExpressions',
'dynamicImport',
'exportDefaultFrom',
'exportNamespaceFrom',
'functionBind',
'functionSent',
'importMeta',
'logicalAssignment',
'nullishCoalescingOperator',
'numericSeparator',
'objectRestSpread',
'optionalCatchBinding',
'optionalChaining',
['pipelineOperator', { proposal: 'minimal' }],
'throwExpressions',

// Language extensions
'jsx',
],
};

if (/\.tsx?/.test(filename)) {
parserOpts.plugins.push('typescript');
} else {
parserOpts.plugins.push('flow');
}

const { metadata, code, map } = babel.transformSync(content, {
// Parse the code first so babel uses user's babel config for parsing
// We don't want to use user's config when transforming the code
const ast = babel.parseSync(content, { filename });
const { metadata, code, map } = babel.transformFromAstSync(ast, content, {
filename,
presets: [[require.resolve('./babel'), options]],
babelrc: false,
configFile: false,
sourceMaps: true,
sourceFileName: filename,
inputSourceMap,
parserOpts,
});

if (!metadata.linaria) {
Expand Down