Giter Club home page Giter Club logo

Comments (17)

devongovett avatar devongovett commented on May 22, 2024 5

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.

contactjavas avatar contactjavas commented on May 22, 2024 4

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.

Cam avatar Cam commented on May 22, 2024 3

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.

devongovett avatar devongovett commented on May 22, 2024 2

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.

toastal avatar toastal commented on May 22, 2024 2

Many tools hold on to comments with /* @license xxx */ too. I would like this feature for legal reasons.

from lightningcss.

bakura10 avatar bakura10 commented on May 22, 2024 1

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.

kwangure avatar kwangure commented on May 22, 2024 1

We use comments to generate CSS Docs for custom properties. It helps keep implementation and documentation in sync.

from lightningcss.

bakura10 avatar bakura10 commented on May 22, 2024 1

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.

mindplay-dk avatar mindplay-dk commented on May 22, 2024 1

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:

image

But after I upgraded Parcel, now I'm getting all sorts of inline comments:

image

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.

stanleyxu2005 avatar stanleyxu2005 commented on May 22, 2024 1

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 cssnonos 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.

devongovett avatar devongovett commented on May 22, 2024

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.

onigoetz avatar onigoetz commented on May 22, 2024

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.

bakura10 avatar bakura10 commented on May 22, 2024

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.

 avatar commented on May 22, 2024

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.

fzieris avatar fzieris commented on May 22, 2024

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:

from lightningcss.

mischnic avatar mischnic commented on May 22, 2024

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.

Codex- avatar Codex- commented on May 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.