Base Styles: Import colors into variables#19159
Base Styles: Import colors into variables#19159ockham merged 4 commits intoWordPress:masterfrom ockham:add/base-styles-variables-colors-import
Conversation
|
Hmm right, I suppose elsewhere we've always been importing all the files at once so that all variables always exist. I.e. as highlighted in docs: Things obviously won't work when importing just one file directly like in your PR. The build/test step during Gutenberg-CI runs won't catch these issues either — should it? |
|
CircleCI's Lint job is failing, complaining that it Which I find a bit surprising? Is Gutenberg using double quotes in SASS imports? |
I think that'd make sense 👍 |
Yeah — Gutenberg prolly uses https://www.npmjs.com/package/stylelint-config-wordpress which is double quotes indeed, if I remember correctly. |
Pushed a fix 👍 |
I personally think we should render each file separately as a test run and ensure;
More convo about testing in original PR #17883 — see commits for details and an implementation example. I don't think that needs to be done in this PR tho but prolly easy to catch (and fix) any other missing imports that way. |
Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl>
gziolo
left a comment
There was a problem hiding this comment.
It would be nice to include a section title in the changelog to make it easier to read. Thanks for the fix 💯
|
It seems that the native mobile side is broken by this change, with this error: My first impression is that the SASS transformer we use in the RN app pipeline doesn't understand partial SASS files, and is unable to resolve the (existing) |
|
@hypest is the solution to import |
|
👋 @simison! On the Gutenberg-web side, including the underscore is fixing it for native. The native mobile SASS transformer apparently doesn't support partial SASS files so, it doesn't automatically try to resolve the underscore-less file to the underscored one. If handled on the native mobile side alone, a solution seems to be to introduce a new file I wonder though, perhaps it's an obsolete impression but, I thought that the |
The point of this PR was to enable 3rd party projects to import individual files from |
|
@hypest Are you sure about the partials support thing? I thought that the underscore/non-underscore aliasing was built into SASS at a pretty low level (but I might be wrong). |
@hypest Do you have some more context on this (e.g. failing CI job link)? 🙂 |
|
Ah I think I found the relevant file https://github.com/wordpress-mobile/gutenberg-mobile/blob/06b924d832e1bdd5bcbb2961f8c5e2051d772269/sass-transformer.js |
I'm not too sure, I've only assuming that the SASS transformer we use in the RN mobile port (this library: https://github.com/kristerkari/react-native-sass-transformer) doesn't support it because if I just add the underscore the import is resolved OK.
The only CI indication that this fails is on the gutenberg-mobile repo for now. See this https://app.circleci.com/jobs/github/wordpress-mobile/gutenberg-mobile/20081 and search for "colors could not be resolved". |
|
Looks like it's coming from gutenberg-mobile itself: https://github.com/wordpress-mobile/gutenberg-mobile/blob/06b924d832e1bdd5bcbb2961f8c5e2051d772269/sass-transformer.js#L139 Can we maybe just make that thing smarter? https://github.com/wordpress-mobile/gutenberg-mobile/blob/06b924d832e1bdd5bcbb2961f8c5e2051d772269/sass-transformer.js#L133 |
(I guess that's our local fork of https://github.com/kristerkari/react-native-sass-transformer) |
Perhaps. It feels that'd be equivalent to trying to add support for partials 😬. Maybe we can live with just trying out the underscored filename.
Indeed. |
Reading https://sass-lang.com/guide, I got the impression that there isn't that much to partials, other than a nomenclature to signal that they shouldn't be turned into CSS on their own (but used as imports elsewhere), and the leading underscore alias resolution 🤷♂️
Yeah, that might work as well.
👍 |
|
Turns out upstream already has support for partials: https://github.com/kristerkari/react-native-sass-transformer/blob/52884dd59582856fa17e2b2e8ca9efc37d412387/index.js#L41 |
Add support for [SASS partials](https://sass-lang.com/guide), as is already present [upstream](https://github.com/kristerkari/react-native-sass-transformer/blob/52884dd59582856fa17e2b2e8ca9efc37d412387/index.js#L41-L42). This should fix the issue introduced by WordPress/gutenberg#19159, and discussed there.
* Use string-array instead of plurals tag in strings.xml See https://github.com/GlotPress/GlotPress-WP/blob/master/gp-includes/formats/format-android.php * Update string files * Update scripts to minimize changes in git diff and keep the same context for android * Exclude strings from tests * Fix lint errors * Bump version to 1.17.1 * Update gutenberg ref following 1.17 merge to gutenberg master * Update gutenberg ref * Remove declaration on bridge of unused methods. * Added bridge code for gutenberg to request a native fullscreen preview for for an image from a URL on iOS. * Updating bundle and gutenberg reference. * Updated release notes. * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update GB reference. * Updating bundle after catching up branch and gutenberg submodule. * Update gutenberg ref * Update release notes. * Update UI test * Pass postType as initial prop on iOS * Pass postType down to Editor * Allow Android to set the post type * Updating gutenberg reference. * Removed duplicate line from merge. * updafe test files and iOS version for running locally with xcode 11 * Update gutenberg ref * Update gutenberg ref * Update aztec to version that support reversed and start on lists. * Update Gutenberg to version where list settings are active in native. * update block list check and capabilities * replace double click on android * fix block insertion timeout * update branch with develop * Update gutenberg ref * Update package.json and JS bundle for 1.18.0 release * Update Gutenberg * Update Gutenberg * update gutenberg ref * Update GB-reference. * Update release notes. * revert caps to iPhone Simulator * Update Gutenberg ref * Update Release notes * Update gutenberg/ reference * Update bundles * Update GB reference. * Fix spacing * Add static method to Media class to create instance using mimeType * Add flag to track when appending multiple selected media items as blocks * Introduce mediaSelectionCancelled method in WPAndroidGlueCode * Set flag to append blocks when multiple = false is not respected * Only use appendUploadMediaFiles plural version * Update gutenberg ref * Update to latest Gutenberg master * Patch jsdom to implement Element.closest() * Bring back changes on package.json from 1.7.1 * Add docstring to the function * Return null as per https://dom.spec.whatwg.org/#dom-element-closest * Update Aztec version. * Update GB reference. * Update gutenberg ref * Update RELEASE-NOTES.txt * Update GB reference * Improve code block style * Update GB reference. * Update gutenberg ref * Update Media mimeType truncation to use enum names * Add Javadoc for mAppendsMultipleSelectedToSiblingBlocks flag * Set appends to sibling blocks flag explicitly for all requests * Add clarifying comment for special block append handling * Remove singular (unused) appendMedia method * Update GB reference. * Update GB reference to master. * Set appends to sibling blocks flag explicitly for other media pick * Update GB reference. * Update GB reference. * Use lowercase for Media mimeType truncation * Update Gutenberg * Update Gutenberg * Update Gutenberg ref - after fix for caption alignment * Update bundles * Point to aztecVersion hash which supports list with start and reverse attribute * Update bundle and gutenberg ref - fix disappearing image * Update GB reference. * Update GB reference. * Update GB reference. * Update Gutenberg * Update Gutenberg ref * Update GB reference * Update GB reference. * Only enable page templates on dev builds * Update aztec version * Update aztec version * Add colors for gallery block * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update GB reference. * Update Gutenberg ref * Update Aztec version to 1.14.0 * Make sure if the textColor is changed the default text color is updated. * Use Slider from react-native-community lib (#1620) * Use Slider from react-native-community lib * Update slider version * Add function to read npm version * Rengenerate yarn.lock * Bump node version * Update readNPMVersion function * Use Slider from fork * Update Slider commit * Use Slider from wordpress-mobile fork * Add react-native-slider podspec * Improve babel config * Correct settings.gradle * Correct project.pbxproj * Update ref * Bump * Update ref * Update ref to gutenberg master * Update ref to gutenberg quick fix * Update ref to gutenberg master * Update Aztec editor version. * Update to iOS 13 * Update Xcode version. * Use iOS 12 for tests. * Fix typo * Update Aztec to fix CI error with xcode 10 * Use iOS 12.2 * Update Appium version. * Update to appium 1.15.1 * Update to Appium 1.15.1 only in iOS * Update caps. * Add Gallery Block (#1498) * WIP - initial-html.js for gallery testing * Add parent app media mock for Android * Update gutenberg reference * Update gutenberg reference * Comment out line setting mPendingMediaUploadCallback to null * Update gutenberg reference * Generate bundles * Update gutenberg ref * Generate bundles * Generate bundles * Add some color-studio colors for gallery * Update gutenberg reference * Generate bundle * WIP update ref * Update gutenberg reference * Update gutenberg submodule * Generate bundles * Add $gray-40 color * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Restore demo content * Restore anonymous implementation of GutenbergBridgeJS2Parent * Update gutenberg reference * Generate bundles * Bump up Aztec version on iOS Example app * Update gb ref * Generate bundles * Update gutenberg ref * Update gutenberg ref (#1646) * Add release notes for Gallery (#1658) * Make sure we use iPhone 11 (iOS 13) for build and run tests * Pooint aztecVersion to develop * Update Appium for Android tests too. * Set Appium to 1.15.0 * Update aztec version to 1.3.36 * Update appium to 1.16.0-rc.1 * Update Aztec iOS to 1.14.1 * Update GB reference. * Activate preformat block on android platform (#1615) * Updates package.json and JS bundle for 1.19.0 release. * Update to shorten git commands Make the git commands a little easier to copy by taking out `$` from the start of the lines. This also matches with the other commands on the page which do not start with `$`. * Update Unit Tests headings in Getting Started documentation The heading "Test" should be "Unit Tests". The heading "Writing and Running Tests" should be "Writing and Running Unit Tests". https://github.com/wordpress-mobile/gutenberg-mobile/blob/develop/src/index.test.js * Update gutenberg reference * Update gutenberg reference * Update gutenberg ref * Updating bundles. * Feat: Navigation Down in InnerBlocks (#1379) * Add ref to gutenberg repo * Fix e2e tests * Update ref to gutenberg master * Update Gutenberg ref * Remove empty line between checkboxes * Updating release notes to show video settings in 1.19 * Updating gutenberg reference to latest 1.19 release change on gutenberg master branch * Update gutenberg ref * Sass Transformer: Also look for partials Add support for [SASS partials](https://sass-lang.com/guide), as is already present [upstream](https://github.com/kristerkari/react-native-sass-transformer/blob/52884dd59582856fa17e2b2e8ca9efc37d412387/index.js#L41-L42). This should fix the issue introduced by #19159, and discussed there. * Single quotes * Also update sass-transformer-inside-gb.js * Update release notes * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update Gutenberg ref * Update gutenberg ref * Update gutenberg ref * Bundles up to date with merged code from develop * Add ref to gutenberg repo * Update ref * Update ref * Update ref * Upgrade the SVG lib to fix #1703 * Upgrade the Video lib to fix #1705 * Upgrade the Slider lib to use node_modules in local npm build * Update ref * Upgrade the SVG lib ref * Upgrade the Video lib ref * Upgrade the Slider lib ref * Update ref * Brings back gb master to normal (#1722) * Fix/Bring back master to normal (#1724) * Update Gutenberg ref * Update Gutenberg ref Co-authored-by: Tugdual de Kerviler <dekervit@gmail.com> Co-authored-by: Matt Chowning <mchowning@gmail.com> Co-authored-by: etoledom <etoledom@icloud.com> Co-authored-by: Sérgio Estêvão <sergioestevao@gmail.com> Co-authored-by: Cameron Voell <cameronvoell@gmail.com> Co-authored-by: Jorge Bernal <jbernal@gmail.com> Co-authored-by: Javon Davis <JavonDavis@users.noreply.github.com> Co-authored-by: Maxime Biais <maxime@bia.is> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: Matthew Kevins <mkevins@users.noreply.github.com> Co-authored-by: Stefanos Togoulidis <stefanostogoulidis@gmail.com> Co-authored-by: Marko Savic <savicmarko1985@gmail.com> Co-authored-by: Luke Walczak <lukasz.walczak.pwr@gmail.com> Co-authored-by: Pinar Olguc <pinarolguc@gmail.com> Co-authored-by: Sheri Bigelow <sheri@designsimply.com> Co-authored-by: jbinda <jakub.binda@gmail.com> Co-authored-by: Bernie Reiter <ockham@raz.or.at>
* Use string-array instead of plurals tag in strings.xml See https://github.com/GlotPress/GlotPress-WP/blob/master/gp-includes/formats/format-android.php * Update string files * Update scripts to minimize changes in git diff and keep the same context for android * Exclude strings from tests * Fix lint errors * Bump version to 1.17.1 * Update gutenberg ref following 1.17 merge to gutenberg master * Update gutenberg ref * Remove declaration on bridge of unused methods. * Added bridge code for gutenberg to request a native fullscreen preview for for an image from a URL on iOS. * Updating bundle and gutenberg reference. * Updated release notes. * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update GB reference. * Updating bundle after catching up branch and gutenberg submodule. * Update gutenberg ref * Update release notes. * Update UI test * Pass postType as initial prop on iOS * Pass postType down to Editor * Allow Android to set the post type * Updating gutenberg reference. * Removed duplicate line from merge. * updafe test files and iOS version for running locally with xcode 11 * Update gutenberg ref * Update gutenberg ref * Update aztec to version that support reversed and start on lists. * Update Gutenberg to version where list settings are active in native. * update block list check and capabilities * replace double click on android * fix block insertion timeout * update branch with develop * Update gutenberg ref * Update package.json and JS bundle for 1.18.0 release * Update Gutenberg * Update Gutenberg * update gutenberg ref * Update GB-reference. * Update release notes. * revert caps to iPhone Simulator * Update Gutenberg ref * Update Release notes * Update gutenberg/ reference * Update bundles * Update GB reference. * Fix spacing * Add static method to Media class to create instance using mimeType * Add flag to track when appending multiple selected media items as blocks * Introduce mediaSelectionCancelled method in WPAndroidGlueCode * Set flag to append blocks when multiple = false is not respected * Only use appendUploadMediaFiles plural version * Update gutenberg ref * Update to latest Gutenberg master * Patch jsdom to implement Element.closest() * Bring back changes on package.json from 1.7.1 * Add docstring to the function * Return null as per https://dom.spec.whatwg.org/#dom-element-closest * Update Aztec version. * Update GB reference. * Update gutenberg ref * Update RELEASE-NOTES.txt * Update GB reference * Improve code block style * Update GB reference. * Update gutenberg ref * Update Media mimeType truncation to use enum names * Add Javadoc for mAppendsMultipleSelectedToSiblingBlocks flag * Set appends to sibling blocks flag explicitly for all requests * Add clarifying comment for special block append handling * Remove singular (unused) appendMedia method * Update GB reference. * Update GB reference to master. * Set appends to sibling blocks flag explicitly for other media pick * Update GB reference. * Update GB reference. * Use lowercase for Media mimeType truncation * Update Gutenberg * Update Gutenberg * Update Gutenberg ref - after fix for caption alignment * Update bundles * Point to aztecVersion hash which supports list with start and reverse attribute * Update bundle and gutenberg ref - fix disappearing image * Update GB reference. * Update GB reference. * Update GB reference. * Update Gutenberg * Update Gutenberg ref * Update GB reference * Update GB reference. * Only enable page templates on dev builds * Update aztec version * Update aztec version * Add colors for gallery block * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update GB reference. * Update Gutenberg ref * Update Aztec version to 1.14.0 * Make sure if the textColor is changed the default text color is updated. * Use Slider from react-native-community lib (#1620) * Use Slider from react-native-community lib * Update slider version * Add function to read npm version * Rengenerate yarn.lock * Bump node version * Update readNPMVersion function * Use Slider from fork * Update Slider commit * Use Slider from wordpress-mobile fork * Add react-native-slider podspec * Improve babel config * Correct settings.gradle * Correct project.pbxproj * Update ref * Bump * Update ref * Update ref to gutenberg master * Update ref to gutenberg quick fix * Update ref to gutenberg master * Update Aztec editor version. * Update to iOS 13 * Update Xcode version. * Use iOS 12 for tests. * Fix typo * Update Aztec to fix CI error with xcode 10 * Use iOS 12.2 * Update Appium version. * Update to appium 1.15.1 * Update to Appium 1.15.1 only in iOS * Update caps. * Add Gallery Block (#1498) * WIP - initial-html.js for gallery testing * Add parent app media mock for Android * Update gutenberg reference * Update gutenberg reference * Comment out line setting mPendingMediaUploadCallback to null * Update gutenberg reference * Generate bundles * Update gutenberg ref * Generate bundles * Generate bundles * Add some color-studio colors for gallery * Update gutenberg reference * Generate bundle * WIP update ref * Update gutenberg reference * Update gutenberg submodule * Generate bundles * Add $gray-40 color * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Generate bundles * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Update gutenberg reference * Restore demo content * Restore anonymous implementation of GutenbergBridgeJS2Parent * Update gutenberg reference * Generate bundles * Bump up Aztec version on iOS Example app * Update gb ref * Generate bundles * Update gutenberg ref * Update gutenberg ref (#1646) * Add release notes for Gallery (#1658) * Make sure we use iPhone 11 (iOS 13) for build and run tests * Pooint aztecVersion to develop * Update Appium for Android tests too. * Set Appium to 1.15.0 * Update aztec version to 1.3.36 * Update appium to 1.16.0-rc.1 * Update Aztec iOS to 1.14.1 * Update GB reference. * Activate preformat block on android platform (#1615) * Updates package.json and JS bundle for 1.19.0 release. * Update to shorten git commands Make the git commands a little easier to copy by taking out `$` from the start of the lines. This also matches with the other commands on the page which do not start with `$`. * Update Unit Tests headings in Getting Started documentation The heading "Test" should be "Unit Tests". The heading "Writing and Running Tests" should be "Writing and Running Unit Tests". https://github.com/wordpress-mobile/gutenberg-mobile/blob/develop/src/index.test.js * Update gutenberg reference * Update gutenberg reference * Update gutenberg ref * Updating bundles. * Feat: Navigation Down in InnerBlocks (#1379) * Add ref to gutenberg repo * Fix e2e tests * Update ref to gutenberg master * Update Gutenberg ref * Remove empty line between checkboxes * Updating release notes to show video settings in 1.19 * Updating gutenberg reference to latest 1.19 release change on gutenberg master branch * Update gutenberg ref * Sass Transformer: Also look for partials Add support for [SASS partials](https://sass-lang.com/guide), as is already present [upstream](https://github.com/kristerkari/react-native-sass-transformer/blob/52884dd59582856fa17e2b2e8ca9efc37d412387/index.js#L41-L42). This should fix the issue introduced by #19159, and discussed there. * Single quotes * Also update sass-transformer-inside-gb.js * Update release notes * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update gutenberg ref * Update Gutenberg ref * Update gutenberg ref * Update gutenberg ref * Bundles up to date with merged code from develop * Add ref to gutenberg repo * Update ref * Update ref * Update ref * Upgrade the SVG lib to fix #1703 * Upgrade the Video lib to fix #1705 * Upgrade the Slider lib to use node_modules in local npm build * Update ref * Upgrade the SVG lib ref * Upgrade the Video lib ref * Upgrade the Slider lib ref * Update ref * Brings back gb master to normal (#1722) * Fix/Bring back master to normal (#1724) * Update Gutenberg ref * Update Gutenberg ref Co-authored-by: Tugdual de Kerviler <dekervit@gmail.com> Co-authored-by: Matt Chowning <mchowning@gmail.com> Co-authored-by: etoledom <etoledom@icloud.com> Co-authored-by: Sérgio Estêvão <sergioestevao@gmail.com> Co-authored-by: Cameron Voell <cameronvoell@gmail.com> Co-authored-by: Jorge Bernal <jbernal@gmail.com> Co-authored-by: Javon Davis <JavonDavis@users.noreply.github.com> Co-authored-by: Maxime Biais <maxime@bia.is> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: Matthew Kevins <mkevins@users.noreply.github.com> Co-authored-by: Stefanos Togoulidis <stefanostogoulidis@gmail.com> Co-authored-by: Marko Savic <savicmarko1985@gmail.com> Co-authored-by: Luke Walczak <lukasz.walczak.pwr@gmail.com> Co-authored-by: Pinar Olguc <pinarolguc@gmail.com> Co-authored-by: Sheri Bigelow <sheri@designsimply.com> Co-authored-by: jbinda <jakub.binda@gmail.com> Co-authored-by: Bernie Reiter <ockham@raz.or.at>
Description
@import "./colors";from within_variables.scss, since the latter depends on$dark-gray-900which is defined in the former.Found while working on Automattic/wp-calypso#38445.
How has this been tested?
Try importing just
@wordpress/base-styles/variablesin your app, using the currently released package. You'll get a build error saying something likeNow try with the changes that this PR makes. Your style files should build successfully 👍
Types of changes
Bug fix.
Checklist: