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

Update custom property output methodology #883

Merged
merged 6 commits into from Apr 21, 2022
Merged

Update custom property output methodology #883

merged 6 commits into from Apr 21, 2022

Conversation

sebnitu
Copy link
Owner

@sebnitu sebnitu commented Apr 21, 2022

Problem

With the introduction of custom properties (CSS variables), there hasn't been established a consistent way of including global custom properties that doesn't lead to output duplication.

Solution

This PR refactors how custom properties are organized and output. Instead of outputting them in the core module, the core module instead exposes root scss and css output files for manual inclusion. The global vrembem package now also includes all root custom properties by default.

SCSS Example

// Include specific custom properties
@use "@vrembem/core/src/scss/root/prefix";
@use "@vrembem/core/src/scss/root/breakpoints";

// Include all custom properties
@use "@vrembem/core/src/scss/root/root";

CDN Example

<!-- Include specific custom properties -->
<link rel="stylesheet" href="https://unpkg.com/@vrembem/core/dist/prefix.css">
<link rel="stylesheet" href="https://unpkg.com/@vrembem/core/dist/breakpoints.css">

<!-- Include all custom properties -->
<link rel="stylesheet" href="https://unpkg.com/@vrembem/core/dist/root.css">

With this update and in preparation for future custom properties, this PR also updates the custom property prefix default to "vb-". That means all vrembem CSS variables should be prefixed with vb-, e.g: --vb-breakpoint-md: 760px;.

This PR fixes #854

@sebnitu sebnitu merged commit 875ad48 into main Apr 21, 2022
@sebnitu sebnitu deleted the update-root-output branch April 21, 2022 18:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve the output of core CSS variables
1 participant