Parcel: PostHTML plugins that require css-modules don't work.

Created on 24 Dec 2017 · 10Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛

Trying to use posthtml plugins that require the json containing the css classes causes the index.html to become <div></div>. regardless of what it was.

🎛 Configuration (.babelrc, package.json, cli command)

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1 classname="foo">Hello World</h1>
</body>
</html>

`index.css`

.foo {
    background-color: red;
}

`.postcssrc`

{
    "modules": true,
}

`.posthtmlrc`

{
    "plugins": {
        "posthtml-css-modules": true
    }
}

`package.json`

{
  "name": "parcel",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "postcss-modules": "^1.1.0",
    "posthtml-postcss-modules": "^0.1.5"
  }
}

🤔 Expected Behavior

Generate the expected html with modifications performed by the posthtml plugins.

😯 Current Behavior

Generates a index.html containing only <div></div>

🔦 Context

This prevents me from working on any project using parcel.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.3.1 |
| Node | v9.3.0 |
| npm/Yarn | 5.6.0/1.3.2 |
| Operating System | macOS 10.13.2 |

Bug Stale Ignore

Source

XAMPPRocky

👍1

Most helpful comment

A finding that may be helpful to @sandrina-p:

I got posthtml-include to work by ensuring that I had set the "root" property in my .posthtmlrc. If the include tag src attribute isn't correct with respect to root, <include src ... simply gets emitted as <include src ... in the parcel build output. IMHO, this should emit an error instead. Thanks, @devongovett for the link to the integration test!

See full code at https://github.com/PatrickNausha/PersonalWebsite/tree/parcel

A finding related to `parcel` vs `parcel build` that perhaps warrants a new issue:

Change .posthtmlrc in my code to the below (or pull down https://github.com/PatrickNausha/PersonalWebsite/tree/parcel-broken-posthtmlrc and yarn install):

{
    "plugins": {
        "posthtml-include": true
    }
}

Run parcel build ./src/index.html to see

yarn run v1.2.1
$ parcel build ./src/index.html
🚨  /Users/patrick.nausha/code/PersonalWebsite/src/index.html: tree.forEach is not a function
    at Object.collapseWhitespace [as default] (/Users/patrick.nausha/code/PersonalWebsite/node_modules/htmlnano/lib/modules/collapseWhitespace.js:18:10)
    at /Users/patrick.nausha/code/PersonalWebsite/node_modules/htmlnano/lib/htmlnano.js:58:42
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The reference to tree seems related to

I've also done some debugging into the issue and have traced it to the posthtml line where the res.tree returned is a function named parse rather than an AST.

Run parcel ./src/index.html and watch it succeed happily.

Open the browser to http://localhost:1234/

The page source will be <div></div>

Here's what I expect to be different:

Both parcel and parcel build should probably fail.
The error message should be related to .posthtmlrc or other PostHTML validation.

I hope this helps!

PatrickNausha on 14 Jan 2018

👍4 🎉1

All 10 comments

There is an example in the tests that works. Can you give any more details about what doesn't work for you? Are there error messages?

https://github.com/parcel-bundler/parcel/tree/master/test/integration/posthtml

devongovett on 24 Dec 2017

@devongovett Hello, there are no error messages it just outputs <div></div>. That example is not the same as what I've shown above all that integration test is if a single posthtml plugin works not posthtml with postcss.

XAMPPRocky on 24 Dec 2017

@Aaronepower a reproducible test repo or gist would be hugely helpful in debugging!

brandon93s on 28 Dec 2017

@brandon93s Hello, I have provided the needed files to reproduce the bug in the original post. I've also done some debugging into the issue and have traced it to the posthtml line where the res.tree returned is a function named parse rather than an AST.

XAMPPRocky on 29 Dec 2017

I've investigated a little bit, and some of the things i've found:

It's a function because of the logic here: https://github.com/parcel-bundler/parcel/blob/b9004fc3a0092cdfa0b18e196ab25a79e582b2d1/src/utils/loadPlugins.js#L29-L31 Since options there, for this particular use case, is a boolean, parcel never calls plugin().
Also you need to specify a file, dir with files or object that will be used for replacing class names with generated class names e.g. posthtml([require('posthtml-css-modules')('./cssClasses.json')]).
Here https://github.com/parcel-bundler/parcel/blob/b9004fc3a0092cdfa0b18e196ab25a79e582b2d1/src/utils/loadPlugins.js#L25-L27 parcel is ignoring all none object options meaning even if you specify a file with classes something like: "posthtml-css-modules": "./cssClasses.json" it won't work.
But you still can specify options as an object e.g. "posthtml-css-modules": { "title": "_title_116zl_1 _heading_9dkf" } – which works fine...

@devongovett is there any particular reason for:
https://github.com/parcel-bundler/parcel/blob/b9004fc3a0092cdfa0b18e196ab25a79e582b2d1/src/utils/loadPlugins.js#L25-L27
Is it fine if i change it to something like if (typeof options !== 'object' && typeof options !== 'string') { ?

d4rkr00t on 1 Jan 2018

It might be out of scope for this single issue, but I was wondering about how closely using css-modules in parcel should be with posthtml since they are already generated and special cased in parcel and they are not stored in a way that is visible for the user of parcel to use. I was thinking that there are two solutions to the problem.

Provide an option in .postcssrc to allow outputting css-modules to a file.
Have HTMLAsset store the generated class names of it's child CSSAssets and use posthtml-css-modules if it is enabled in a similar way to "modules": true in .postcssrc.

XAMPPRocky on 2 Jan 2018

Because of issue renaming I don't know if it's still belongs here :
Running any posthtml plugin with empty options ({}) generate <div></div>.

With this .posthtmlrc configuration parcel works fine but meeeh :

{
    "plugins": {
        "posthtml-include": {
            "useless-option": true
        },
        "posthtml-md": {
            "useless-option": true
        }
    }
}

wryk on 12 Jan 2018

I have the same problem and @wryk solution didn't work for me... I just can't use posthtml-include...

@brandon93s I added a repo so you guys can debug it

sandrina-p on 13 Jan 2018

A finding that may be helpful to @sandrina-p:

See full code at https://github.com/PatrickNausha/PersonalWebsite/tree/parcel

A finding related to `parcel` vs `parcel build` that perhaps warrants a new issue:

Change .posthtmlrc in my code to the below (or pull down https://github.com/PatrickNausha/PersonalWebsite/tree/parcel-broken-posthtmlrc and yarn install):

{
    "plugins": {
        "posthtml-include": true
    }
}

Run parcel build ./src/index.html to see

yarn run v1.2.1
$ parcel build ./src/index.html
🚨  /Users/patrick.nausha/code/PersonalWebsite/src/index.html: tree.forEach is not a function
    at Object.collapseWhitespace [as default] (/Users/patrick.nausha/code/PersonalWebsite/node_modules/htmlnano/lib/modules/collapseWhitespace.js:18:10)
    at /Users/patrick.nausha/code/PersonalWebsite/node_modules/htmlnano/lib/htmlnano.js:58:42
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The reference to tree seems related to

I've also done some debugging into the issue and have traced it to the posthtml line where the res.tree returned is a function named parse rather than an AST.

Run parcel ./src/index.html and watch it succeed happily.

Open the browser to http://localhost:1234/

The page source will be <div></div>

Here's what I expect to be different:

Both parcel and parcel build should probably fail.
The error message should be related to .posthtmlrc or other PostHTML validation.

I hope this helps!

PatrickNausha on 14 Jan 2018

👍4 🎉1

Hey, I wish you wouldn't close bug reports just because they're stale, it kind of defeats the point of making the bug report in the first place.

XAMPPRocky on 20 May 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

🐛 Using type="text" on input in HTML gets stripped

donaldallen · 3Comments

🙋 Install peer dependencies of autoinstalled modules

devongovett · 3Comments

🐛 Parcel is not working with angularjs [es2015]

medhatdawoud · 3Comments

multi plugin for same file only execute one

466023746 · 3Comments

🙋 Add https support in development server

jzimmek · 3Comments

Parcel: PostHTML plugins that require css-modules don't work.

🎛 Configuration (.babelrc, package.json, cli command)

index.html

index.css

.postcssrc

.posthtmlrc

package.json

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

🌍 Your Environment

Most helpful comment

A finding that may be helpful to @sandrina-p:

A finding related to parcel vs parcel build that perhaps warrants a new issue:

All 10 comments

A finding that may be helpful to @sandrina-p:

A finding related to parcel vs parcel build that perhaps warrants a new issue:

Related issues

`index.html`

`index.css`

`.postcssrc`

`.posthtmlrc`

`package.json`

A finding related to `parcel` vs `parcel build` that perhaps warrants a new issue:

A finding related to `parcel` vs `parcel build` that perhaps warrants a new issue: