RFC: refactor Sass og innfør en stilguide

[wkillerud]

Hva skjer?

Ganske mye. I forbindelse med refactor til nytt modulsystem for Sass (#2757) ønsket jeg å se grundigere på den eksisterende Sass-kodebasen. Jeg synes vi har manglet et tydelig API, og at vi har vært inkonsekvente med et par ting.

Jeg noterte med ned disse endringsforslagene tidligere i år:

• Gi alle mapper en _index.scss, vekk fra _all.scss (det er det vi ha indeksen til)
  • Inkludert rotnivå så folk kan @use "@fremtind/jkl-table" for eksempel
• Være tydelige på hva som er privat og hva som er public
  • _-prefix i variabelnavn, mixins, og funksjoner
• Namespace alle globale ting, som CSS-variabler og animasjoner, med jkl
• Adopter SassDoc for public ting
• Dokumenter alt dette som en Sass author style guide

Det er helt lov å være uenig i disse forslagene. Supert også om du har andre forslag til forbedringer nå som jeg uansett er i gang med en breaking change.

End goal

• Alle Sass-filer i Jøkul får alt de trenger fra rotnivå av Core
• Prosjektet har et tydelig Sass-API å forholde seg til, dokumentert i stilguiden

Hva skal jeg mene noe om?

Minimum

• Ser stilguiden for Sass OK ut?

Bonus

• Ser SassDocen jeg har skrevet rundtom i Core OK ut?
• Ser stilguiden for React OK ut?

The real MVP

• Finner du noen bugs i noen av endringene mine? 🕵️‍♂️

TODO

• Samle innspill på stilguiden og justere branchen
• Sørge for at alle pakker som avhenger av core får en ny majorversjon ved publisering
• Skrive migreringsguider

🎯 Sjekkliste

• yarn build og yarn ci:test gir ingen feil

[wkillerud]

Benyttet sjansen til å innføre ESLint-regler for imports for å få en diff jeg kunne tagge med breaking change i React-koden. Promoterer samtidig de siste gjenstående pakkene vi har hatt på versjon 0.x.x til 1.0.0.

Changes:
 - @fremtind/jkl-action-changed-files: 1.0.1 => 1.0.2 (private)
 - @fremtind/jkl-accordion-react: 6.0.15 => 7.0.0
 - @fremtind/jkl-accordion: 6.0.13 => 7.0.0
 - @fremtind/jkl-alert-message-react: 7.0.17 => 8.0.0
 - @fremtind/jkl-alert-message: 5.0.23 => 6.0.0
 - @fremtind/jkl-breadcrumb-react: 1.0.12 => 2.0.0
 - @fremtind/jkl-breadcrumb: 1.0.12 => 2.0.0
 - @fremtind/browserslist-config-jkl: 1.0.0-alpha.0 => 1.0.0
 - @fremtind/jkl-button-react: 10.1.12 => 11.0.0
 - @fremtind/jkl-button: 7.0.13 => 8.0.0
 - @fremtind/jkl-card-react: 5.2.16 => 6.0.0
 - @fremtind/jkl-card: 5.1.11 => 6.0.0
 - @fremtind/jkl-checkbox-react: 6.1.13 => 7.0.0
 - @fremtind/jkl-checkbox: 6.0.13 => 7.0.0
 - @fremtind/jkl-constants-util: 1.0.0-alpha.0 => 1.0.0
 - @fremtind/jkl-content-toggle-react: 2.0.26 => 3.0.0
 - @fremtind/jkl-content-toggle: 2.0.23 => 3.0.0
 - @fremtind/jkl-cookie-consent-react: 5.1.35 => 6.0.0
 - @fremtind/jkl-cookie-consent: 6.0.13 => 7.0.0
 - @fremtind/jkl-core: 9.6.1 => 10.0.0
 - @fremtind/jkl-datepicker-react: 9.1.2 => 10.0.0
 - @fremtind/jkl-datepicker: 6.0.16 => 7.0.0
 - @fremtind/jkl-description-list-react: 4.0.26 => 5.0.0
 - @fremtind/jkl-description-list: 4.0.23 => 5.0.0
 - @fremtind/jkl-expand-button-react: 2.0.5 => 3.0.0
 - @fremtind/jkl-expand-button: 1.2.14 => 2.0.0
 - @fremtind/jkl-feedback-react: 12.1.2 => 13.0.0
 - @fremtind/jkl-feedback: 9.0.13 => 10.0.0
 - @fremtind/jkl-field-group-react: 5.1.1 => 6.0.0
 - @fremtind/jkl-field-group: 4.0.23 => 5.0.0
 - @fremtind/jkl-footer-react: 1.0.9 => 2.0.0
 - @fremtind/jkl-footer: 1.0.6 => 2.0.0
 - @fremtind/jkl-formatters-util: 2.0.10 => 2.0.11
 - @fremtind/jkl-hamburger-react: 8.0.15 => 9.0.0
 - @fremtind/jkl-hamburger: 9.0.13 => 10.0.0
 - @fremtind/jkl-icon-button-react: 1.0.0-alpha.0 => 1.0.0
 - @fremtind/jkl-icon-button: 1.0.0-alpha.0 => 1.0.0
 - @fremtind/jkl-icons-react: 4.1.19 => 5.0.0
 - @fremtind/jkl-icons: 4.0.23 => 5.0.0
 - @fremtind/jkl-image-react: 2.0.16 => 3.0.0
 - @fremtind/jkl-image: 2.0.13 => 3.0.0
 - @fremtind/jkl-list-react: 6.1.21 => 7.0.0
 - @fremtind/jkl-list: 6.0.23 => 7.0.0
 - @fremtind/jkl-loader-react: 7.2.0 => 8.0.0
 - @fremtind/jkl-loader: 7.2.0 => 8.0.0
 - @fremtind/jkl-logo-react: 9.0.1 => 10.0.0
 - @fremtind/jkl-logo: 7.1.1 => 8.0.0
 - @fremtind/jkl-message-box-react: 6.3.14 => 7.0.0
 - @fremtind/jkl-message-box: 5.2.10 => 6.0.0
 - @fremtind/jkl-radio-button-react: 6.2.1 => 7.0.0
 - @fremtind/jkl-radio-button: 6.0.13 => 7.0.0
 - @fremtind/jkl-react-hooks: 8.2.3 => 9.0.0
 - @fremtind/jkl-select-react: 9.2.1 => 10.0.0
 - @fremtind/jkl-select: 7.0.13 => 8.0.0
 - @fremtind/stylelint-config-jkl: 2.0.6 => 2.0.7
 - @fremtind/jkl-summary-table-react: 6.0.18 => 7.0.0
 - @fremtind/jkl-summary-table: 6.0.16 => 7.0.0
 - @fremtind/jkl-table-react: 7.5.7 => 8.0.0
 - @fremtind/jkl-table: 5.5.6 => 6.0.0
 - @fremtind/jkl-tabs-react: 1.3.23 => 2.0.0
 - @fremtind/jkl-tabs: 1.2.20 => 2.0.0
 - @fremtind/jkl-tag-react: 1.1.26 => 2.0.0
 - @fremtind/jkl-tag: 1.1.23 => 2.0.0
 - @fremtind/jkl-text-input-react: 9.1.2 => 10.0.0
 - @fremtind/jkl-text-input: 7.0.16 => 8.0.0
 - @fremtind/jkl-toggle-switch-react: 8.0.1 => 9.0.0
 - @fremtind/jkl-toggle-switch: 8.0.1 => 9.0.0
 - @fremtind/jkl-validators-util: 2.3.3 => 2.3.4
 - @fremtind/jkl-webfonts: 1.1.10 => 2.0.0
 - @fremtind/portal: 12.5.0 => 13.0.0 (private)