fix: finally wrote correct chunking logic #562

tivac · 2019-02-05T07:18:56Z

Description

Wrote a whole graph collapsing algorithm in order to determine the optimal number of chunks based on the JS entry points & the CSS dependency graph.

I also changed how CSS files are named which isn't "breaking" but is a big change maybe.

Also rollup-rewriter now always includes every css file a chunk depends on by walking each chunk's dep graph. That way load order is irrelevant because they all load everything they need. Seems obvious now but ... oops.

Motivation and Context

Fixes #559

How Has This Been Tested?

Updated some existing tests, wrote some new ones.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

TravisBuddy · 2019-02-05T07:21:40Z

Travis tests have failed

Hey @tivac,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 8

View build log

npm test -- --ci

> modular-css@0.0.0 pretest /home/travis/build/tivac/modular-css
> npm run parser


> modular-css@0.0.0 parser /home/travis/build/tivac/modular-css
> pegjs packages/processor/parsers/parser.pegjs


> modular-css@0.0.0 test /home/travis/build/tivac/modular-css
> jest "--ci"

PASS lint packages/rollup/test/rollup.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/rollup.test.js
        646:9  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/processor/test/options.test.js
PASS lint packages/rollup/test/splitting.test.js
PASS lint packages/processor/test/api.test.js
PASS lint packages/processor/processor.js
PASS lint packages/rollup/test/watch.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/watch.test.js
        7:7  warning  'read' is assigned a value but never used  no-unused-vars
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/rollup/rollup.js
PASS lint packages/svelte/test/svelte.test.js
PASS lint packages/webpack/test/webpack.test.js
PASS lint packages/browserify/browserify.js
PASS lint packages/browserify/test/factor-bundle.test.js
PASS lint packages/svelte/svelte.js
PASS lint packages/browserify/test/browserify.test.js
PASS lint packages/processor/test/composition.test.js
PASS lint packages/processor/test/values.test.js
PASS lint packages/rollup-rewriter/test/rewriter.test.js
PASS lint packages/www/src/repl/store.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/www/src/repl/store.js
         97:13  warning  Unexpected console statement  no-console
        117:13  warning  Unexpected console statement  no-console
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/www/rollup.config.js
PASS lint packages/postcss/test/postcss.test.js
PASS lint packages/browserify/test/watchify.test.js
PASS lint packages/rollup-rewriter/rewriter.js
PASS lint packages/processor/plugins/composition.js
PASS lint packages/rollup/chunker.js
PASS lint packages/scratchpad/chunks.js
PASS lint packages/processor/plugins/scoping.js
PASS lint packages/processor/plugins/values-replace.js
PASS lint packages/webpack/plugin.js
PASS lint packages/aliases/test/aliases.test.js
PASS lint packages/processor/test/scoping.test.js
PASS lint packages/browserify/test/issue-58.test.js
PASS lint packages/processor/test/keyframes.test.js
PASS lint packages/browserify/test/issue-313.test.js
PASS lint packages/cli/test/cli.test.js
PASS lint packages/paths/test/paths.test.js
PASS lint packages/processor/plugins/externals.js
PASS lint packages/processor/test/externals.test.js
PASS lint packages/processor/plugins/graph-nodes.js
PASS lint packages/webpack/loader.js
PASS lint packages/cli/cli.js
PASS lint packages/browserify/test/issue-105.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/browserify/test/issue-105.test.js
        16:13  warning  Skipped test  jest/no-disabled-tests
        23:13  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/scratchpad/test/chunks.test.js
PASS lint packages/www/build/html/guide.js
PASS lint packages/www/build/rollup-plugin-postcss.js
PASS lint packages/namer/test/namer.test.js
PASS lint packages/www/build/html/repl.js
PASS lint packages/glob/test/glob.test.js
PASS lint packages/postcss/postcss.js
PASS lint packages/www/build/rollup-plugin-generate-html.js
PASS lint packages/processor/test/exports.test.js
PASS lint packages/namer/namer.js
PASS lint packages/processor/test/getters.test.js
PASS lint packages/www/build/html/changelog.js
PASS lint packages/processor/test/issues/issue-191.test.js
PASS lint packages/www/build/html/home.js
PASS lint packages/processor/test/issues/issue-56.test.js
PASS lint packages/processor/test/issues/issue-24.test.js
PASS lint packages/www/build/html/css.js
PASS lint packages/processor/test/issues/issue-98.test.js
PASS lint packages/processor/plugins/values-local.js
PASS lint packages/processor/plugins/values-composed.js
PASS lint packages/processor/plugins/values-namespaced.js
PASS lint packages/processor/plugins/values-imported.js
PASS lint packages/www/build/svelte.js
PASS lint packages/scratchpad/chunktest.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/scratchpad/chunktest.js
        37:1   warning  Unexpected console statement  no-console
        40:5   warning  Unexpected console statement  no-console
        43:20  warning  Unexpected console statement  no-console
        46:1   warning  Unexpected console statement  no-console
      
      ✖ 4 problems (0 errors, 4 warnings)
      

PASS lint packages/processor/plugins/values-export.js
PASS lint packages/scratchpad/test/construct.js
PASS lint packages/www/build/rollup-plugin-sirv.js
PASS lint packages/processor/plugins/keyframes.js
PASS lint packages/rollup-rewriter/formats/amd.js
PASS lint packages/processor/test/unicode.test.js
PASS lint packages/aliases/aliases.js
PASS lint packages/processor/lib/graph-tiers.js
PASS lint packages/rollup-rewriter/formats/system.js
PASS lint packages/glob/glob.js
PASS lint packages/test-utils/logs.js
PASS lint packages/processor/lib/resolve.js
PASS lint packages/processor/lib/output.js
PASS lint packages/test-utils/rollup-build-snapshot.js
PASS lint packages/processor/test/issues/issue-66.test.js
PASS lint packages/processor/test/issues/issue-261.test.js
PASS lint packages/www/src/repl/listen.js
PASS lint packages/www/build/rollup-plugin-add-watch-files.js
PASS lint packages/test-utils/rollup-code-snapshot.js
PASS lint packages/processor/lib/identifiers.js
PASS lint packages/test-utils/read-dir.js
PASS lint packages/paths/paths.js
PASS lint packages/browserify/test/lib/bundle.js
PASS lint packages/scratchpad/test/snapshot.js
PASS lint packages/processor/lib/normalize.js
PASS lint packages/rollup-rewriter/formats/es.js
PASS lint packages/test-utils/relative.js
PASS lint packages/test-utils/write.js
PASS lint packages/test-utils/rollup-watching.js
PASS lint packages/www/src/repl/data/prompt.js
PASS lint packages/processor/lib/message.js
PASS lint packages/www/build/rollup-plugin-clean.js
PASS lint packages/www/build/environment.js
PASS lint packages/processor/lib/relative.js
PASS lint packages/www/stubs/path.js
PASS lint packages/www/build/html/markdown.js
PASS lint packages/test-utils/read.js
PASS lint packages/www/src/repl/codemirror.js
PASS lint packages/test-utils/exists.js
PASS lint packages/test-utils/warn.js
PASS lint packages/test-utils/prefix.js
PASS lint packages/test-utils/namer.js
PASS lint packages/www/stubs/fs.js
PASS lint packages/www/src/repl/index.js
PASS tests packages/rollup/test/rollup.test.js
PASS tests packages/processor/test/options.test.js
PASS tests packages/rollup/test/splitting.test.js
FAIL tests packages/processor/test/api.test.js
  ● /processor.js › API › .output() › should order output by dependencies, then alphabetically

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/processor.js API .output() should order output by dependencies, then alphabetically 1".

    - Snapshot
    + Received

    @@ -5,11 +5,10 @@
      /* packages/processor/test/specimens/folder/subfolder/subfolder.css */
      .subfolder { color: yellow; }
      /* packages/processor/test/specimens/composes.css */
      /* packages/processor/test/specimens/deep.css */
      .deep {
    -     
          color: black;
      }
      /* packages/processor/test/specimens/local.css */
      .booga { background: green; }
      /* packages/processor/test/specimens/start.css */

      252 |                 const result = await processor.output();
      253 | 
    > 254 |                 expect(result.css).toMatchSnapshot();
          |                                    ^
      255 |             });
      256 | 
      257 |             it("should support returning output for specified relative files", async () => {

      at Object.toMatchSnapshot (packages/processor/test/api.test.js:254:36)

 › 1 snapshot failed.
PASS tests packages/rollup/test/watch.test.js
FAIL tests packages/svelte/test/svelte.test.js
  ● /svelte.js › should extract CSS from a <style> tag

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <style> tag 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/style.html */
      .flex {
              display: flex;

      31 |         const output = await processor.output();
      32 | 
    > 33 |         expect(output.css).toMatchSnapshot();
         |                            ^
      34 |     });
      35 |     
      36 |     it("should ignore <links> that reference a URL", async () => {

      at Object.toMatchSnapshot (packages/svelte/test/svelte.test.js:33:28)

  ● /svelte.js › should extract CSS from a <link> tag ("no script")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("no script") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("existing script")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("existing script") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("single quotes")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("single quotes") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("unquoted")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("unquoted") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("values")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("values") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

 › 6 snapshots failed.
(node:5347) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
PASS tests packages/webpack/test/webpack.test.js
PASS tests packages/browserify/test/factor-bundle.test.js
PASS tests packages/browserify/test/browserify.test.js
FAIL tests packages/processor/test/composition.test.js
  ● /processor.js › composition › should allow comments before composes

    TypeError: Cannot read property 'raws' of undefined

      at multiple-composes.css:4:5
      at raws (packages/processor/plugins/composition.js:102:18)
      at callback (node_modules/postcss/lib/container.es6:174:16)
      at callback (node_modules/postcss/lib/container.es6:110:18)
      at Rule.callback [as each] (node_modules/postcss/lib/container.es6:76:16)
      at Rule.each (node_modules/postcss/lib/container.es6:107:17)
      at walk (node_modules/postcss/lib/container.es6:121:24)
      at Root.callback [as each] (node_modules/postcss/lib/container.es6:76:16)
      at Root.each (node_modules/postcss/lib/container.es6:107:17)
      at Root.walk [as walkDecls] (node_modules/postcss/lib/container.es6:172:17)
      at walkDecls (packages/processor/plugins/composition.js:42:9)
      at LazyResult.plugin [as run] (node_modules/postcss/lib/lazy-result.es6:352:14)
      at LazyResult.run [as asyncTick] (node_modules/postcss/lib/lazy-result.es6:280:26)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at asyncTick (node_modules/postcss/lib/lazy-result.es6:317:12)
      at LazyResult.async (node_modules/postcss/lib/lazy-result.es6:314:23)
      at LazyResult.async [as then] (node_modules/postcss/lib/lazy-result.es6:201:17)

PASS tests packages/processor/test/values.test.js
PASS tests packages/rollup-rewriter/test/rewriter.test.js
PASS tests packages/postcss/test/postcss.test.js
PASS tests packages/browserify/test/watchify.test.js
PASS tests packages/aliases/test/aliases.test.js
PASS tests packages/processor/test/scoping.test.js
PASS tests packages/browserify/test/issue-58.test.js
PASS tests packages/processor/test/keyframes.test.js
PASS tests packages/browserify/test/issue-313.test.js
PASS tests packages/cli/test/cli.test.js
PASS tests packages/paths/test/paths.test.js
PASS tests packages/processor/test/externals.test.js
PASS tests packages/scratchpad/test/chunks.test.js
PASS tests packages/namer/test/namer.test.js
FAIL tests packages/glob/test/glob.test.js
  ● /glob.js › should use a default search

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should use a default search 1".

    - Snapshot
    + Received

    @@ -10,9 +10,8 @@
      .four {
          color: red;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      17 |         const { css } = await processor.output();
      18 | 
    > 19 |         expect(css).toMatchSnapshot();
         |                     ^
      20 |     });
      21 | 
      22 |     it("should find files on disk & output css", async () => {

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:19:21)

  ● /glob.js › should find files on disk & output css

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should find files on disk & output css 1".

    - Snapshot
    + Received

    @@ -10,9 +10,8 @@
      .four {
          color: red;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      31 |         const { css } = await processor.output();
      32 | 
    > 33 |         expect(css).toMatchSnapshot();
         |                     ^
      34 |     });
      35 | 
      36 |     it("should support exclusion patterns", async () => {

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:33:21)

  ● /glob.js › should support exclusion patterns

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should support exclusion patterns 1".

    - Snapshot
    + Received

    @@ -6,9 +6,8 @@
      .three {
          color: white;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      46 |         const { css } = await processor.output();
      47 | 
    > 48 |         expect(css).toMatchSnapshot();
         |                     ^
      49 |     });
      50 | });
      51 | 

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:48:21)

 › 3 snapshots failed.
PASS tests packages/processor/test/exports.test.js
PASS tests packages/processor/test/getters.test.js
PASS tests packages/processor/test/issues/issue-56.test.js
PASS tests packages/processor/test/issues/issue-24.test.js
PASS tests packages/processor/test/issues/issue-98.test.js
PASS tests packages/processor/test/unicode.test.js
PASS tests packages/processor/test/issues/issue-66.test.js
PASS tests packages/processor/test/issues/issue-261.test.js

Summary of all failing tests
FAIL packages/processor/test/api.test.js
  ● /processor.js › API › .output() › should order output by dependencies, then alphabetically

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/processor.js API .output() should order output by dependencies, then alphabetically 1".

    - Snapshot
    + Received

    @@ -5,11 +5,10 @@
      /* packages/processor/test/specimens/folder/subfolder/subfolder.css */
      .subfolder { color: yellow; }
      /* packages/processor/test/specimens/composes.css */
      /* packages/processor/test/specimens/deep.css */
      .deep {
    -     
          color: black;
      }
      /* packages/processor/test/specimens/local.css */
      .booga { background: green; }
      /* packages/processor/test/specimens/start.css */

      252 |                 const result = await processor.output();
      253 | 
    > 254 |                 expect(result.css).toMatchSnapshot();
          |                                    ^
      255 |             });
      256 | 
      257 |             it("should support returning output for specified relative files", async () => {

      at Object.toMatchSnapshot (packages/processor/test/api.test.js:254:36)

FAIL packages/svelte/test/svelte.test.js
  ● /svelte.js › should extract CSS from a <style> tag

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <style> tag 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/style.html */
      .flex {
              display: flex;

      31 |         const output = await processor.output();
      32 | 
    > 33 |         expect(output.css).toMatchSnapshot();
         |                            ^
      34 |     });
      35 |     
      36 |     it("should ignore <links> that reference a URL", async () => {

      at Object.toMatchSnapshot (packages/svelte/test/svelte.test.js:33:28)

  ● /svelte.js › should extract CSS from a <link> tag ("no script")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("no script") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("existing script")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("existing script") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("single quotes")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("single quotes") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("unquoted")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("unquoted") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

  ● /svelte.js › should extract CSS from a <link> tag ("values")

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/svelte.js should extract CSS from a <link> tag ("values") 2".

    - Snapshot
    + Received

    @@ -2,11 +2,10 @@
      .fooga {
          color: red;
      }
      /* packages/svelte/test/specimens/dependencies.css */
      .wooga {
    - 
          background: blue;
      }
      /* packages/svelte/test/specimens/external.css */
      .flex {
          display: flex;

       99 |         const output = await processor.output();
      100 | 
    > 101 |         expect(output.css).toMatchSnapshot();
          |                            ^
      102 |     });
      103 | 
      104 |     it("should ignore files without <style> blocks", async () => {

      at toMatchSnapshot (packages/svelte/test/svelte.test.js:101:28)

FAIL packages/processor/test/composition.test.js
  ● /processor.js › composition › should allow comments before composes

    TypeError: Cannot read property 'raws' of undefined

      at multiple-composes.css:4:5
      at raws (packages/processor/plugins/composition.js:102:18)
      at callback (node_modules/postcss/lib/container.es6:174:16)
      at callback (node_modules/postcss/lib/container.es6:110:18)
      at Rule.callback [as each] (node_modules/postcss/lib/container.es6:76:16)
      at Rule.each (node_modules/postcss/lib/container.es6:107:17)
      at walk (node_modules/postcss/lib/container.es6:121:24)
      at Root.callback [as each] (node_modules/postcss/lib/container.es6:76:16)
      at Root.each (node_modules/postcss/lib/container.es6:107:17)
      at Root.walk [as walkDecls] (node_modules/postcss/lib/container.es6:172:17)
      at walkDecls (packages/processor/plugins/composition.js:42:9)
      at LazyResult.plugin [as run] (node_modules/postcss/lib/lazy-result.es6:352:14)
      at LazyResult.run [as asyncTick] (node_modules/postcss/lib/lazy-result.es6:280:26)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.es6:292:14)
      at asyncTick (node_modules/postcss/lib/lazy-result.es6:317:12)
      at LazyResult.async (node_modules/postcss/lib/lazy-result.es6:314:23)
      at LazyResult.async [as then] (node_modules/postcss/lib/lazy-result.es6:201:17)

FAIL packages/glob/test/glob.test.js
  ● /glob.js › should use a default search

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should use a default search 1".

    - Snapshot
    + Received

    @@ -10,9 +10,8 @@
      .four {
          color: red;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      17 |         const { css } = await processor.output();
      18 | 
    > 19 |         expect(css).toMatchSnapshot();
         |                     ^
      20 |     });
      21 | 
      22 |     it("should find files on disk & output css", async () => {

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:19:21)

  ● /glob.js › should find files on disk & output css

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should find files on disk & output css 1".

    - Snapshot
    + Received

    @@ -10,9 +10,8 @@
      .four {
          color: red;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      31 |         const { css } = await processor.output();
      32 | 
    > 33 |         expect(css).toMatchSnapshot();
         |                     ^
      34 |     });
      35 | 
      36 |     it("should support exclusion patterns", async () => {

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:33:21)

  ● /glob.js › should support exclusion patterns

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/glob.js should support exclusion patterns 1".

    - Snapshot
    + Received

    @@ -6,9 +6,8 @@
      .three {
          color: white;
      }
      /* dir/2.css */
      .two {
    -     
          background: blue;
      }
      "

      46 |         const { css } = await processor.output();
      47 | 
    > 48 |         expect(css).toMatchSnapshot();
         |                     ^
      49 |     });
      50 | });
      51 | 

      at Object.toMatchSnapshot (packages/glob/test/glob.test.js:48:21)


Snapshot Summary
 › 10 snapshots failed from 3 test suites. Inspect your code changes or run `npm test -- -u` to update them.

Test Suites: 4 failed, 70 skipped, 137 passed, 141 of 211 total
Tests:       11 failed, 73 skipped, 354 passed, 438 total
Snapshots:   10 failed, 296 passed, 306 total
Time:        24.55s
Ran all test suites in 2 projects.
npm ERR! Test failed.  See above for more details.

TravisBuddy Request Identifier: a97d95f0-2916-11e9-9de4-fb4b948767f7

TravisBuddy · 2019-02-05T07:46:11Z

Hey @tivac,
Something went wrong with the build.

TravisCI finished with status errored, which means the build failed because of something unrelated to the tests, such as a problem with a dependency or the build process itself.

View build log

TravisBuddy Request Identifier: 19aa23e0-291a-11e9-9de4-fb4b948767f7

Because sometimes you need external access to cleaned-up paths

Walks JS entries + CSS dep graph to determine ideal chunking locations and merges nodes together until it gets there. Probably a bit slower than before but *way* more accurate and safer to use.

codecov · 2019-02-05T07:53:57Z

Codecov Report

Merging #562 into master will increase coverage by 0.01%.
The diff coverage is 99.03%.

@@            Coverage Diff             @@
##           master     #562      +/-   ##
==========================================
+ Coverage   99.04%   99.06%   +0.01%     
==========================================
  Files          46       49       +3     
  Lines        1047     1172     +125     
  Branches      163      183      +20     
==========================================
+ Hits         1037     1161     +124     
- Misses         10       11       +1

Impacted Files	Coverage Δ
packages/scratchpad/test/snapshot.js	`100% <100%> (ø)`
packages/rollup-rewriter/rewriter.js	`100% <100%> (ø)`	⬆️
packages/namer/namer.js	`100% <100%> (+4.76%)`	⬆️
packages/rollup/chunker.js	`100% <100%> (ø)`
packages/processor/processor.js	`100% <100%> (ø)`	⬆️
packages/rollup/rollup.js	`100% <100%> (ø)`	⬆️
packages/scratchpad/test/construct.js	`93.75% <93.75%> (ø)`
packages/scratchpad/chunks.js	`98.3% <98.3%> (ø)`
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 23569dc...cb05a7c. Read the comment docs.

TravisBuddy · 2019-02-05T08:04:08Z

Travis tests have failed

Hey @tivac,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 8

View build log

npm test -- --ci

> modular-css@0.0.0 pretest /home/travis/build/tivac/modular-css
> npm run parser


> modular-css@0.0.0 parser /home/travis/build/tivac/modular-css
> pegjs packages/processor/parsers/parser.pegjs


> modular-css@0.0.0 test /home/travis/build/tivac/modular-css
> jest "--ci"

PASS lint packages/rollup/test/rollup.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/rollup.test.js
        646:9  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/processor/test/options.test.js
PASS lint packages/rollup/test/splitting.test.js
PASS lint packages/processor/test/api.test.js
PASS lint packages/processor/processor.js
PASS lint packages/rollup/test/watch.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/watch.test.js
        7:7  warning  'read' is assigned a value but never used  no-unused-vars
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/rollup/rollup.js
PASS lint packages/svelte/test/svelte.test.js
PASS lint packages/webpack/test/webpack.test.js
PASS lint packages/browserify/browserify.js
PASS lint packages/browserify/test/factor-bundle.test.js
PASS lint packages/svelte/svelte.js
PASS lint packages/browserify/test/browserify.test.js
PASS lint packages/processor/test/composition.test.js
PASS lint packages/processor/test/values.test.js
PASS lint packages/rollup-rewriter/test/rewriter.test.js
PASS lint packages/www/src/repl/store.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/www/src/repl/store.js
         97:13  warning  Unexpected console statement  no-console
        117:13  warning  Unexpected console statement  no-console
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/www/rollup.config.js
PASS lint packages/postcss/test/postcss.test.js
PASS lint packages/browserify/test/watchify.test.js
PASS lint packages/rollup-rewriter/rewriter.js
PASS lint packages/rollup/chunker.js
PASS lint packages/scratchpad/chunks.js
PASS lint packages/processor/plugins/composition.js
PASS lint packages/processor/plugins/scoping.js
PASS lint packages/processor/plugins/values-replace.js
PASS lint packages/webpack/plugin.js
PASS lint packages/aliases/test/aliases.test.js
PASS lint packages/processor/test/scoping.test.js
PASS lint packages/browserify/test/issue-58.test.js
PASS lint packages/processor/test/keyframes.test.js
PASS lint packages/browserify/test/issue-313.test.js
PASS lint packages/cli/test/cli.test.js
PASS lint packages/paths/test/paths.test.js
PASS lint packages/processor/plugins/externals.js
PASS lint packages/processor/test/externals.test.js
PASS lint packages/processor/plugins/graph-nodes.js
PASS lint packages/webpack/loader.js
PASS lint packages/cli/cli.js
PASS lint packages/browserify/test/issue-105.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/browserify/test/issue-105.test.js
        16:13  warning  Skipped test  jest/no-disabled-tests
        23:13  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/processor/test/getters.test.js
PASS lint packages/scratchpad/test/chunks.test.js
PASS lint packages/www/build/html/guide.js
PASS lint packages/www/build/rollup-plugin-postcss.js
PASS lint packages/namer/test/namer.test.js
PASS lint packages/www/build/html/repl.js
PASS lint packages/glob/test/glob.test.js
PASS lint packages/postcss/postcss.js
PASS lint packages/www/build/rollup-plugin-generate-html.js
PASS lint packages/processor/test/exports.test.js
PASS lint packages/namer/namer.js
PASS lint packages/www/build/html/changelog.js
PASS lint packages/processor/test/issues/issue-191.test.js
PASS lint packages/www/build/html/home.js
PASS lint packages/processor/test/issues/issue-56.test.js
PASS lint packages/processor/test/issues/issue-24.test.js
PASS lint packages/www/build/html/css.js
PASS lint packages/processor/test/issues/issue-98.test.js
PASS lint packages/processor/plugins/values-local.js
PASS lint packages/processor/plugins/values-composed.js
PASS lint packages/processor/plugins/values-namespaced.js
PASS lint packages/processor/plugins/values-imported.js
PASS lint packages/www/build/svelte.js
PASS lint packages/scratchpad/chunktest.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/scratchpad/chunktest.js
        37:1   warning  Unexpected console statement  no-console
        40:5   warning  Unexpected console statement  no-console
        43:20  warning  Unexpected console statement  no-console
        46:1   warning  Unexpected console statement  no-console
      
      ✖ 4 problems (0 errors, 4 warnings)
      

PASS lint packages/processor/plugins/values-export.js
PASS lint packages/scratchpad/test/construct.js
PASS lint packages/www/build/rollup-plugin-sirv.js
PASS lint packages/processor/plugins/keyframes.js
PASS lint packages/rollup-rewriter/formats/amd.js
PASS lint packages/processor/test/unicode.test.js
PASS lint packages/aliases/aliases.js
PASS lint packages/processor/lib/graph-tiers.js
PASS lint packages/rollup-rewriter/formats/system.js
PASS lint packages/glob/glob.js
PASS lint packages/test-utils/logs.js
PASS lint packages/processor/lib/resolve.js
PASS lint packages/processor/lib/output.js
PASS lint packages/test-utils/rollup-build-snapshot.js
PASS lint packages/processor/test/issues/issue-66.test.js
PASS lint packages/processor/test/issues/issue-261.test.js
PASS lint packages/www/src/repl/listen.js
PASS lint packages/www/build/rollup-plugin-add-watch-files.js
PASS lint packages/test-utils/rollup-code-snapshot.js
PASS lint packages/test-utils/read-dir.js
PASS lint packages/processor/lib/identifiers.js
PASS lint packages/paths/paths.js
PASS lint packages/browserify/test/lib/bundle.js
PASS lint packages/scratchpad/test/snapshot.js
PASS lint packages/processor/lib/normalize.js
PASS lint packages/rollup-rewriter/formats/es.js
PASS lint packages/test-utils/relative.js
PASS lint packages/test-utils/write.js
PASS lint packages/test-utils/rollup-watching.js
PASS lint packages/www/src/repl/data/prompt.js
PASS lint packages/processor/lib/message.js
PASS lint packages/www/build/rollup-plugin-clean.js
PASS lint packages/www/build/environment.js
PASS lint packages/processor/lib/relative.js
PASS lint packages/www/stubs/path.js
PASS lint packages/www/build/html/markdown.js
PASS lint packages/test-utils/read.js
PASS lint packages/www/src/repl/codemirror.js
PASS lint packages/test-utils/exists.js
PASS lint packages/test-utils/warn.js
PASS lint packages/test-utils/prefix.js
PASS lint packages/test-utils/namer.js
PASS lint packages/www/stubs/fs.js
PASS lint packages/www/src/repl/index.js
PASS tests packages/rollup/test/rollup.test.js
PASS tests packages/processor/test/options.test.js
PASS tests packages/rollup/test/splitting.test.js
PASS tests packages/processor/test/api.test.js
 › 1 snapshot obsolete.
   • /processor.js API .normalize() should normalize file inputs based on the processor cwd 1
PASS tests packages/rollup/test/watch.test.js
PASS tests packages/svelte/test/svelte.test.js
(node:5338) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
PASS tests packages/webpack/test/webpack.test.js
PASS tests packages/browserify/test/factor-bundle.test.js
PASS tests packages/browserify/test/browserify.test.js
PASS tests packages/processor/test/composition.test.js
PASS tests packages/processor/test/values.test.js
PASS tests packages/rollup-rewriter/test/rewriter.test.js
PASS tests packages/postcss/test/postcss.test.js
PASS tests packages/browserify/test/watchify.test.js
PASS tests packages/aliases/test/aliases.test.js
PASS tests packages/processor/test/scoping.test.js
PASS tests packages/browserify/test/issue-58.test.js
PASS tests packages/processor/test/keyframes.test.js
PASS tests packages/browserify/test/issue-313.test.js
PASS tests packages/cli/test/cli.test.js
PASS tests packages/paths/test/paths.test.js
PASS tests packages/processor/test/externals.test.js
PASS tests packages/processor/test/getters.test.js
PASS tests packages/scratchpad/test/chunks.test.js
PASS tests packages/namer/test/namer.test.js
PASS tests packages/glob/test/glob.test.js
PASS tests packages/processor/test/exports.test.js
PASS tests packages/processor/test/issues/issue-56.test.js
PASS tests packages/processor/test/issues/issue-24.test.js
PASS tests packages/processor/test/issues/issue-98.test.js
PASS tests packages/processor/test/unicode.test.js
PASS tests packages/processor/test/issues/issue-66.test.js
PASS tests packages/processor/test/issues/issue-261.test.js

Snapshot Summary
 › 1 snapshot obsolete from 1 test suite. To remove it, run `npm test -- -u`.
   ↳ packages/processor/test/api.test.js
       • /processor.js API .normalize() should normalize file inputs based on the processor cwd 1

Test Suites: 70 skipped, 141 passed, 141 of 211 total
Tests:       73 skipped, 366 passed, 439 total
Snapshots:   1 obsolete, 307 passed, 307 total
Time:        24.417s
Ran all test suites in 2 projects.
npm ERR! Test failed.  See above for more details.
travis_time:end:0d0132c8:start=1549353455544453468,finish=1549353481352945042,duration=25808491574

TravisBuddy Request Identifier: 9a9aa540-291c-11e9-9de4-fb4b948767f7

Also remove some unnecessary codepaths

tivac added pkg:rollup bugfix pkg:rollup-rewriter labels Feb 5, 2019

tivac self-assigned this Feb 5, 2019

tivac added 3 commits February 4, 2019 23:53

feat: processor.normalize()

a111d5c

Because sometimes you need external access to cleaned-up paths

fix: functional CSS chunking algorithm

49a5eff

Walks JS entries + CSS dep graph to determine ideal chunking locations and merges nodes together until it gets there. Probably a bit slower than before but *way* more accurate and safer to use.

test: improve code coverage a touch

132e4f3

tivac force-pushed the corrected-chunking branch from 6470b22 to 132e4f3 Compare February 5, 2019 07:53

test: more & better coverage

ed80e11

tivac added 5 commits February 5, 2019 13:16

fix: finish porting namer to maps

44f2e0c

Also remove some unnecessary codepaths

Merge branch 'master' of https://github.com/tivac/modular-css

15da4bc

fix: some coverage fixups

a13a096

Merge branch 'master' into corrected-chunking

519de5d

test: updated rollup snapshot

cb05a7c

tivac merged commit e0c5eee into master Feb 5, 2019

tivac deleted the corrected-chunking branch February 5, 2019 21:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: finally wrote correct chunking logic #562

fix: finally wrote correct chunking logic #562

tivac commented Feb 5, 2019

TravisBuddy commented Feb 5, 2019

TravisBuddy commented Feb 5, 2019

codecov bot commented Feb 5, 2019 •

edited

Loading

TravisBuddy commented Feb 5, 2019

fix: finally wrote correct chunking logic #562

fix: finally wrote correct chunking logic #562

Conversation

tivac commented Feb 5, 2019

Description

Motivation and Context

How Has This Been Tested?

Types of changes

Checklist:

TravisBuddy commented Feb 5, 2019

Travis tests have failed

Node.js: 8

TravisBuddy Request Identifier: a97d95f0-2916-11e9-9de4-fb4b948767f7

TravisBuddy commented Feb 5, 2019

TravisBuddy Request Identifier: 19aa23e0-291a-11e9-9de4-fb4b948767f7

codecov bot commented Feb 5, 2019 • edited Loading

Codecov Report

TravisBuddy commented Feb 5, 2019

Travis tests have failed

Node.js: 8

TravisBuddy Request Identifier: 9a9aa540-291c-11e9-9de4-fb4b948767f7

codecov bot commented Feb 5, 2019 •

edited

Loading