question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[parcel 2] does not minify css imported with `bundle-text:`

See original GitHub issue

🐛 bug report

When importing css as string into javascript with bundle-text: as described here the css does not get processed at all.

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

Cli command: npm run build

Please see attached .zip file for the rest.

🤔 Expected Behavior

The inlined css code should be minified and look like this:

!function(){var n,e=(n="body{background:red}")&&n.__esModule?n.default:n;const d=document.createElement("style"),t=()=>document.body.append(d);d.type="text/css",d.append(e),document.body?t():window.addEventListener("DOMContentLoaded",t)}();

😯 Current Behavior

The inlined css code looks just like before.

!function(){var n,e=(n="/* THIS IS A COMMENT*/\n\n\n/*\nh\ne\nr\ne\n\nh\ne\nr\ne\n\n\nb\ne\n\nw\nh\ni\nt\ne\ns\np\na\nc\ne\ns\n*/\n\n\n\n\n\n\n\n\nbody                                                                                                  {\n                        background: red;\n}\n\n")&&n.__esModule?n.default:n;const d=document.createElement("style"),t=()=>document.body.append(d);d.type="text/css",d.append(e),document.body?t():window.addEventListener("DOMContentLoaded",t)}();

💁 Possible Solution

Process the css

🔦 Context

https://github.com/parcel-bundler/parcel/discussions/5751

💻 Code Sample

parcel-no-css-postpro.zip

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-nightly.562+fbca3a93
Node v15.6.0
npm/Yarn 7.4.0
Operating System macOS High Sierra 10.13.6

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:16 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
devongovettcommented, May 31, 2021

This should be fixed in #6379. Basically it will only try to match pipelines that actually exist in the optimizers config. See https://github.com/parcel-bundler/parcel/pull/6379/commits/a2a7da176c482353ea192bbe50cd75c38e2e2407. Does this logic make sense to you?

1reaction
mischniccommented, Feb 9, 2021

Yeah. You still shouldn’t have to actually list out all pipelines in the optimizers object though…

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS - Parcel
By default, CSS imported from JavaScript is global. If two CSS files define the same class names, ids, custom properties, @keyframes , etc.,...
Read more >
Production - Parcel
Parcel's production mode automatically bundles and optimizes your application for production. It can be run using the parcel build command:
Read more >
Bundle inlining - Parcel
The bundle-text: scheme can be used to inline the contents of a bundle as plain text. ... import cssText from 'bundle-text:./test.css';
Read more >
CSS - Parcel
CSS assets can be imported from a JavaScript or HTML file: import './index.css'; ... If there are no options for a plugin, just...
Read more >
CLI - Parcel
NODE_ENV=development parcel build <entrypoint> --no-minify. It creates the same bundles as serve , but it doesn't watch or serve assets.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found