Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Some way to import CSS as an asset file, not just adding to the bundle #1719

Open
icopp opened this issue Jul 12, 2018 · 2 comments
Open

Some way to import CSS as an asset file, not just adding to the bundle #1719

icopp opened this issue Jul 12, 2018 · 2 comments
Labels
🙋‍♀️ Feature

Comments

@icopp
Copy link

icopp commented Jul 12, 2018

🙋 feature request

The ability to import a CSS file and get the output path of the file, rather than adding it to the main CSS bundle.

🤔 Expected Behavior

This should work like importing an image (the file gets copied to dist and the imported value is tha path to the file).

😯 Current Behavior

Right now, if I import a CSS file, it gets added to the bundle, and there's no way to reference the file itself.

💁 Possible Solution

import pathToCssFile from './some-css-file-here.css!url'

Exact syntax could vary. Use of ! like webpack is somewhat awkward, but some signifier is needed since there are two different things that we could do with a CSS file in this context (bundle it, or treat it as a separate asset).

An alternate would be to supply a utility method that's only defined at runtime, in the parcel-bundler package or in another namespace (which would otherwise be empty):

import { addFileToBundle } from 'build-time-utilities'; // where build-time-utilities is a published but empty package

const pathToCssFile = addFileToBundle('./some-css-file-here.css')

🔦 Context

  • Some older libraries require use of individual CSS files.
  • Working with iframes can require having a separate CSS bundle.

💻 Examples

This example with TinyMCE (which requires a separate CSS file to inject into the iframes it constructs) is what made me realize this was needed in the first place:

import tinymce from 'tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/skins/lightgray/skin.min.css';

import contentCss from 'tinymce/skins/lightgray/content.min.css!url'

tinymce.init({
  content_css: contentCss,
});
@ymzuiku
Copy link

ymzuiku commented Jul 22, 2018 •
edited

📦 Install parcel-plugin-change-file

yarn add -D parcel-plugin-change-file

📝 Change index.html

Add <!--[ your-code ]-->

<body>
  <!--[ <link href="skin.min.css" rel="stylesheet" type="text/css" />  ]-->
</bodt>

👌 OK, skin.min.css jump to parcel bundler

<body>
  <link href="skin.min.css" rel="stylesheet" type="text/css" />
</bodt>

🙈 Welcome star Github parcel-plugin-change-file

@ymzuiku ymzuiku mentioned this issue Jul 22, 2018
Open
@kanadaj
Copy link

kanadaj commented Jun 23, 2022

Would like to see this too. In the first place, named imports from, JS/TS really shouldn't inline the CSS into the CSS bundle since naming it kinda assumes you'll use it locally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🙋‍♀️ Feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@icopp @DeMoorJasper @kanadaj @ymzuiku