fix: Append classnames when extracting to single file

callstack · Sep 22, 2017 · fd5ce29 · fd5ce29
1 parent 1c61aa4
commit fd5ce29
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/src/babel/preval-extract/__tests__/extractStyles.spec.js b/src/babel/preval-extract/__tests__/extractStyles.spec.js
@@ -56,6 +56,37 @@ describe('preval-extract/extractStyles module', () => {
     expect(writeFileSync).not.toHaveBeenCalled();
   });
 
+  it('should append classnames when writing to single file', () => {
+    const writeFileSync = jest.fn();
+    const opts = { single: true, filename: 'A.css' };
+
+    getCachedModule.mockImplementationOnce(
+      getCachedModuleImpl('.classname{color: #ffffff}')
+    );
+
+    extractStyles(types, null, 'file1.js', opts, { writeFileSync });
+
+    getCachedModule.mockImplementationOnce(
+      getCachedModuleImpl('.other{color: #000000}')
+    );
+
+    extractStyles(types, null, 'file2.js', opts, { writeFileSync });
+
+    expect(fs.writeFileSync).toHaveBeenCalledTimes(2);
+    expect(fs.writeFileSync.mock.calls[0][0]).toEqual(
+      path.join(process.cwd(), 'A.css')
+    );
+    expect(fs.writeFileSync.mock.calls[0][1]).toMatch(
+      '.classname{color: #ffffff}'
+    );
+    expect(fs.writeFileSync.mock.calls[1][0]).toEqual(
+      path.join(process.cwd(), 'A.css')
+    );
+    expect(fs.writeFileSync.mock.calls[1][1]).toMatch(
+      '.classname{color: #ffffff}\n.other{color: #000000}'
+    );
+  });
+
   describe('with cache disabled', () => {
     beforeEach(clearCache);
 

diff --git a/src/babel/preval-extract/extractStyles.js b/src/babel/preval-extract/extractStyles.js
@@ -10,7 +10,7 @@ import { getCachedModule } from '../lib/moduleSystem';
 const preamble =
   '/* THIS FILE IS AUTOGENERATED. DO NOT EDIT IT DIRECTLY, NOR COMMIT IT TO VERSION CONTROL. */';
 
-function parseCurrentFilename(filename: string, outDir: string) {
+function parseCurrentFilename(filename: string, outDir: string = '') {
   const dirname = path.isAbsolute(filename)
     ? path.dirname(filename)
     : path.join(process.cwd(), outDir);
@@ -21,7 +21,7 @@ function parseCurrentFilename(filename: string, outDir: string) {
 function parseFilename(
   filename: string,
   currentFilename: string,
-  outDir: string
+  outDir: string = ''
 ) {
   const dirname = path.isAbsolute(outDir)
     ? outDir
@@ -75,8 +75,8 @@ export default function extractStyles(
     single: false,
     ...options,
     filename: options.filename
-      ? parseFilename(options.filename, currentFilename, options.outDir || '')
-      : parseCurrentFilename(currentFilename, options.outDir || ''),
+      ? parseFilename(options.filename, currentFilename, options.outDir)
+      : parseCurrentFilename(currentFilename, options.outDir),
   };
 
   if (!extract) {
@@ -99,7 +99,18 @@ export default function extractStyles(
   }
 
   if (cache) {
-    stylesCache[filename] = data;
+    if (single) {
+      if (hasCachedStyles(currentFilename, data)) {
+        return;
+      }
+      stylesCache[currentFilename] = data;
+    } else {
+      if (hasCachedStyles(filename, data)) {
+        addRequireForCss(types, program, filename);
+        return;
+      }
+      stylesCache[filename] = data;
+    }
   }
 
   if (single) {