Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for sass-loader prependData option #12277

Merged
merged 14 commits into from
May 23, 2020

Conversation

Tylerian
Copy link
Contributor

@Tylerian Tylerian commented Apr 28, 2020

This PR adds support for prepending sass code before the actual entry file.

It's common for developers to import their sass mixins and variables once on their project config so they don't need to import them on every file that requires it. Frameworks like gatsby and nuxt.js already support that handy feature.

The way it works is:

/// next.config.js
module.exports = {
  experimental: {
    sassOptions: {
      prependData: `
        /// Scss code that you want to be
        /// prepended to every single scss file.
      `,
    },
  },
}

Fixes #11617 and duplicates

@ijjk
Copy link
Member

ijjk commented Apr 28, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 13.6s 13.5s -86ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +135 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 2.334 2.309 -0.02
/ avg req/sec 1071.26 1082.61 ⚠️ +11.35
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.449 1.257 -0.19
/error-in-render avg req/sec 1725.86 1988.19 ⚠️ +262.33
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.26 kB 6.26 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e8e1.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39.2 kB 39.2 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.81 kB 4.81 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.2 kB 39.2 kB
Overall change 51.7 kB 51.7 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.88 kB 7.88 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 927 B 927 B
link.html gzip 937 B 937 B
withRouter.html gzip 925 B 925 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 14.6s 13.8s -822ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +135 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.26 kB 6.26 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e8e1.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39.2 kB 39.2 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.81 kB 4.81 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.2 kB 39.2 kB
Overall change 51.7 kB 51.7 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.88 kB 7.88 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 557 kB 557 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 557 kB 557 kB
link.js 595 kB 595 kB
routerDirect.js 587 kB 587 kB
withRouter.js 588 kB 588 kB
Overall change 2.89 MB 2.89 MB

@ijjk
Copy link
Member

ijjk commented Apr 28, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12s 12.2s ⚠️ +175ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +123 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 1.923 1.938 ⚠️ +0.01
/ avg req/sec 1299.93 1290.29 -9.64
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.052 1.029 -0.02
/error-in-render avg req/sec 2376.69 2429.08 ⚠️ +52.39
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.26 kB 6.26 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e8e1.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39.2 kB 39.2 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.81 kB 4.81 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.2 kB 39.2 kB
Overall change 51.7 kB 51.7 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.88 kB 7.88 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 927 B 927 B
link.html gzip 937 B 937 B
withRouter.html gzip 925 B 925 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.6s 12.9s ⚠️ +363ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +123 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.26 kB 6.26 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e8e1.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39.2 kB 39.2 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.81 kB 4.81 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.2 kB 39.2 kB
Overall change 51.7 kB 51.7 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.88 kB 7.88 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 557 kB 557 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 557 kB 557 kB
link.js 595 kB 595 kB
routerDirect.js 587 kB 587 kB
withRouter.js 588 kB 588 kB
Overall change 2.89 MB 2.89 MB

@Tylerian
Copy link
Contributor Author

Tylerian commented May 1, 2020

Anything I can do to speed-up this PR?

@timneutkens
Copy link
Member

Anything I can do to speed-up this PR?

The tests are not passing so I assumed it was still work in progress:

  ● SCSS Support › Basic Module Prepend Data Support › should compile successfully

    expect(received).toBe(expected) // Object.is equality

    Expected: 0
    Received: 1

@ijjk
Copy link
Member

ijjk commented May 6, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 13.4s 13.6s ⚠️ +127ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +54 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 2.3 2.284 -0.02
/ avg req/sec 1087.04 1094.75 ⚠️ +7.71
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.47 1.531 ⚠️ +0.06
/error-in-render avg req/sec 1700.21 1633.25 -66.96
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 926 B 926 B
link.html gzip 936 B 936 B
withRouter.html gzip 925 B 925 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 14.2s 14.7s ⚠️ +512ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +54 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 853 kB 853 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 853 kB 853 kB
link.js 891 kB 891 kB
routerDirect.js 883 kB 883 kB
withRouter.js 883 kB 883 kB
Overall change 4.37 MB 4.37 MB

@ijjk
Copy link
Member

ijjk commented May 6, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 10.1s 10s -50ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +54 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 1.707 1.737 ⚠️ +0.03
/ avg req/sec 1464.88 1438.92 -25.96
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.018 1.004 -0.01
/error-in-render avg req/sec 2455.12 2489.47 ⚠️ +34.35
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 926 B 926 B
link.html gzip 936 B 936 B
withRouter.html gzip 925 B 925 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 11s 11s -8ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +54 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 853 kB 853 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 853 kB 853 kB
link.js 891 kB 891 kB
routerDirect.js 883 kB 883 kB
withRouter.js 883 kB 883 kB
Overall change 4.37 MB 4.37 MB

@Tylerian
Copy link
Contributor Author

Tylerian commented May 6, 2020

Anything I can do to speed-up this PR?

The tests are not passing so I assumed it was still work in progress:

  ● SCSS Support › Basic Module Prepend Data Support › should compile successfully

    expect(received).toBe(expected) // Object.is equality

    Expected: 0
    Received: 1

@timneutkens Whoops! I completely missed that, thanks for the highlight!

I made a few changes and it should pass all tests now.

@ijjk
Copy link
Member

ijjk commented May 6, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 11.6s 11.5s -30ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +78 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 1.915 1.939 ⚠️ +0.02
/ avg req/sec 1305.35 1289 -16.35
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.153 1.123 -0.03
/error-in-render avg req/sec 2168.48 2226.54 ⚠️ +58.06
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 926 B 926 B
link.html gzip 936 B 936 B
withRouter.html gzip 925 B 925 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.8s 13.1s ⚠️ +312ms
nodeModulesSize 60.5 MB 60.5 MB ⚠️ +78 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.23 kB 6.23 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.4 kB 56.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 4.83 kB 4.83 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.6 kB 51.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.13 kB 3.13 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 853 kB 853 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 853 kB 853 kB
link.js 891 kB 891 kB
routerDirect.js 883 kB 883 kB
withRouter.js 883 kB 883 kB
Overall change 4.37 MB 4.37 MB

@Tylerian
Copy link
Contributor Author

Tylerian commented May 9, 2020

@timneutkens Is there any chance this will get into 9.3.7?

Every time I add a new scss module and compilation crashes cuz I forget to add the required common imports (for shared vars, mixins, etc...) reminds me of this

@timneutkens
Copy link
Member

Discussed this with @Timer yesterday and we might want to take a separate approach, eg allowing a certain sass file to be global even for sass modules.

@Tylerian
Copy link
Contributor Author

Tylerian commented May 9, 2020

Hmm, I see how having all imports in one place is a way better solution to this problem, but as far as I know (perhaps I'm wrong), there isn't any global sass context I'm aware of. So if my global scss file contains both scss variables and some css utility classes, they might get re-rendered each time it gets referenced on a scss module.

Are you guys going to differentiate the contents of the global scss file so you only feed pure (functions, mixins & vars) scss to the scss modules?

I'm definitely looking forward to how you guys are going to tackle this problem.

@ijjk
Copy link
Member

ijjk commented May 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 11.6s 11.7s ⚠️ +57ms
nodeModulesSize 59.6 MB 59.6 MB ⚠️ +78 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 1.949 1.895 -0.05
/ avg req/sec 1282.62 1319.24 ⚠️ +36.62
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.122 1.133 ⚠️ +0.01
/error-in-render avg req/sec 2227.72 2206.98 -20.74
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.67 kB 6.67 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5ce3.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.71 kB 5.71 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 928 B 928 B
link.html gzip 938 B 938 B
withRouter.html gzip 926 B 926 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.5s 12.6s ⚠️ +76ms
nodeModulesSize 59.6 MB 59.6 MB ⚠️ +78 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.67 kB 6.67 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5ce3.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.71 kB 5.71 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 851 kB 851 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 851 kB
link.js 888 kB 888 kB
routerDirect.js 881 kB 881 kB
withRouter.js 881 kB 881 kB
Overall change 4.36 MB 4.36 MB

@franknoel
Copy link

Discussed this with @Timer yesterday and we might want to take a separate approach, eg allowing a certain sass file to be global even for sass modules.

That would be great! It would be configurable in the next.config.js ?

@tr1s
Copy link

tr1s commented May 14, 2020

Hmm, I see how having all imports in one place is a way better solution to this problem, but as far as I know (perhaps I'm wrong), there isn't any global sass context I'm aware of. So if my global scss file contains both scss variables and some css utility classes, they might get re-rendered each time it gets referenced on a scss module.

Are you guys going to differentiate the contents of the global scss file so you only feed pure (functions, mixins & vars) scss to the scss modules?

I'm definitely looking forward to how you guys are going to tackle this problem.

@Tylerian Do you know if 9.4 solved this? Can't really get it working to know.

Nevermind, @timneutkens answered it here (for anyone else wondering).

@Tylerian
Copy link
Contributor Author

Tylerian commented May 14, 2020

@Tylerian Do you know if 9.4 solved this? Can't really get it working to know.

@tr1s I don't think they'll merge this, it seems they want to take an alternative approach (i.e: importing your global scss file on _app.tsx and having all variables automagically imported on all your scss modules), idk how nor when they're gonna work on it though, perhaps @timneutkens can give us an ETA?

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.8s 13s ⚠️ +227ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +78 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 2.192 2.159 -0.03
/ avg req/sec 1140.57 1157.68 ⚠️ +17.11
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.455 1.426 -0.03
/error-in-render avg req/sec 1717.7 1752.63 ⚠️ +34.93
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 14.2s 13.9s -281ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +78 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 850 kB 850 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 851 kB
link.js 888 kB 888 kB
routerDirect.js 880 kB 880 kB
withRouter.js 880 kB 880 kB
Overall change 4.36 MB 4.36 MB

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Failing test suites

test/integration/scss/test/index.test.js

  • SCSS Support > Basic Module Prepend Data Support > should compile successfully
  • SCSS Support > Basic Module Prepend Data Support > should've emitted a single CSS file
Expand output

● SCSS Support › Basic Module Prepend Data Support › should compile successfully

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: 1

  118 |         stdout: true,
  119 |       })
> 120 |       expect(code).toBe(0)
      |                    ^
  121 |       expect(stdout).toMatch(/Compiled successfully/)
  122 |     })
  123 | 

  at Object.<anonymous> (integration/scss/test/index.test.js:120:20)

● SCSS Support › Basic Module Prepend Data Support › should've emitted a single CSS file

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/scss-fixtures/basic-module-prepend-data/.next/static/css'

@tr1s
Copy link

tr1s commented May 14, 2020

@Tylerian Do you know if 9.4 solved this? Can't really get it working to know.

@tr1s I don't think they'll merge this, it seems they want to take an alternative approach (i.e: importing your global scss file on _app.tsx and having all variables automagically imported on all your scss modules), idk how nor when they're gonna work on it though, perhaps @timneutkens can give us an ETA?

That's approach is what I assumed would happen when I came over to Next hearing about their "global sass imports", hence the issue I created. So the next logical step seems to just allow those files to hold variables that can be used site wide as well. Honestly it sounds way better than having to mess with more Webpack configurations 🤷🏽‍♂️

I'm just using css vars instead for now though, but I'd be nice to have a work around if this feature won't come for a long time. But these folks seem to move quick so I doubt that it will take too long!

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.2s 13.4s ⚠️ +1.2s
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +78 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 2.187 2.261 ⚠️ +0.07
/ avg req/sec 1143.24 1105.9 -37.34
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.41 1.393 -0.02
/error-in-render avg req/sec 1773.32 1794.05 ⚠️ +20.73
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 13.7s 13.3s -403ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +78 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 850 kB 850 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 851 kB
link.js 888 kB 888 kB
routerDirect.js 880 kB 880 kB
withRouter.js 880 kB 880 kB
Overall change 4.36 MB 4.36 MB

@ijjk
Copy link
Member

ijjk commented May 23, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 11.9s 11.9s -41ms
nodeModulesSize 61.8 MB 61.8 MB ⚠️ +295 B
Page Load Tests Overall increase ✓
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 2.009 1.959 -0.05
/ avg req/sec 1244.65 1276.25 ⚠️ +31.6
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.185 1.117 -0.07
/error-in-render avg req/sec 2109.69 2238.99 ⚠️ +129.3
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..fef6.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 928 B 928 B
link.html gzip 937 B 937 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 13s 13s -38ms
nodeModulesSize 61.8 MB 61.8 MB ⚠️ +295 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..fef6.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 844 kB 844 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 844 kB 844 kB
link.js 882 kB 882 kB
routerDirect.js 874 kB 874 kB
withRouter.js 874 kB 874 kB
Overall change 4.33 MB 4.33 MB

@ijjk
Copy link
Member

ijjk commented May 23, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 11.6s 11.8s ⚠️ +189ms
nodeModulesSize 61.8 MB 61.8 MB ⚠️ +295 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
/ failed reqs 0 0
/ total time (seconds) 1.963 1.959 0
/ avg req/sec 1273.48 1276.25 ⚠️ +2.77
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.143 1.169 ⚠️ +0.03
/error-in-render avg req/sec 2187.16 2138.39 -48.77
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..fef6.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
index.html gzip 928 B 928 B
link.html gzip 937 B 937 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
buildDuration 12.5s 12.8s ⚠️ +258ms
nodeModulesSize 61.8 MB 61.8 MB ⚠️ +295 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..fef6.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary Tylerian/next.js patch/sass-prependData Change
_error.js 844 kB 844 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 844 kB 844 kB
link.js 882 kB 882 kB
routerDirect.js 874 kB 874 kB
withRouter.js 874 kB 874 kB
Overall change 4.33 MB 4.33 MB

@timneutkens
Copy link
Member

Landed this just to get parity with other solutions. It's really not ideal tbh and I'd love to have a better solution but this will unblock people asking for it specifically.

@Timer
Copy link
Member

Timer commented May 23, 2020

FYI using prependData will break source maps, so you should avoid using this feature if you need them:
https://webpack.js.org/loaders/sass-loader/#prependdata

@adriandmitroca
Copy link

Not sure if that helps, but afaik Gatsby has solved this issue without breaking sourcemaps using their official gatsby-plugin-sass.

Example usage:

    {
      resolve: "gatsby-plugin-sass",
      options: {
        data: [
          `${__dirname}/node_modules/bootstrap/scss/functions`,
          `${__dirname}/node_modules/bootstrap/scss/variables`,
          `${__dirname}/node_modules/bootstrap/scss/mixins`,
        ]
          .map(x => `@import "${x}";`)
          .join(""),
      },
    },

@Timer
Copy link
Member

Timer commented Jun 9, 2020

@adriandmitroca gatsby-plugin-sass doesn't generate source maps for builds, so could you please elaborate more?

FWIW, this is a bug with the upstream package (sass-loader). Meaning it's outside of both Gatsby and Next.js' control.

If it worked in Gatsby, it'd work in Next.js. After inspecting the Gatsby plugin source, there's no special work around.

❯ ls public | grep styles                                                                 ✘ 130 
styles-823ae8103e36ae8a7f9f.js
styles-823ae8103e36ae8a7f9f.js.map
styles.1d8f1e1fd2fd5cde9401.css

Even if you look in the styles-823ae8103e36ae8a7f9f.js.map, it's empty:

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles-823ae8103e36ae8a7f9f.js","sourceRoot":""}

styles.1d8f1e1fd2fd5cde9401.css.map is nowhere to be found, and not inlined into styles.1d8f1e1fd2fd5cde9401.css.


Maybe there's confusion on what I mean by "break source maps", I'm not referring to the full application. JavaScript sourcemaps will be fine—only your Sass sourcemaps will be broken.

rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
This PR adds support for prepending sass code before the actual entry file.

It's common for developers to import their sass mixins and variables once on their project config so they don't need to import them on every file that requires it. Frameworks like gatsby and nuxt.js already support that handy feature.

The way it works is:

```
/// next.config.js
module.exports = {
  experimental: {
    sassOptions: {
      prependData: `
        /// Scss code that you want to be
        /// prepended to every single scss file.
      `,
    },
  },
}
```

Fixes vercel#11617 and duplicates
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global Sass imports don't work when you use variables, mixins, functions, etc!
7 participants