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.

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

experimental : postcss-custom-shorthands #647

Conversation

romainmenke
Copy link
Member

@romainmenke romainmenke commented Oct 15, 2022

see : w3c/csswg-drafts#7879


Notes :

  1. This plugin has an internal versioning mechanic because it allows people to rapidly try out a different variant/flavour. This doesn't really have anything to do with the semver version of the npm package.

The experimentalVersion option determines which proposal you are using.
The latest proposal is mostly the default. (currently 2)

  • 1 : <link to issue>
  • 2 : <link to issue>
postcssCustomShorthandsExperimental({ experimentalVersion: 1 })
  1. This plugin introduces css-tree as a dependency.
    I am fine with having it as a workspace dependency but if this feature ever becomes a real thing I prefer writing our own syntax definition parser from scratch. I don't like the bloat of having all of css-tree for this single parser. see : https://www.w3.org/TR/css-properties-values-api-1/#parsing-syntax

  2. This package was quickly written and lacks sufficient test coverage and coding style is not ideal in places. This is fine for now I think, as we will end up trashing it later. Better to start from scratch if we ever build this for real.

  3. Custom data in VSCode has this effect :

Screenshot 2022-10-15 at 11 52 44

Screenshot 2022-10-15 at 11 57 40

A real plugin would not have this feature as we would rely on editors to do this work themselves. But it is useful to get a glimpse of the real author experience.

@@ -1,9 +1,8 @@
export const packageBabelPreset = [
['@babel/preset-env', {
corejs: 3,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had already fixed this in the v8 branch.
We don't have corejs as a dependency.
This worked because we only wrote JS that didn't need any polyfills from corejs.

css-tree might require a polyfill for typed arrays. (these matches can have false positives)

Removing corejs from our config is the right fix as we never actually had it in the first place.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed!

@romainmenke romainmenke marked this pull request as draft October 15, 2022 21:43
@romainmenke
Copy link
Member Author

This is likely unimplementable : w3c/csswg-drafts#7879 (comment)

{
"name": "@csstools/postcss-custom-shorthands-experimental",
"description": "Research plugin for a Custom Shorthands proposal",
"version": "1.0.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be in the 0.0.x realm?

@Antonio-Laguna
Copy link
Member

So I like this a lot! Love the versions too

I'm wondering a couple of things

  • Should this be tested with custom-properties? Could there be any clashes?
  • Could/should there be an easy way to leverage the default. I've been looking at this and I sort of would expect that no value leads to default however I can also see how this could be problematic

@romainmenke
Copy link
Member Author

Closing because it can not be implemented.

Thank your for reviewing @Antonio-Laguna 🙇

@romainmenke romainmenke deleted the experimental--postcss-custom-shorthands--frank-mule-a61dcf3ff2 branch October 18, 2022 06:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants