shoonia / parcel-transformer-css-to-string

Importing CSS files as a string to JavaScript (Support Parcel v2)

Hi and welcome! 👋

parcel-transformer-css-to-string's Issues

parcel-transformer-css-to-string: true is not a PostCSS plugin

The plugin seems to work fine with parcel in watch mode. But when I try to run parcel build, : get the following error:

parcel-transformer-css-to-string: true is not a PostCSS plugin

  Error: true is not a PostCSS plugin
      at Processor.normalize (\node_modules\postcss\lib\processor.js:145:15)
      at new Processor (\node_modules\postcss\lib\processor.js:51:25)
      at postcss (\node_modules\postcss\lib\postcss.js:73:10)
      at Object.transform (\node_modules\parcel-transformer-css-to-string\dist\index.cjs:87:15)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Transformation.runTransformer (\node_modules\@parcel\core\lib\Transformation.js:653:5)
      at async Transformation.runPipeline (\node_modules\@parcel\core\lib\Transformation.js:402:36)
      at async Transformation.runPipelines (\node_modules\@parcel\core\lib\Transformation.js:265:40)
      at async Transformation.runPipelines (\node_modules\@parcel\core\lib\Transformation.js:309:34)
      at async Transformation.run (\node_modules\@parcel\core\lib\Transformation.js:183:21)

I'm not using PostCSS, or at least it's not configured to be used anyway. Is there a way to fix this?

CSS imports are not processed when using the plugin

I have the following css file that I want to inline:

@import 'npm:tippy.js/dist/tippy.css';
@import 'npm:tippy.js/themes/light.css';

.iframe-preview,
.wikipedia-preview {
	width: 600px;
	height: 500px;
	border: none;
	padding: 0.4em 2px 2px;
}
...

When processed by the plugin it becomes the following string:

exports.default = "@import 'npm:tippy.js/dist/tippy.css';\n@import 'npm:tippy.js/themes/light.css';\n\n.iframe-preview,\n.wikipedia-preview {\n\twidth: 600px;\n\theight: 500px;\n\tborder: none;\n\tpadding: 0.4em 2px 2px;\n}\n\n.tippy-content {\n\tpadding: 0;\n}\n\n.text-fragment-preview {\n\tpadding: 1px 0.5em;\n}\n";

Expected behavior: Imports are processed and the results are also inlined