I've inherited a bit of a legacy system that uses Gulp, and am trying to bring in typescript, esmodules, and better dependency management. I'm running into a hurdle with javascript libraries that require css. In modern webpack based frameworks, I believe they implement css imports in js by injecting any imported css into the header in a large style tag. I'm trying to do a similar thing with Gulp.
I'd like to be able to convert this:
// src/index.html
<html>
<head>
</head>
<body>
<input type="text" />
<!-- in src test.bundle.js is actually test.bundle.ts, but gets converted to js by gulp -->
<script src="js/test.bundle.js"></script>
</body>
</html>
To this:
//dist/index.html
<html>
<head>
<!-- This style auto-generated by gulp -->
<style>... anything imported from js modules</style>
</head>
<body>
<input type="text" />
<script src="js/test.bundle.js"></script>
</body>
</html>
// src/test.bundle.ts
import $ from 'jquery';
import 'jquery-typeahead';
//importing a css/scss file would inject it into the head in a style tag for any html page that brings in this script with <script src="js/test.bundle.js"></script>
import 'node_modules/jquery-typeahead/dist/jquery.typeahead.min.css';
...
If I should rethink my strategy, I'm open to that too. The current system is not a single page app with an entry point, so every html page is loaded in isolation, and gulp needs to treat each page as standalone.
Here's a POC that has the ts transpiling working for each independent page, but not a working solution for css importing: https://codesandbox.io/s/intelligent-dubinsky-oyc41?file=/src/test.bundle.ts