WIP: script to create a property-variable map for autocomplete & stylelint

[siddharthkp]

trafficstars

(Do not merge, see demo in https://github.com/github/primer/issues/2008#issuecomment-1604286039)

This is a first draft, the implementation is based on running filter functions on generated variables (tokens-next-private/**/*.css

Example:

paddingBlock: ({type, name, file}) => {
    if (file.name === 'size.css') {
       if (type === 'base') return true
       else if (name.includes('padding') && !name.includes('paddingInline')) return true
    }
},

generated output:

{
  "paddingBlock": [
    { "name": "--stack-padding-normal", "value": "1rem" },
    { "name": "--stack-padding-spacious", "value": "1.5rem" },
    { "name": "--base-size-4", "value": "0.25rem" },
    { "name": "--base-size-8", "value": "0.5rem" }
  ]
}

see full file

---

I'd like to explore adding property information to each token and treating intellisense as a platform as an alternative for this script

example:

 {
  "control": {
    "stack": {
      "padding": {
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
+         "$property": "padding"
        },
        "normal": {
          "$value": "{base.size.16}",
          "$type": "dimension",
+         "$property": "padding"
        },
        "spacious": {
          "$value": "{base.size.24}",
          "$type": "dimension",
+         "$property": "padding"
        }
      }
    }
  }
}

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: c6ae056c667270390a03fb1b9fba3e0e9e23faed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions[bot]]

Variables changed

No variables changed

[lukasoppermann]

Hey @siddharthkp to make the figma token plugin work, I am adding scopes to tokens: https://github.com/primer/primitives/pull/665/files#diff-a22f7c98b98666dfd7ade4b02294caee8eef00a58a4c80b0584f845ec3383d2eR10

I need specific scopes but I am sure we could work something out that works for both cases.

Any additional meta data should be added into the $extensions property according to the w3c specs.

I currently nest my stuff into a org.primer.figma prop, but we can rename this to work for both our cases.

This is what I currently use:

$extensions: {
        'org.primer.figma': {
          collection: 'mode',
          mode: 'dark',
          scopes: ['fgColor'],
        },
      },

The scopes I have are:

  all: ['ALL_SCOPES'],
  radius: ['CORNER_RADIUS'],
  size: ['WIDTH_HEIGHT'],
  gap: ['GAP'],
  bgColor: ['FRAME_FILL', 'SHAPE_FILL'],
  fgColor: ['TEXT_FILL'],
  borderColor: ['STROKE'],

I will need to be able to keep up the mapping in a way so that the output stays the same, but we can add more granular scopes, e.g. padding, margin, gap could all map to GAP in figma but stay separate for your case.

[siddharthkp]

Ooooh, that seems like the one!

but we can add more granular scopes, e.g. padding, margin, gap could all map to GAP in figma but stay separate for your case.

That would be perfect!

[siddharthkp]

I currently nest my stuff into a org.primer.figma prop, but we can rename this to work for both our cases.

I'd suggest we start in another extension key, something like "org.primer.vscode", and then we can merge them once we have confidence in the output?

Don't want to come in your way with my experimental gibberish 😅

[lukasoppermann]

I'd suggest we start in another extension key, something like "org.primer.vscode", and then we can merge them once we have confidence in the output?

Great idea. 👍