Skip to content

Add PostCSS color var fallback for upcoming CSS work #3278

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
May 26, 2023
Merged

Add PostCSS color var fallback for upcoming CSS work #3278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9930201
add fallback plugin
langermank May 12, 2023
360c705
Update rollup.config.js
langermank May 15, 2023
f136578
Merge branch 'main' into add-postcss-fallback-plugin
langermank May 15, 2023
db6c2df
remove fallbacks from source
siddharthkp May 26, 2023
f9be480
Merge branch 'main' into add-postcss-fallback-plugin
siddharthkp May 26, 2023
1f04825
add back conflict free package-lock
siddharthkp May 26, 2023
3e02a7a
use lockfileVersion 3
siddharthkp May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@
"mdast-util-to-string": "3.1.1",
"micromark-extension-frontmatter": "1.0.0",
"micromark-extension-mdxjs": "1.0.0",
"postcss-custom-properties-fallback": "^1.0.2",
"prettier": "2.8.1",
"react": "18.2.0",
"react-dnd": "14.0.4",
Expand Down
9 changes: 9 additions & 0 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import glob from 'fast-glob'
import {visualizer} from 'rollup-plugin-visualizer'
import postcss from 'rollup-plugin-postcss'
import packageJson from './package.json'
import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback'
const importedJSONFromPrimitives = require('@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')

const input = new Set([
// "exports"
Expand Down Expand Up @@ -116,6 +118,13 @@ const baseConfig = {
extract: 'components.css',
autoModules: false,
modules: {generateScopedName: 'prc_[local]-[hash:base64:5]'},
plugins: [
postcssCustomPropertiesFallback({
importFrom: {
customProperties: importedJSONFromPrimitives,
},
}),
],
Comment on lines +122 to +127
Copy link
Member

Choose a reason for hiding this comment

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

Are these fallbacks for a "default" theme? Would it be possible to have these fallbacks be dynamic for whatever the product specifies as the default theme? e.g. in Sass this might look like:

// Exporting tokens in package
@use 'theme';

$bgColor-default: var(--bgColor-default, theme.get('bgColor-default'));

// Product usage
@use '@primer/styles/scss/themes';
@use '@primer/styles/scss/theme' with (
  $theme: themes.$dark,
);
@use '@primer/styles/scss/tokens' as *;

.my-selector {
  background: $bgColor-default;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Its passing a CSS var as a fallback, so it does respect theme. In this case it will look like var(--bgColor-default, var(--color-bg-default)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm realizing fallback is kind of generic here. This is like a special snowflake fallback that's temporary so we can test the new color vars against the old ones.

}),
],
}
Expand Down
6 changes: 3 additions & 3 deletions src/drafts/CSSComponent/component.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.component {
background-color: var(--bgColor-default, var(--color-canvas-default));
color: var(--fgColor-muted, var(--color-fg-muted));
border: 1px solid var(--borderColor-default, var(--color-border-default));
background-color: var(--bgColor-default);
color: var(--fgColor-muted);
border: 1px solid var(--borderColor-default);
width: fit-content;
padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal);
}