feat: add node API and cli

bin/linaria.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+/* eslint-disable import/no-unresolved */
+
+module.exports = require('../lib/cli');

node.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/no-unresolved */
+
+module.exports = require('./lib/node');

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0-beta.3",
   "description": "Blazing fast zero-runtime CSS in JS library",
   "main": "lib/index.js",
+  "bin": "./bin/linaria.js",
   "files": [
     "lib/",
     "react.js",
@@ -40,6 +41,7 @@
     "add-contributor": "all-contributors add",
     "prebuild": "del lib",
     "build": "babel src --out-dir lib --ignore '**/__tests__/**,**/__integration-tests__/**,**/__fixtures__/**' --source-maps && flow-copy-source -i '{**/__tests__/**,**/__integration-tests__/**,**/__fixtures__/**}' src lib",
+    "watch": "babel src --out-dir lib --ignore '**/__tests__/**,**/__integration-tests__/**,**/__fixtures__/**' --source-maps --watch",
     "prepare": "yarn build",
     "release": "release-it",
     "now-build": "yarn --cwd website install && yarn --cwd website build",
@@ -82,13 +84,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-modules-commonjs": "^7.1.0",
     "@babel/register": "^7.0.0",
+    "commander": "^2.19.0",
+    "dedent": "^0.7.0",
+    "glob": "^7.1.3",
     "loader-utils": "^1.1.0",
+    "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "postcss": "^7.0.5",
-    "react-is": "^16.5.2",
+    "postcss": "^7.0.2",
+    "react-is": "^16.5.1",
     "rollup-pluginutils": "^2.3.3",
     "source-map": "^0.7.3",
-    "stylis": "^3.5.3"
+    "stylis": "^3.5.4"
   },
   "resolutions": {
     "**/babel-core": "7.0.0-bridge.0"

src/cli.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+/* @flow */
+
+const path = require('path');
+const fs = require('fs');
+const mkdirp = require('mkdirp');
+const glob = require('glob');
+const commander = require('commander');
+const transform = require('./transform');
+
+commander
+  .version(require('../package.json').version)
+  .usage('[options] <file ...>')
+  .option('-o, --out-dir <dir>', 'output directory for the extracted CSS files')
+  .option('-s, --source-maps', 'generate source maps for the CSS files')
+  .option('-r, --source-root <dir>', 'directory contaning the source JS files')
+  .option(
+    '-i, --insert-css-requires <dir>',
+    'directory containing JS files to insert require statements for the CSS files'
+  )
+  .action((file, ...rest) => {
+    if (typeof file !== 'string') {
+      console.error('No files were specified to extract CSS from.\n');
+      commander.help();
+      process.exit(1);
+    }
+
+    const command = rest[rest.length - 1];
+    const files = [file, ...rest.slice(0, -1)];
+
+    if (!command.outDir) {
+      console.error('--out-dir must be specified.\n');
+      commander.help();
+      process.exit(1);
+    }
+
+    if (command.insertCssRequires && !command.sourceRoot) {
+      console.error(
+        '--source-root must be specified when --insert-css-requires is specified.\n'
+      );
+      commander.help();
+      process.exit(1);
+    }
+
+    processFiles(files, {
+      outDir: command.outDir,
+      sourceMaps: command.sourceMaps,
+      sourceRoot: command.sourceRoot,
+      insertCssRequires: command.insertCssRequires,
+    });
+  })
+  .parse(process.argv);
+
+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(),
+      {
+        inputFilename: 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);
+}

src/loader.js

@@ -1,11 +1,14 @@
+/* @flow */
+
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
+/* $FlowFixMe */
 const Module = require('module');
 const loaderUtils = require('loader-utils');
 const transform = require('./transform');
 
-module.exports = function loader(content, inputSourceMap) {
+module.exports = function loader(content: string, inputSourceMap: ?Object) {
   const { sourceMap, cacheDirectory = '.linaria-cache', ...rest } =
     loaderUtils.getOptions(this) || {};
 
@@ -19,20 +22,20 @@ module.exports = function loader(content, inputSourceMap) {
     )
   );
 
-  const result = transform(
-    this.resourcePath,
-    content,
-    rest,
-    inputSourceMap,
-    outputFilename
-  );
+  const result = transform(content, {
+    inputFilename: this.resourcePath,
+    inputSourceMap: inputSourceMap != null ? inputSourceMap : undefined,
+    outputFilename,
+    /* $FlowFixMe */
+    pluginOptions: rest,
+  });
 
   if (result.cssText) {
     let { cssText } = result;
 
     if (sourceMap) {
       cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
-        result.cssSourceMapText
+        result.cssSourceMapText || ''
       ).toString('base64')}*/`;
     }
 

src/node.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+module.exports.transform = require('./transform');

src/rollup.js

@@ -33,7 +33,10 @@ module.exports = function linaria({
     transform(code: string, id: string) {
       if (!filter(id)) return;
 
-      const result = transform(id, code, rest);
+      const result = transform(code, {
+        inputFilename: id,
+        pluginOptions: rest,
+      });
 
       if (!result.cssText) return;
 

src/stylelint/preprocessor.js

@@ -11,13 +11,14 @@ function preprocessor() {
 
   return {
     code(input: string, filename: string) {
-      /* eslint-disable prefer-destructuring */
-
       let result;
 
       try {
-        result = transform(filename, input, {
-          evaluate: true,
+        result = transform(input, {
+          inputFilename: filename,
+          pluginOptions: {
+            evaluate: true,
+          },
         });
       } catch (e) {
         // Ignore parse errors

src/transform.js

@@ -31,45 +31,50 @@ type Result = {
   }>,
 };
 
+type Options = {
+  inputFilename: string,
+  outputFilename?: string,
+  inputSourceMap?: Object,
+  pluginOptions?: PluginOptions,
+};
+
 const STYLIS_DECLARATION = 1;
 
-module.exports = function transform(
-  filename: string,
-  content: string,
-  options: PluginOptions,
-  inputSourceMap?: Object,
-  outputFilename?: string
-): Result {
+module.exports = function transform(code: string, options: Options): Result {
   // Check if the file contains `css` or `styled` words first
   // Otherwise we should skip transforming
-  if (!/\b(styled|css)/.test(content)) {
+  if (!/\b(styled|css)/.test(code)) {
     return {
-      code: content,
-      sourceMap: inputSourceMap,
+      code,
+      sourceMap: options.inputSourceMap,
     };
   }
 
   // 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 ast = babel.parseSync(code, {
+    filename: options.inputFilename,
     caller: { name: 'linaria' },
   });
 
-  const { metadata, code, map } = babel.transformFromAstSync(ast, content, {
-    filename,
-    presets: [[require.resolve('./babel'), options]],
-    babelrc: false,
-    configFile: false,
-    sourceMaps: true,
-    sourceFileName: filename,
-    inputSourceMap,
-  });
+  const { metadata, code: transformedCode, map } = babel.transformFromAstSync(
+    ast,
+    code,
+    {
+      filename: options.inputFilename,
+      presets: [[require.resolve('./babel'), options.pluginOptions]],
+      babelrc: false,
+      configFile: false,
+      sourceMaps: true,
+      sourceFileName: options.inputFilename,
+      inputSourceMap: options.inputSourceMap,
+    }
+  );
 
   if (!metadata.linaria) {
     return {
-      code: content,
-      sourceMap: inputSourceMap,
+      code,
+      sourceMap: options.inputSourceMap,
     };
   }
 
@@ -79,7 +84,7 @@ module.exports = function transform(
   let cssText = '';
 
   stylis.use(null)((context, decl) => {
-    if (context === STYLIS_DECLARATION && outputFilename) {
+    if (context === STYLIS_DECLARATION && options.outputFilename) {
       // When writing to a file, we need to adjust the relative paths inside url(..) expressions
       // It'll allow css-loader to resolve an imported asset properly
       return decl.replace(
@@ -89,9 +94,9 @@ module.exports = function transform(
           // Replace asset path with new path relative to the output CSS
           path.relative(
             /* $FlowFixMe */
-            path.dirname(outputFilename),
+            path.dirname(options.outputFilename),
             // Get the absolute path to the asset from the path relative to the JS file
-            path.resolve(path.dirname(filename), p2)
+            path.resolve(path.dirname(options.inputFilename), p2)
           ) +
           p3
       );
@@ -115,7 +120,7 @@ module.exports = function transform(
   });
 
   return {
-    code,
+    code: transformedCode,
     cssText,
     rules,
     replacements,
@@ -125,14 +130,16 @@ module.exports = function transform(
     get cssSourceMapText() {
       if (mappings && mappings.length) {
         const generator = new SourceMapGenerator({
-          file: filename.replace(/\.js$/, '.css'),
+          file: options.inputFilename.replace(/\.js$/, '.css'),
         });
 
         mappings.forEach(mapping =>
-          generator.addMapping(Object.assign({}, mapping, { source: filename }))
+          generator.addMapping(
+            Object.assign({}, mapping, { source: options.inputFilename })
+          )
         );
 
-        generator.setSourceContent(filename, content);
+        generator.setSourceContent(options.inputFilename, code);
 
         return generator.toString();
       }