Comments (17)
My use case involves repos that have source code in a src/
directory and the Rollup bundles are placed in a dist/
or lib/
directory. Now, I remap the source paths as if the code existed in the lib/dist folder, so that all ../src/path/to/file
are path/to/file
. However, this does not carry over to the css file maps meaning that the devTools > sources show a src
folder with just css files. Right now, I am cheating by doing a find and replace on the map file, which has the potential of going wrong though. Therefore, it would be nice if css sourcemap path transforms was a also part of the Rollup build process and my request here!
from rollup-plugin-styles.
@CxRes done, see transform
from sourcemap options
Usage example:
styles({
sourceMap: [true, { transform: m => (m.sources = ["virt"]) }]
})
from rollup-plugin-styles.
I just tried to implement the feature in my code and I realized you would need to expose sourcemapPath
, like sourcemapPathTransform
function in Rollup does...
from rollup-plugin-styles.
Hi @CxRes,
Should not be too hard to do, although I would like to know the use case for this one first.
from rollup-plugin-styles.
🎉 This issue has been resolved in version 3.13.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from rollup-plugin-styles.
@Anidetrix Thanks!!!!!!!!!!
from rollup-plugin-styles.
@CxRes be aware that this will only work for extract
mode since resulting file name is not available inside transform
hook, which is when inject
and emit
modes are finished.
from rollup-plugin-styles.
Released as a part of 3.14.0, hope it works for you
from rollup-plugin-styles.
Do css sourcemaps even work with inject
mode? I cannot see css sources in the map file when I use inject
mode...
from rollup-plugin-styles.
Sourcemap is always inlined as a comment in inject
and emit
modes, it's not in a separate file
from rollup-plugin-styles.
My bad, I missed the sourcemap comment. I was looking in the js sourcemap file!
Though it seems a little strange. Is it not possible or for some reason undesirable that sourcemap is not written to the sourcemap file? I thought the magic-string library allowed one to do that in transform hook...
from rollup-plugin-styles.
Seems to not be possible at the moment, since it's already passed down the build pipeline, Rollup just doesn't seem to want to use it itself.
from rollup-plugin-styles.
Thats very strange, it seems like a bug (or maybe Rollup just filters all non-js files). Lets try asking Rollup people for help...
from rollup-plugin-styles.
After a lot of looking around I suspect that the issue is with the generated css map here. I have been able to get Rollup to accept sourcemap for a non-js file (html imported as string) in a plugin that I fixed in the last couple of days. Have a look at rollup-plugin-html-string.
from rollup-plugin-styles.
I went code-spelunking today and have been able to figure out why the maps are not being passed.
The transformed code in the transformed hook inserts the css injector function using an import statement. This confuses rollup which now resolves only the injector function file and puts its map into combined sourcemap and ignores the map that was passed in the transform hook.
If you remove the injector function (of course this breaks the functionality), the sourcemap is passed correctly. So, it seems there must a canonical way of importing code during a transform, but I just cannot figure out what that way is. The documentation on plugins is so terse that it might as well be written in Latin! I'll try to figure something out...
from rollup-plugin-styles.
Also the order in which the injector is introduced is wrong. If you look at res.code
returned as code
in the transform function. It first exports var css
and then imports the injector function and then exports the default css. The import must always precede the export. It should be like:
import injector from '...'
var css = '...'
injector(css);
export default css; export {css};
from rollup-plugin-styles.
Thank you for your efforts, will look into it.
from rollup-plugin-styles.
Related Issues (20)
- Unexpected code splitting, possible feature request
- Support Parcel CSS as alternative to cssnano HOT 3
- Support importing style with query string HOT 1
- Scss @charset failing
- Separate css and .min.css files
- Is there a way to pass a style nonce property when the code injects the styles?
- Test fail due to cssnano
- [Feat request] customlize the image inline function
- Is it possible to use globs to import sass files?
- Prevent to add hash to referenced files inside CSS HOT 1
- Support for rollup v3 HOT 15
- CSS Injection into Server Side render (SSR) HOT 3
- [!] (plugin styles) Error: EACCES: permission denied, open '/.config/postcssrc' HOT 1
- Updating styles affects js file hash
- I would like to be able to freely define the export path.
- support lightningcss as an alternative to cssnano
- CSS input, emit raw output to file (no ES parsing)
- scss nesting not working with vue scoped style
- Hello, May I know if this project `rollup-plugin-styles` is still maintained? HOT 2
- Is it possible to import css file to js with preserveModules option enabled? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rollup-plugin-styles.