Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rethink export and consumption of css vars

See original GitHub issue


How we export and consume css variables leaves a bit to be desired…

Current situation

@import '@commercetools-frontend/ui-kit/materials/colors/base-colors.mod.css';

Possible way forward

postcss-custom-media has introduced importFrom and exportTo` functionality.

For example, for base-colors.mod.css (which is already generated from JS), we could instead have these generated to a json file, and then use importFrom to consume them.

I would propose doing a bit of research into this and making a spike out of it.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

montezumecommented, Oct 24, 2018

@dferber90 I think we have done everything. The only thing we didn’t deal with is exporting the media queries. There is a similar way with postcss-custom-media but I’m not sure if it’s worth the trouble. Would be nice to remove that need for V6 that @emmenko found though.

tdeekenscommented, Oct 17, 2018

Nice idea. I’ve seen that somewhere that colors and variables in general where exported as JSON, JS and CSS variables.

Read more comments on GitHub >

github_iconTop Results From Across the Web

jessekelly881/Rethink: Another in the line of beautiful css ...
Rethink is a single page theme designed for org mode exports. It currently supports latex, code blocks, lists, and tables. To see rethink...
Read more >
Enabling CSS Variables for your code export - YouTube
Learn how to enable CSS Variables for a more scalable and manageable design system.View the written guide here: ...
Read more >
Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >
A Practical Introduction to RethinkDB - Pluralsight
In this guide you'll learn how to work with RethinkDB, how to install RethinkDB and most importantly how to develop a simple application....
Read more >
Everything you need to know about CSS Variables
Preprocessors like Sass sell the use of variables as a big add-on. A reason to try them. And you know what? It's a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found