Fix CSS tests

lib/__tests__/build-files.test.js

@@ -15,6 +15,7 @@ const shell = require('shelljs');
 
 const CWD = process.cwd();
 
+const cssnanoOptions = require('../server/cssnanoOptions');
 const siteConfig = require(CWD + '/website/siteConfig.js');
 const buildDir = CWD + '/website/build';
 const docsDir = CWD + '/docs';
@@ -34,82 +35,87 @@ function clearBuildFolder() {
   return rimraf(buildDir);
 }
 
-beforeEach(() => {
-  shell.cd(CWD);
-});
-
-beforeAll(() => {
-  generateSite();
-  return Promise.all([
-    glob(docsDir + '/**/*.md'),
-    glob(buildDir + '/' + siteConfig.projectName + '/docs/**/*.html'),
-    glob(docsDir + '/assets/*'),
-    glob(buildDir + '/' + siteConfig.projectName + '/img/*'),
-  ]).then(function(results) {
-    [
-      inputMarkdownFiles,
-      outputHTMLFiles,
-      inputAssetsFiles,
-      outputAssetsFiles,
-    ] = results;
+describe('Build files', () => {
+  beforeEach(() => {
+    shell.cd(CWD);
   });
-});
-
-afterAll(() => {
-  clearBuildFolder();
-});
 
-test('Build folder exists', function() {
-  return fs.stat(buildDir).then(function(status) {
-    expect(status.isDirectory()).toBeTruthy();
+  beforeAll(() => {
+    generateSite();
+    return Promise.all([
+      glob(docsDir + '/**/*.md'),
+      glob(buildDir + '/' + siteConfig.projectName + '/docs/**/*.html'),
+      glob(docsDir + '/assets/*'),
+      glob(buildDir + '/' + siteConfig.projectName + '/img/*'),
+    ]).then(function(results) {
+      [
+        inputMarkdownFiles,
+        outputHTMLFiles,
+        inputAssetsFiles,
+        outputAssetsFiles,
+      ] = results;
+    });
   });
-});
 
-test('Generated HTML for each Markdown resource', function() {
-  let metadata = [];
-  outputHTMLFiles.forEach(function(file) {
-    const path = filepath.create(file);
-    metadata.push(path.basename());
+  afterAll(() => {
+    clearBuildFolder();
   });
-  inputMarkdownFiles.forEach(function(file) {
-    const data = fs.readFileSync(file, 'utf8');
-    const frontmatter = fm(data);
-    expect(metadata).toContain(frontmatter.attributes.id + '.html');
+
+  test('Build folder exists', function() {
+    return fs.stat(buildDir).then(function(status) {
+      expect(status.isDirectory()).toBeTruthy();
+    });
   });
-});
 
-test('Generated table of contents', function() {
-  outputHTMLFiles.forEach(function(file) {
-    const fileContents = fs.readFileSync(file, 'utf8');
-    expect(fileContents).not.toContain('<AUTOGENERATED_TABLE_OF_CONTENTS>');
+  test('Generated HTML for each Markdown resource', function() {
+    let metadata = [];
+    outputHTMLFiles.forEach(function(file) {
+      const path = filepath.create(file);
+      metadata.push(path.basename());
+    });
+    inputMarkdownFiles.forEach(function(file) {
+      const data = fs.readFileSync(file, 'utf8');
+      const frontmatter = fm(data);
+      expect(metadata).toContain(frontmatter.attributes.id + '.html');
+    });
   });
-});
 
-test('Concatenated CSS files', function() {
-  return Promise.all([
-    glob(staticCSSDir + '/*.css'),
-    fs.readFile(
-      buildDir + '/' + siteConfig.projectName + '/css/main.css',
-      'utf8'
-    ),
-  ]).then(function(results) {
-    const [inputFiles, outputFile] = results;
-    inputFiles.forEach(async function(file) {
-      const contents = fs.readFileSync(file, 'utf8');
-      const {css} = await cssnano.process(contents, {}, {preset: 'default'});
-      expect(outputFile).toContain(css);
+  test('Generated table of contents', function() {
+    outputHTMLFiles.forEach(function(file) {
+      const fileContents = fs.readFileSync(file, 'utf8');
+      expect(fileContents).not.toContain('<AUTOGENERATED_TABLE_OF_CONTENTS>');
     });
   });
-});
 
-test('Copied assets from /docs/assets', function() {
-  let metadata = [];
-  outputAssetsFiles.forEach(function(file) {
-    const path = filepath.create(file);
-    metadata.push(path.basename());
+  test('Concatenated CSS files', async function() {
+    const inputFiles = await glob(staticCSSDir + '/*.css');
+    const combinedCSSFile =
+      buildDir + '/' + siteConfig.projectName + '/css/main.css';
+    const fileContents = await Promise.all(
+      [combinedCSSFile, ...inputFiles].map(file => fs.readFile(file, 'utf8'))
+    );
+
+    const [outputFileContent, ...inputFileContents] = fileContents;
+    const minifiedInputs = await Promise.all(
+      inputFileContents.map(fileContent =>
+        cssnano.process(fileContent, cssnanoOptions)
+      )
+    );
+
+    minifiedInputs.forEach(fileContent => {
+      expect(outputFileContent).toContain(fileContent.css);
+    });
   });
-  inputAssetsFiles.forEach(function(file) {
-    const path = filepath.create(file);
-    expect(metadata).toContain(path.basename());
+
+  test('Copied assets from /docs/assets', function() {
+    let metadata = [];
+    outputAssetsFiles.forEach(function(file) {
+      const path = filepath.create(file);
+      metadata.push(path.basename());
+    });
+    inputAssetsFiles.forEach(function(file) {
+      const path = filepath.create(file);
+      expect(metadata).toContain(path.basename());
+    });
   });
 });

lib/server/cssnanoOptions.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {preset: 'default', zindex: false};

lib/server/generate.js

@@ -37,6 +37,7 @@ async function execute() {
   const imageminOptipng = require('imagemin-optipng');
   const imageminSvgo = require('imagemin-svgo');
   const imageminGifsicle = require('imagemin-gifsicle');
+  const cssnanoOptions = require('./cssnanoOptions');
 
   commander.option('--skip-image-compression').parse(process.argv);
 
@@ -445,13 +446,7 @@ async function execute() {
   // Use cssnano to minify the final combined CSS.
   const mainCss = join(buildDir, 'css', 'main.css');
   const cssContent = fs.readFileSync(mainCss, 'utf8');
-  const {css} = await cssnano.process(
-    cssContent,
-    /* postcssOpts */ {},
-    /* cssnanoOpts */ {
-      preset: 'default',
-    }
-  );
+  const {css} = await cssnano.process(cssContent, cssnanoOptions);
   fs.writeFileSync(mainCss, css);
 
   // compile/copy pages from user