feat: scope option for libraries

Closes callstack#299. See also callstack#208, callstack#178

docs/CONFIGURATION.md

@@ -34,6 +34,10 @@ module.exports = {
 
   If you need to specify custom babel configuration, you can pass them here. These babel options will be used by Linaria when parsing and evaluating modules.
 
+- `scope: boolean or string` (default: `false`):
+
+  When set to `true` this option will create unique CSS class names based on your package.json name and version. This may be useful for libraries that want unique class names in different versions. You can alternatively provide a unique string to use (instead of the package.json name and version).
+
 ## `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.

package.json

@@ -93,6 +93,7 @@
     "normalize-path": "^3.0.0",
     "postcss": "^7.0.14",
     "react-is": "^16.8.3",
+    "read-pkg": "^5.0.0",
     "rollup-pluginutils": "^2.4.1",
     "source-map": "^0.7.3",
     "strip-ansi": "^5.0.0",

src/__tests__/transform.test.js

@@ -147,3 +147,34 @@ it("doesn't throw due to duplicate preset", async () => {
     )
   ).not.toThrowError('Duplicate plugin/preset detected');
 });
+
+it('respects scope option', async () => {
+  const testFile = dedent`
+  import { css } from 'linaria';
+
+  export const test = css\`
+    color: red;
+  \`;
+  `;
+
+  const baseResult = transform(testFile, {
+    filename: './test.js',
+    outputFilename: '../.linaria-cache/test.css',
+    pluginOptions: {
+      scopeString: '',
+    },
+  });
+
+  expect(baseResult).toMatchSnapshot();
+
+  const customScopeResult = transform(testFile, {
+    filename: './test.js',
+    outputFilename: '../.linaria-cache/test.css',
+    pluginOptions: {
+      scopeString: 'custom-scope',
+    },
+  });
+
+  expect(customScopeResult).toMatchSnapshot();
+  expect(customScopeResult.cssText).not.toBe(baseResult.cssText);
+});

src/babel/types.js

@@ -30,6 +30,7 @@ export type StrictOptions = {|
   evaluate: boolean,
   ignore: RegExp,
   babelOptions: Object,
+  scopeString: string,
 |};
 
 export type Location = {

src/babel/utils/loadOptions.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import cosmiconfig from 'cosmiconfig';
+import readPkg from 'read-pkg';
 import type { StrictOptions } from '../types';
 
 export type PluginOptions = $Shape<{
@@ -14,16 +15,34 @@ export default function loadOptions(
   overrides?: PluginOptions = {}
 ): StrictOptions {
   const { configFile, ...rest } = overrides;
+  let scopeOption;
+  let scopeString = '';
 
   const result =
     configFile !== undefined
       ? explorer.loadSync(configFile)
       : explorer.searchSync();
 
+  if (result && result.config) {
+    scopeOption = result.config.scope;
+  }
+
+  if (scopeOption === true) {
+    try {
+      const pkgJson = readPkg.sync();
+      scopeString = `${pkgJson.name}@${pkgJson.version}`;
+    } catch (err) {
+      console.log(`Couldn't retrieve package.json name/version.`);
+    }
+  } else if (typeof scopeOption === 'string') {
+    scopeString = scopeOption;
+  }
+
   const options = {
     displayName: false,
     evaluate: true,
     ignore: /node_modules/,
+    scopeString,
     ...(result ? result.config : null),
     ...rest,
   };

src/babel/visitors/TaggedTemplateExpression.js

@@ -131,9 +131,10 @@ export default function TaggedTemplateExpression(
   // Also use append the index of the class to the filename for uniqueness in the file
   const slug = toValidCSSIdentifier(
     `${displayName.charAt(0).toLowerCase()}${slugify(
-      `${relative(state.file.opts.root, state.file.opts.filename)}:${
-        state.index
-      }`
+      `${options.scopeString ? `${options.scopeString}:` : ''}${relative(
+        state.file.opts.root,
+        state.file.opts.filename
+      )}:${state.index}`
     )}`
   );
 

yarn.lock

@@ -6261,6 +6261,14 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
+read-pkg@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.0.0.tgz#75449907ece8dfb89cbc76adcba2665316e32b94"
+  integrity sha512-OWufaRc67oJjcgrxckW/qO9q22iYzyiONh8h+GMcnOvSHAmhV1Dr3x+gyRjP+Qxc5jKupkSfoCQLS/98rDPh9A==
+  dependencies:
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+
 readable-stream@^2.0.1, readable-stream@^2.1.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"