Feat(variables-scss): Variables-scss exporter can export new tokens structure #DS-1435

[curdaj]

Description

Additional context

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	2274469
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/66d6bbdb2998e4000875c43f
😎 Deploy Preview	https://deploy-preview-1592--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (🟢 up 1 from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	2274469
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/66d6bbdb16426c0008494ed6

[literat]

The holy trinity of the filter, map and reduce is your best friend :-)

[coveralls]

coverage: 78.449% (-0.7%) from 79.191%
when pulling 2274469 on feat/ds-1435-exporter-can-export-new-tokens
into cdc61cf on main.

[literat]

I have tried to run this for the first time and it is looking great 👍

But there are two things that need to be fixed:

• missing - in SCSS variable:

  $container padding:
  $border radius: 
  $spacing systems:

• using tabs instead of spaces (non-blocking right now)

[literat]

You are also using the content directory for all code. Is this enclosing necessary? Can be the formatters, generators and helpers placed right under the src directory?

[curdaj]

• missing - in SCSS variable:

  $container padding:
  $border radius: 
  $spacing systems:

Hmm, shouldn't this be spaces, radii?

Its probably outdated now

[curdaj]

I have tried to run this for the first time and it is looking great 👍

But there are two things that need to be fixed:

• missing - in SCSS variable:

  $container padding:
  $border radius: 
  $spacing systems:

• using tabs instead of spaces (non-blocking right now)

probably from CR to draft - outdated

[literat]

Run yarn format:check
Checking formatting...
[warn] exporters/variables-scss/generated/exporter.cjs
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

I think the generated directory should be ignored by Prettier. 🤔

[literat]

Also, tests are failing with:

src/content/formatters/__tests__/cssFormatter.test.ts
  ● formatCSS › should correctly format CSS string

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 3
    + Received  + 3

      $my-var: (
    -     color: #000,
    +         color: #000,
    -     background: #fff,
    +         background: #fff,
    -     border: 1px solid #000,
    +         border: 1px solid #000,
      ) !default;
      ↵

      12 | describe('formatCSS', () => {
      13 |   it('should correctly format CSS string', () => {
    > 14 |     expect(formatCSS(mockedUnformattedCSS)).toBe(mockedFormattedCSS);
         |                                             ^
      15 |   });
      16 | });
      17 |

      at Object.<anonymous> (src/content/formatters/__tests__/cssFormatter.test.ts:14:

[curdaj]

Member

I don't understand this. It used to work normally for me and now it doesn't work again.

[curdaj]

Member

I don't understand this. It used to work normally for me and now it doesn't work again.

It seems to me that something formatted the "unformatted.scss" and that's why it was failing. I'm not sure if prittier won't do something there.

[curdaj]

Run yarn format:check
Checking formatting...
[warn] exporters/variables-scss/generated/exporter.cjs
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

I think the generated directory should be ignored by Prettier. 🤔

It started failing since I changed it to cjs according to CR

[curdaj]

Run yarn format:check
Checking formatting...
[warn] exporters/variables-scss/generated/exporter.cjs
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

I think the generated directory should be ignored by Prettier. 🤔

It started failing since I changed it to cjs according to CR

EDIT: solved. I added this file to prettierignore

[curdaj]

Member

I don't understand this. It used to work normally for me and now it doesn't work again.

It seems to me that something formatted the "unformatted.scss" and that's why it was failing. I'm not sure if prittier won't do something there.

SOLVED - the problem was that prettier always formatted the example scss file before the commit. I added it to the prettierignore

[pavelklibani]

Good job ❗

[literat]

Maybe better using __fixtures__ to ignore.

[literat]

I think you can use just generated name in general.

[literat]

Missing description for this comment why we are ignoring this. And same for the comment few lines lower.