fix: use same class names in dev and prod. fixes #147 (#171)

src/babel/__integration-tests__/preval-extract/__snapshots__/code-frame.spec.js.snap

@@ -36,6 +36,6 @@ Error: test
   12 | };
   13 | 
 at <<CWD>>/src/babel/__integration-tests__/__fixtures__/commonjs/utils.js:10:10
-at <<CWD>>/test.js:5:47
+at <<CWD>>/test.js:5:58
 
 `;

src/babel/__integration-tests__/preval-extract/__snapshots__/exctraction.spec.js.snap

@@ -2,32 +2,32 @@
 
 exports[`preval-extract babel plugin with extraction enabled extract styles to a given file 1`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
-._header__nzd8dy{font-size:3em;}"
+._header__zkmz8m{font-size:3em;}"
 `;
 
 exports[`preval-extract babel plugin with extraction enabled extract styles to a given file with output directory specified 1`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
-._header__nzd8dy{font-size:3em;}"
+._header__zkmz8m{font-size:3em;}"
 `;
 
 exports[`preval-extract babel plugin with extraction enabled should extract all styles to a single file 1`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
 
-._header__nzd8dy{font-size:3em;}"
+._header__zkmz8m{font-size:3em;}"
 `;
 
 exports[`preval-extract babel plugin with extraction enabled should extract all styles to a single file 2`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
 
-._body__j2fydj{font-weight:bold;}"
+._body__zkmz8m{font-weight:bold;}"
 `;
 
 exports[`preval-extract babel plugin with extraction enabled should extract each style to separate file and include it into source file 1`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
-._header__nzd8dy{font-size:3em;}"
+._header__jz3lbe{font-size:3em;}"
 `;
 
 exports[`preval-extract babel plugin with extraction enabled should extract each style to separate file and include it into source file 2`] = `
 "/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */
-._body__j2fydj{font-weight:bold;}"
+._body__16a4ra6{font-weight:bold;}"
 `;

src/babel/__integration-tests__/preval-extract/__snapshots__/preval-extract.spec.js.snap

@@ -28,13 +28,13 @@ import css from '<<CWD>>/build/css.js';
 const size = 3;
 let color = "#ffffff";
 
-const header = /*linaria-output*/"_header__3r30ar";
+const header = /*linaria-output*/"_header__zkmz8m";
 `;
 
 exports[`preval-extract babel plugin should preval css with classname from another prevaled css 1`] = `
 "padding: 2rem;
 
-._title__1r77qux {
+._title__zkmz8m {
 margin-bottom: 1rem;
 }"
 `;

src/babel/__integration-tests__/preval-extract/code-frame.spec.js

@@ -6,14 +6,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin code frames', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should build valid code frame for errors while evaling styles', () => {
     expect(() => {
       transpile(dedent`

src/babel/__integration-tests__/preval-extract/development.spec.js

@@ -6,44 +6,19 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
-  it('in development should use filename for slug creation', () => {
-    process.env.BABEL_ENV = '';
-    const { code: codeWithSlugFromContent } = transpile(dedent`
+  it('should use filename for slug creation', () => {
+    const { code } = transpile(
+      dedent`
     const header = css\`
       font-size: 3em;
     \`;
-    `);
-
-    process.env.BABEL_ENV = 'production';
-    const { code: codeWithSlugFromFilename } = transpile(
-      dedent`
-      const header = css\`
-        font-size: 3em;
-      \`;
-      `,
+    `,
       undefined,
       { filename: path.join(process.cwd(), 'test.js') }
     );
 
-    const classnameWithSlugFromContent = /header = \/\*.+\*\/'(_header__[a-z0-9]+)'/g.exec(
-      codeWithSlugFromContent
-    );
-    const classnameWithSlugFromFilename = /header = \/\*.+\*\/'(_header__[a-z0-9]+)'/g.exec(
-      codeWithSlugFromFilename
-    );
+    const className = /header = \/\*.+\*\/'(_header__[a-z0-9]+)'/g.exec(code);
 
-    expect(classnameWithSlugFromContent).not.toBeNull();
-    expect(classnameWithSlugFromFilename).not.toBeNull();
-    expect(classnameWithSlugFromContent[0]).not.toEqual(
-      codeWithSlugFromFilename[0]
-    );
+    expect(className).not.toBeNull();
   });
 });

src/babel/__integration-tests__/preval-extract/errors.spec.js

@@ -6,14 +6,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin errors', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should throw error if "css" tagged template literal is not assigned to a variable', () => {
     expect(() => {
       transpile(dedent`

src/babel/__integration-tests__/preval-extract/exctraction.spec.js

@@ -6,14 +6,6 @@ import dedent from 'dedent';
 import { extract } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with extraction enabled', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should extract all styles to a single file', () => {
     const filename = path.join(process.cwd(), 'test.js');
     const { data: data1, filenames: filenames1 } = extract(

src/babel/__integration-tests__/preval-extract/preval-extract.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should not process tagged template if tag is not "css"', () => {
     const { code } = transpile(dedent`
     const header = \`

src/babel/__integration-tests__/preval-extract/with-commonjs-imports.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with commonjs imports', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should preval imported constants ', () => {
     const { code, getCSSForClassName } = transpile(dedent`
     const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");

src/babel/__integration-tests__/preval-extract/with-es-imports.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with ES imports', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should preval default export', () => {
     const { code, getCSSForClassName } = transpile(dedent`
       import constants from "./src/babel/__integration-tests__/__fixtures__/esm/constants.js";

src/babel/__integration-tests__/preval-extract/with-function-calls.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with function calls', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should preval with function call inside an expression', () => {
     const { code, getCSSForClassName } = transpile(dedent`
     const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");

src/babel/__integration-tests__/preval-extract/with-function-declarations.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with function delcarations/expressions', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should preval with function declaration', () => {
     const { code, getCSSForClassName } = transpile(dedent`
     function getConstants() {

src/babel/__integration-tests__/preval-extract/with-plain-objects.spec.js

@@ -5,14 +5,6 @@ import dedent from 'dedent';
 import { transpile } from '../__utils__/exec';
 
 describe('preval-extract babel plugin with plain objects', () => {
-  beforeEach(() => {
-    process.env.NODE_ENV = 'production';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = '';
-  });
-
   it('should preval styles with shallow object', () => {
     const { code, getCSSForClassName } = transpile(dedent`
     const constants = {

src/babel/preval-extract/__tests__/prevalStyles.spec.js

@@ -51,7 +51,6 @@ function runAssertions(expectedReplacement, source = 'css`color: #ffffff`') {
 }
 
 function clearMocks() {
-  process.env.NODE_ENV = '';
   getReplacement.mockClear();
   instantiateModule.mockClear();
   clearLocalModulesFromCache.mockClear();
@@ -77,10 +76,4 @@ describe('preval-extract/prevalStyles', () => {
       "css.named('header', 'filename.js')`color: #ffffff`"
     );
   });
-
-  it('should eval styles and replace css with class name from filename', () => {
-    process.env.NODE_ENV = 'production';
-    runAssertions("css.named('header')`color: #ffffff`");
-    process.env.NODE_ENV = '';
-  });
 });

src/babel/preval-extract/index.js

@@ -15,7 +15,7 @@ import {
   isLinariaTaggedTemplate,
   isExcluded,
 } from './validators';
-import { getSelfBinding } from './utils';
+import { getSelfBinding, relativeToCwd } from './utils';
 import prevalStyles from './prevalStyles';
 import resolveSource from './resolveSource';
 import extractStyles from './extractStyles';
@@ -72,7 +72,7 @@ export default (babel: BabelCore) => {
                 token.value.trim() === 'linaria-preval'
             );
           state.foundLinariaTaggedLiterals = false;
-          state.filename = state.file.opts.filename;
+          state.filename = relativeToCwd(state.file.opts.filename);
         },
         exit(path: NodePath<*>, state: State) {
           if (state.skipFile) {

src/babel/preval-extract/prevalStyles.js

@@ -39,26 +39,16 @@ export default function(
   state: State,
   requirements: RequirementSource[]
 ) {
-  const env = process.env.NODE_ENV || process.env.BABEL_ENV;
-
   const { name } = path.scope.generateUidIdentifier(title);
   const replacement = getReplacement([
     ...requirements,
     {
       code: `module.exports = ${path
         .getSource()
-        .replace(
-          /css(?!\.named)/g,
-          env === 'production'
-            ? `css.named('${name}')`
-            : `css.named('${name}', '${state.filename}')`
-        )
+        .replace(/css(?!\.named)/g, `css.named('${name}', '${state.filename}')`)
         .replace(
           /css\.named\(([^,]+)\)/,
-          (input, customName) =>
-            env === 'production'
-              ? input
-              : `css.named(${customName}, '${state.filename}')`
+          (input, customName) => `css.named(${customName}, '${state.filename}')`
         )}`,
       loc: path.node.loc.start,
     },