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

Using cssnext inside browsers #428

Closed
frandiox opened this Issue Dec 4, 2017 · 8 comments

Comments

3 participants
@frandiox

frandiox commented Dec 4, 2017

Hi! First of all, thanks for all the job here :)

I'm trying to run postcss inside the browser to make some kind of Codepen for CSS. After bundling with Webpack, postcss and some plugins are working as expected. However, when including postcss-cssnext it crashes. After some debugging, I've found that the reason is the require statements in https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js

These are "dynamic" requires inside functions. I understand the reasoning behind it for Node environments but, when trying to bundle this library with Webpack, these dependencies are not found (they are not bundled). On top of that, this file mixes ES Modules (import/export) with CommonJS (require/module), which I believe is not a very good practice. I've tried hoisting these dependencies manually and everything works correctly again.

Do you think we can modify this file or provide an alternative solution for browsers? Or perhaps, do you know any option in Webpack to force bundling these dynamic dependencies? I've been checking but couldn't find anything.

Apart from this, there's a warning that might be related to browserslist: ./node_modules/browserslist/index.js 781:20-33 Critical dependency: the request of a dependency is an expression. Any idea?

Thanks!

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Dec 6, 2017

Owner

Not sure what to say here as we don't have any problem on running cssnext in a browser. See http://cssnext.io/playground/.

Owner

MoOx commented Dec 6, 2017

Not sure what to say here as we don't have any problem on running cssnext in a browser. See http://cssnext.io/playground/.

@frandiox

This comment has been minimized.

Show comment
Hide comment
@frandiox

frandiox Dec 6, 2017

@MoOx I've been checking this again and I'm getting more and more confused 😓
Importing cssnext from a cloned repo works fine, but the one I install with npm crashes: TypeError: __webpack_require__(...) is not a function at Object.fontFamilySystemUi (features.js?4c1b:96)

If I replace node_modules/postcss-cssnext/node_modules with the cloned repo's node_modules it works again (the first one is flattened by npm).

At this point, I don't know if it's a problem in the node_modules structure or a misconfiguration in Webpack (the one I have is quite generic, though). However, making the change I mentioned in the first post fixes everything. If you want to make this change 74a37a2 (passes all tests and the website and playground work well), I can make a PR. Otherwise, feel free to close this issue 👍

frandiox commented Dec 6, 2017

@MoOx I've been checking this again and I'm getting more and more confused 😓
Importing cssnext from a cloned repo works fine, but the one I install with npm crashes: TypeError: __webpack_require__(...) is not a function at Object.fontFamilySystemUi (features.js?4c1b:96)

If I replace node_modules/postcss-cssnext/node_modules with the cloned repo's node_modules it works again (the first one is flattened by npm).

At this point, I don't know if it's a problem in the node_modules structure or a misconfiguration in Webpack (the one I have is quite generic, though). However, making the change I mentioned in the first post fixes everything. If you want to make this change 74a37a2 (passes all tests and the website and playground work well), I can make a PR. Otherwise, feel free to close this issue 👍

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Dec 6, 2017

Owner

the idea of using require is to lazy load in memory all plugin, which especially make sense if not user (per config or browserlist). So I am not a fan of making this change. I am sure you probably have a config issue. Especially when I see __webpack_require__(...) is not a function. You should maybe check the loader user for cssnext code (src or lib?) and the webpack version used.

Owner

MoOx commented Dec 6, 2017

the idea of using require is to lazy load in memory all plugin, which especially make sense if not user (per config or browserlist). So I am not a fan of making this change. I am sure you probably have a config issue. Especially when I see __webpack_require__(...) is not a function. You should maybe check the loader user for cssnext code (src or lib?) and the webpack version used.

@MoOx MoOx closed this Dec 6, 2017

@frandiox

This comment has been minimized.

Show comment
Hide comment
@frandiox

frandiox Dec 6, 2017

I'm using Webpack 3.x. Looks like the problem is the combination of ESM and CJS. postcss-font-family-system-ui uses export default for module environments, so the require('postcss-font-family-system-ui') in postcss-cssnext gets { default: function() {...} } instead of the actual function (at least in my webpack environment).

For the record, this is the minimum fix that I've come up with:

// webpack.config.js

...
resolve: {
  alias: {
    'postcss-font-family-system-ui$': './pffsu-monkeypatch.js'
  }
}
// pffsu-monkeypatch.js

module.exports = require('postcss-font-family-system-ui/src/main.mjs').default;

@MoOx Thanks for your time!

frandiox commented Dec 6, 2017

I'm using Webpack 3.x. Looks like the problem is the combination of ESM and CJS. postcss-font-family-system-ui uses export default for module environments, so the require('postcss-font-family-system-ui') in postcss-cssnext gets { default: function() {...} } instead of the actual function (at least in my webpack environment).

For the record, this is the minimum fix that I've come up with:

// webpack.config.js

...
resolve: {
  alias: {
    'postcss-font-family-system-ui$': './pffsu-monkeypatch.js'
  }
}
// pffsu-monkeypatch.js

module.exports = require('postcss-font-family-system-ui/src/main.mjs').default;

@MoOx Thanks for your time!

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Dec 6, 2017

Owner

Alternatively, you might be interested by https://github.com/59naga/babel-plugin-add-module-exports

Not sure why we don't have this issue in our repo for the website

Owner

MoOx commented Dec 6, 2017

Alternatively, you might be interested by https://github.com/59naga/babel-plugin-add-module-exports

Not sure why we don't have this issue in our repo for the website

@RyanZim

This comment has been minimized.

Show comment
Hide comment
@RyanZim

RyanZim Dec 6, 2017

Collaborator

I built a stupid monkey patch to get this working with browserify: here's postcss-font-family-system-ui as a CommonJS module: https://github.com/RyanZim/postcss-font-family-system-ui-commonjs

Used by my WIP repl for postcss: https://github.com/RyanZim/postcss-repl

Collaborator

RyanZim commented Dec 6, 2017

I built a stupid monkey patch to get this working with browserify: here's postcss-font-family-system-ui as a CommonJS module: https://github.com/RyanZim/postcss-font-family-system-ui-commonjs

Used by my WIP repl for postcss: https://github.com/RyanZim/postcss-repl

@frandiox

This comment has been minimized.

Show comment
Hide comment
@frandiox

frandiox Dec 6, 2017

@MoOx No idea, perhaps babel-node has something to do. I've already checked that plugin today but unfortunately it doesn't work with babel-preset-env.

frandiox commented Dec 6, 2017

@MoOx No idea, perhaps babel-node has something to do. I've already checked that plugin today but unfortunately it doesn't work with babel-preset-env.

@frandiox

This comment has been minimized.

Show comment
Hide comment
@frandiox

frandiox Dec 6, 2017

@RyanZim I'm glad I'm not the only one struggling with this 😅
I wish I found that earlier but now my simple monkeypatch works well in Webpack. It simply redirects to the default property of the imported object.

frandiox commented Dec 6, 2017

@RyanZim I'm glad I'm not the only one struggling with this 😅
I wish I found that earlier but now my simple monkeypatch works well in Webpack. It simply redirects to the default property of the imported object.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment