Comments (17)
License comments (denoted with /*! ... */
syntax) at the start of a file will now be preserved as of 5cec8be. This style with the exclamation mark is also supported by other minifiers like cssnano and esbuild. Other comments in the middle of a file are still not preserved, as these are much harder to handle. But hopefully this solves a common need at least.
from lightningcss.
Keeping CSS comment is useful when developing WordPress theme.
A theme requires a main style.css
that provides the theme's identity.
Well, we can just provide the main style.css
that contains only theme identity like this:
/*
Theme Name: Theme name
Author: Someone
Description: A custom theme.
Version: 1.0.0
Text Domain: theme-name
Requires PHP: 8.1
Tested up to: 6.0
*/
And then watch / build the real styles in other file that doesn't require the theme's identity information.
It would be nice if there were an option to keep CSS comments.
For people who would like to use Parcel when developing a WordPress theme,
you can use style.css
to provide the theme identity and other file for the real styling.
from lightningcss.
Personally I think a config that allows comments to be preserved is important. There are many legitimate reasons for preserving comments in project production environments. Including legal obligations.
from lightningcss.
I don't think this can be easily done with the current architecture. Parcel CSS is first and foremost a compiler and minifier, and is designed to produce output intended to be consumed by machines, not humans. If you want to do something like formatting (eg prettier), then another tool might be more appropriate.
Distributing code with docs sounds more like source code than compiled code to me. I would just publish the source code and let users compile it as they see fit. But maybe I'm missing something.
from lightningcss.
Many tools hold on to comments with /* @license xxx */
too. I would like this feature for legal reasons.
from lightningcss.
Hi,
For our use case, we would want to generate a final CSS that is aimed to be included inside themes. Keeping the comments are useful for developers working on top of our themes, as I often use the comments for providing technical info about my choices.
I think having a way to keep comments would be a nice addition, this is currently the only thing that block me to migrate to this tool :).
from lightningcss.
We use comments to generate CSS Docs for custom properties. It helps keep implementation and documentation in sync.
from lightningcss.
Is there any news on this @devongovett or way to prioritize this? :) It would be really nice if comments would not be removed here. This really serves as documentation for us, as we redistribute our source code as part of the themes we sell.
from lightningcss.
I'm having the opposite problem - parcel now seems to emit comments by default?
As you can see, my last build only had the license comments:
But after I upgraded Parcel, now I'm getting all sorts of inline comments:
installed versions
$ npm ls
[email protected] /home/mindplay/workspace/funky-test
├── @parcel/[email protected]
├── @parcel/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Any idea what could be causing this?
from lightningcss.
Instead of a boolean switch minify: bool
, it'll be great, if there could provide a callback, to determine how to deal with comments.
Below is how cssnono
s way to preserve license header in CSS file.
minimizerOptions:
// cssnano
{
preset: [
'default',
{
// Keep license related comments (todo: move license comment to a separate file)
discardComments: {
remove: (comment) => {
const keepMe = /^\**!|LICENSE|@preserve|@cc_on/i
return !comment.match(keepMe)
},
},
},
],
},
from lightningcss.
Comments are ignored during tokenization, so it would be pretty difficult to preserve comments anywhere, but perhaps we could preserve comments at the start of a file. Would that work for your use case?
from lightningcss.
For the test I have it wouldn't but that seems like a reasonable tradeoff.
Except if a file that had a comment at the beginning was imported and it ends up in the middle of the file sent to @parcel/css 🤔
I have to say I don't know
from lightningcss.
Yes unfortunately this is not possible, we are selling on a platform where we need to ship a single file :). Anyway, I think I can deal with it !
from lightningcss.
Our project generates an RTL CSS (using rtlcss
) file based on the output CSS file. Inside our styles, we have directives like:
.myClass {
/*rtl:ignore*/
left: auto;
...
}
to skip some conversions.
I replaced postcss with this plugin for autoprefixing but it's removing those directives, so I'm forced to switch back. I can still use the minification part of the plugin but I also really wanted to have the prefixing done by Lightning.
I hope you find a way to support such directives in the future, I'm a fan of what you all are doing here!
from lightningcss.
I'm having the opposite problem - parcel now seems to emit comments by default?
Any idea what could be causing this?
Apparently, we need to add a .terserrc
file with the following content (got the idea from here: evanw/esbuild@04b7e1e):
{
"format": {
"comments": false
}
}
Documentation:
- https://parceljs.org/languages/javascript/#minification
- https://swc.rs/docs/configuration/minification#jscminifyformat
from lightningcss.
But after I upgraded Parcel, now I'm getting all sorts of inline comments:
That is a bug in swc, it's already fixed but not released yet: swc-project/swc#8257
from lightningcss.
Would also love to see comments accessible to some degree, i.e.
transform({
filename: "",
code: Buffer.from(css),
visitor: {
CommentBlock(cmt) {
console.log(cmt);
},
},
}),
So even if they don't necessarily make it to the output at this stage they could be handled in some way during transformation
In my use case I wanted to use comments to indicate which block I was in (as they're identified this way from an API) and capture the URL's, pairing these would have been perfect.
In saying that, really loving the transform API in general and how nice it is to use
from lightningcss.
Related Issues (20)
- `CowRcStr` has a wrong value in some cases HOT 1
- Integrating lightningcss-loader causes webpack bus error HOT 1
- Update for `browserslist-rs`?
- Use lightningCSS in browser shows error : failed to load resource `fs`
- lightningcss - modification preserving colour value (non shorthand). HOT 5
- SyntaxError - AtRuleInvalid when using non-standard Page regions HOT 1
- Doesn't error on invalid property or value
- Option to not add units of measure
- extend documentation for node usage, since it's not beginner friendly HOT 1
- Regression: color-mix()-ing with <system-color>s panics
- The 'center' value becomes 50% and invalidates the rule (mask-position)
- Removing duplicate properties does not work on some (clear, clip) HOT 2
- CLI does not actually get installed HOT 1
- semantic-ui-css stylesheet fails to parse HOT 3
- What is the best way to get parsed selectors from a pseudo-class functions like :host-context? HOT 2
- Backdrop Filter outputs only preffixed version HOT 1
- support for parsing incomplete css based on a previous parser state
- "&" selector not preserved inside @scope HOT 1
- Issue with lightningcss dependency in Vite 5.0 affecting Serverless deployment - Missing ../pkg HOT 11
- Post-napi cargo-auditable panic
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 lightningcss.