fix($css): re-order css files in precise order with main.css coming f…

…irst, etc
faceyspacey · Jun 11, 2017 · 2befa77 · 2befa77
1 parent 8a2dce0
commit 2befa77
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/__tests__/__snapshots__/createApiWithCss.test.js.snap b/__tests__/__snapshots__/createApiWithCss.test.js.snap
@@ -16,11 +16,11 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 exports[`createApiWithCss() generates js + style components, strings and arrays 2`] = `
 <span>
   <link
-    href="/static/0.css"
+    href="/static/main.css"
     rel="stylesheet"
   />
   <link
-    href="/static/main.css"
+    href="/static/0.css"
     rel="stylesheet"
   />
 </span>
@@ -29,10 +29,10 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 exports[`createApiWithCss() generates js + style components, strings and arrays 3`] = `
 <span>
   <style>
-    /Users/jamesgillmore/App/build/0.css- the css! 
-    
     /Users/jamesgillmore/App/build/main.css- the css! 
     
+    /Users/jamesgillmore/App/build/0.css- the css! 
+    
   </style>
 </span>
 `;
@@ -43,14 +43,14 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 5`] = `
-"<link rel='stylesheet' href='/static/0.css' />
-<link rel='stylesheet' href='/static/main.css' />"
+"<link rel='stylesheet' href='/static/main.css' />
+<link rel='stylesheet' href='/static/0.css' />"
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 6`] = `
-"<style>/Users/jamesgillmore/App/build/0.css- the css! 
+"<style>/Users/jamesgillmore/App/build/main.css- the css! 
 
-/Users/jamesgillmore/App/build/main.css- the css! 
+/Users/jamesgillmore/App/build/0.css- the css! 
 </style>"
 `;
 
@@ -63,8 +63,8 @@ Array [
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 8`] = `
 Array [
-  "0.css",
   "main.css",
+  "0.css",
 ]
 `;
 

diff --git a/__tests__/__snapshots__/flushChunks.test.js.snap b/__tests__/__snapshots__/flushChunks.test.js.snap
@@ -24,9 +24,9 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
-    "main.css",
   ],
 }
 `;
@@ -56,10 +56,10 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
     "2.css",
-    "main.css",
   ],
 }
 `;
@@ -88,10 +88,10 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
     "2.css",
-    "main.css",
   ],
 }
 `;
@@ -120,9 +120,9 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
-    "main.css",
   ],
 }
 `;
@@ -152,10 +152,10 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
     "2.css",
-    "main.css",
   ],
 }
 `;
@@ -184,10 +184,10 @@ Object {
     "toString": [Function],
   },
   "stylesheets": Array [
+    "main.css",
     "0.css",
     "1.css",
     "2.css",
-    "main.css",
   ],
 }
 `;

diff --git a/__tests__/createApiWithCss.test.js b/__tests__/createApiWithCss.test.js
@@ -20,7 +20,13 @@ const outputPath = '/Users/jamesgillmore/App/build'
 describe('createApiWithCss()', () => {
   it('generates js + style components, strings and arrays', () => {
     const files = ['0.js', '0.css', 'main.js', 'main.css']
-    const api = createApiWithCss(files, publicPath, outputPath) /*? $ */
+    const filesForCss = ['main.js', 'main.css', '0.js', '0.css']
+    const api = createApiWithCss(
+      files,
+      filesForCss,
+      publicPath,
+      outputPath
+    ) /*? $ */
 
     expect(api.Js() /*? $.props.children */).toMatchSnapshot()
     expect(api.Styles() /*? $.props.children */).toMatchSnapshot()
@@ -39,7 +45,7 @@ describe('createApiWithCss()', () => {
 
   it('uses files with extension "no_css.js" if available', () => {
     const files = ['main.js', 'main.no_css.js', 'main.css']
-    const api = createApiWithCss(files, publicPath, outputPath) /*? $ */
+    const api = createApiWithCss(files, files, publicPath, outputPath) /*? $ */
 
     expect(api.Js() /*? $.props.children */).toMatchSnapshot()
     expect(api.Styles() /*? $.props.children */).toMatchSnapshot()
@@ -58,7 +64,7 @@ describe('createApiWithCss()', () => {
 
   it('throws when rendering css without outputPath', () => {
     const files = ['main.js', 'main.css']
-    const api = createApiWithCss(files, publicPath)
+    const api = createApiWithCss(files, files, publicPath)
 
     expect(api.Css /*? */).toThrow()
     expect(api.css.toString /*? */).toThrow()
@@ -67,14 +73,14 @@ describe('createApiWithCss()', () => {
   it('adds trailing slash to public path', () => {
     const files = ['main.js']
     const publicPath = '/static'
-    const api = createApiWithCss(files, publicPath)
+    const api = createApiWithCss(files, files, publicPath)
 
     expect(api.js.toString() /*? */).toContain('/static/main.js')
   })
 
   it('does not include scripts with extension "hot-update.js"', () => {
     const files = ['main.js', 'main.hot-update.js']
-    const api = createApiWithCss(files, publicPath)
+    const api = createApiWithCss(files, files, publicPath)
 
     expect(api.scripts /*? */).not.toContain('main.hot-update.js')
   })

diff --git a/src/createApiWithCss.js b/src/createApiWithCss.js
@@ -28,12 +28,13 @@ const DEV = process.env.NODE_ENV === 'development'
 
 export default (
   files: Array<string>,
+  filesOrderedForCss: Array<string>,
   publicPath: string,
   outputPath: ?string
 ): Api => {
   const regex = getJsFileRegex(files)
   const scripts = files.filter(file => isJs(regex, file))
-  const stylesheets = files.filter(isCss)
+  const stylesheets = filesOrderedForCss.filter(isCss)
   publicPath = publicPath.replace(/\/$/, '')
 
   const api = {

diff --git a/src/flushChunks.js b/src/flushChunks.js
@@ -61,18 +61,21 @@ export default (stats: Stats, opts: Options): Api =>
 
 const flushChunks = (stats: Stats, isWebpack: boolean, opts: Options = {}) => {
   const beforeEntries = opts.before || defaults.before
+  const jsBefore = filesFromChunks(beforeEntries, stats.assetsByChunkName)
 
   const files = opts.chunkNames
     ? filesFromChunks(opts.chunkNames, stats.assetsByChunkName)
     : flush(opts.moduleIds || [], stats, opts.rootDir, isWebpack)
 
   const afterEntries = opts.after || defaults.after
+  const jsAfter = filesFromChunks(afterEntries, stats.assetsByChunkName)
 
   return createApiWithCss(
+    [...jsBefore, ...files, ...jsAfter],
     [
-      ...filesFromChunks(beforeEntries, stats.assetsByChunkName),
-      ...files,
-      ...filesFromChunks(afterEntries, stats.assetsByChunkName)
+      ...jsBefore, // likely nothing in here, but if so: bootstrap.css, vendor.css, etc
+      ...jsAfter.reverse(), // main.css, someElseYouPutBeforeMain.css, etc
+      ...files // correct incrementing order already
     ],
     stats.publicPath,
     opts.outputPath