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

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

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

@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.

@Aaronepower

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

@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.

@devongovett

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

It's a function because of the logic here:

parcel/src/utils/loadPlugins.js

Lines 29 to 31 in b9004fc

if (Object.keys(options).length > 0) {

plugin = plugin(options);

}

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

parcel/src/utils/loadPlugins.js

Lines 25 to 27 in b9004fc

if (typeof options !== 'object') {

options = {};

}

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:

parcel/src/utils/loadPlugins.js

Lines 25 to 27 in b9004fc

    
           if (typeof options !== 'object') { 
        
             options = {}; 
        
           }

Is it fine if i change it to something like if (typeof options !== 'object' && typeof options !== 'string') { ?

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.

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

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

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!

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.

Navigation Menu

Repository navigation

PostHTML plugins that require css-modules don't work. #395

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

`index.html`

`index.css`

`.postcssrc`

`.posthtmlrc`

`package.json`

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

🌍 Your Environment

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

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (Object.keys(options).length > 0) {
	plugin = plugin(options);
	}

PostHTML plugins that require css-modules don't work. #395

Description

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

index.html

index.css

.postcssrc

.posthtmlrc

package.json

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

🌍 Your Environment

Activity

devongovett commented on Dec 24, 2017

XAMPPRocky commented on Dec 24, 2017

bndnsmth commented on Dec 28, 2017

XAMPPRocky commented on Dec 29, 2017

d4rkr00t commented on Jan 1, 2018

XAMPPRocky commented on Jan 1, 2018

wryk commented on Jan 12, 2018

sandrina-p commented on Jan 13, 2018

PatrickNausha commented on Jan 14, 2018

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

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

XAMPPRocky commented on May 20, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`index.html`

`index.css`

`.postcssrc`

`.posthtmlrc`

`package.json`

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