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

Remove sass-extract dependency #6443

Merged
merged 11 commits into from
Nov 30, 2022
Merged

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Nov 29, 2022

Summary

This PR is part of a higher-level goal of removing our node-sass dependency (see #6442).

I took the approach of simply removing all logic extracting variables from our Sass files totally. Since EUI's Sass is essentially in deprecation mode and we are no longer adding new Sass variables, there should be no downside to statically committing our .json and .json.d.ts files to source control.

This also allows us more time to figure out how to transition Kibana's various usages of their exported theme vars to the new EuiTheme vars more smoothly. We will, however, need to figure out how to continue exporting $eui* Sass variables to a .scss file for Sass consumers to continue to use.

I strongly recommend code-reviewing by commit.

⚠️ Opinions wanted

Since removing vars from the .json files is no longer an automated process that happens on compile/build/release, I went ahead and looked for component specific variables not being used in Kibana and ripped them out from the existing JSON file: 4926954

I left generic high-level variables alone for now, and I also left "groups" of variables actively being used in Kibana alone (of which there were a very annoying amount - we're going to have our work cut out for us :)

I'm 50/50 on doing all this in this PR vs just doing it as we convert components to Emotion, but I figure now isn't a bad time because it helps highlights remaining usage to resolve. That being said, if we feel strongly, I can absolutely take this commit out of the PR for now.

QA

  • Delete or archive your eui/dist folder (archive would be for comparison)
  • Run yarn compile-scss
  • Confirm there are no errors, and the output of both the css and json files are what you would expect
  • Go through the process of building/packaging EUI for Kibana, point Kibana at the locally built tgz, confirm Kibana still works as expected

General checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for breaking changes and labeled appropriately
  • A changelog entry exists and is marked appropriately

- [ ] Checked for accessibility including keyboard-only and screenreader modes
- [ ] Updated the Figma library counterpart
- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for any docs examples
- [ ] Added or updated jest and cypress tests

@cee-chen cee-chen force-pushed the remove-sass-extract branch from 2a3c4f2 to 4926954 Compare November 30, 2022 00:10
@cee-chen cee-chen marked this pull request as ready for review November 30, 2022 00:16
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6443/

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

One small nit, everything else LGTM.

Opinion: I like including the initial value cleanup here. Only reason I'd avoid is if we wanted to avoid a breaking change at the moment, but IMO it's a better choice to do now.

scripts/compile-scss.js Outdated Show resolved Hide resolved
@cee-chen
Copy link
Contributor Author

Opinion: I like including the initial value cleanup here. Only reason I'd avoid is if we wanted to avoid a breaking change at the moment, but IMO it's a better choice to do now.

Since our current next set of changes for the next Kibana upgrade is fairly light, I'd vote for doing it now. I don't think we'll get a better opportunity!

@chandlerprall
Copy link
Contributor

One more spot to remove the package name: the compile-scss script in package.json:L23.

@cee-chen
Copy link
Contributor Author

One more spot to remove the package name: the compile-scss script in package.json:L23.

The console/return needed to be removed as well: dffa733

- caught after testing in Kibana + running through a diff checker
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6443/

@cee-chen
Copy link
Contributor Author

Re-built, re-tested this against local Kibana, and re-ran Kibana node scripts/type_check.js - succeeded with no theme-related issues!

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Thanks! :shipit:

@cee-chen cee-chen merged commit e3a0d4a into elastic:main Nov 30, 2022
@cee-chen cee-chen deleted the remove-sass-extract branch November 30, 2022 19:39
jbudz pushed a commit to elastic/kibana that referenced this pull request Dec 19, 2022
[email protected][email protected]

---

## [`71.0.0`](https://github.com/elastic/eui/tree/v71.0.0)

- Implemented new `EuiRange` and `EuiDualRange` designs where the
`levels` are now on top of the tracks
([#6092](elastic/eui#6092))
- Added `discuss` and `dotInCircle` glyphs to `EuiIcon`
([#6434](elastic/eui#6434))
- Added `article` glyph to `EuiIcon`
([#6437](elastic/eui#6437))
- Changed the `EuiProvider` usage warnings to not rely on development
mode. ([#6451](elastic/eui#6451))

**Breaking changes**

- `EuiDualRange` now explicitly requires both `min` and `max` via props
types, to match `EuiRange`
([#6092](elastic/eui#6092))
- `EuiRange` and `EuiDualRange`'s `compressed` size no longer impacts
track or level sizes, but continues to compress tick and input sizes.
([#6092](elastic/eui#6092))
- Removed all variables for the following components from EUI's theme
JSON files: ([#6443](elastic/eui#6443))
  - `euiCollapsibleNav*`
  - `euiColorPicker*`
  - `euiContextMenu*`
  - `euiControlBar*`
  - `euiDataGrid* `(except for z-indices and cell padding sizes)
  - `euiDatePicker*`
  - `euiSuperDatePicker*`
  - `euiDragAndDrop*`
  - `euiEuiEmptyPrompt*`
  - `euiFilePicker*`
  - `euiRange*`
  - `euiHeaderLinks*`
  - `euiKeyPad*`
  - `euiMarkdownEditor*`
  - `euiResizable*`
  - `euiSelectable*`
  - `euiSideNav*`
  - `euiStep*`
  - `euiSuggest*`
  - `euiTable*` (except for color variables)
  - `euiTooltip*`
- `euiButtonFontWeight`, `euiButtonDefaultTransparency`, and
`euiButtonMinWidth`
- If you were importing any of the above removed JSON variables, we
strongly recommend using generic color or sizing variables from
`useEuiTheme()` instead.
([#6443](elastic/eui#6443))

**CSS-in-JS conversions**

- Converted `EuiRange` and `EuiDualRange` to Emotion; Removed
`$euiRangeThumbRadius`
([#6092](elastic/eui#6092))
- Added a new `logicalStyles` utility that automatically converts all
non-logical properties in a `style` object to their corresponding
logical properties ([#6426](elastic/eui#6426))
- Added a new `logicalShorthandCSS` utility that automatically converts
`margin`, `padding`, and other 4-sided shorthands to their corresponding
logical properties ([#6429](elastic/eui#6429))
- Added a new `logicalBorderRadiusCSS` utility that automatically
converts `border-radius` to corresponding logical properties
([#6429](elastic/eui#6429))

Co-authored-by: Constance Chen <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants