Comments (7)
Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.
//.storybook/preview.js
import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss';
export const parameters = {
...
designToken: {
files: [{ filename: 'index.css', content: content.toString() }],
},
};
from storybook-design-token.
Hey. So far I haven't found a good way to compile sass variable declarations in the browser and extract the necessary information. But I'm definitely open for suggestions. The same goes for Less.
from storybook-design-token.
Maybe it is possible to use sass interop with Javascript? That way at least sass variables can be used
from storybook-design-token.
Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.
//.storybook/preview.js import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss'; export const parameters = { ... designToken: { files: [{ filename: 'index.css', content: content.toString() }], }, };
Sass won't compile variable declarations to css variables, will it? So if I don't miss anything, this would result in a index.css without any token declarations.
from storybook-design-token.
would be great to have it!
$variable: someFunction(param, param2)
someFunction($param, $param2) {
@return unquote("hsla(#{$param}, #{$param2}, 100%, 1");
}
add-on doesn't return compiled hsla color value but a function
from storybook-design-token.
This was a deliberate design choice for preprocessed styles (Sass, Less). Afaik there is no reasonable way to compile the scss styles and not lose the token/variable information.
You could generate CSS custom properties from your Sass variables and annotate them. (see sass/sass#3091 (comment))
from storybook-design-token.
Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.
//.storybook/preview.js import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss'; export const parameters = { ... designToken: { files: [{ filename: 'index.css', content: content.toString() }], }, };Sass won't compile variable declarations to css variables, will it? So if I don't miss anything, this would result in a index.css without any token declarations.
Sass won't generate custom props automatically. That would be the responsibility of the author. But it is easy to do. A simple example.
This feature would be awesome 🥳 🚀 because my preference is to maintain a map of tokens in scss and then generate the custom props from there. This gives a lot of flexibility to consumers of my component lib.
$palette-map: (
brand: dodgerblue,
status-critical: crimson,
);
:root {
/**
* @tokens Colors
* @presenter Color
*/
@each $name, $color in $palette-map {
--prefix-color-#{$name}: #{$color};
}
}
Perhaps I'll take a stab at a PR with @kiwi-admin's suggestion.
from storybook-design-token.
Related Issues (20)
- issue with enabled feature buildStoriesJson HOT 1
- Allow Control Types Config (ArgTypes) HOT 1
- Issue starting storybook-design-token HOT 6
- Storybook webpack autobuild no longer works with storybook-design-token options HOT 7
- Is there a way to disable scrolling container in table view? HOT 1
- Dependencies on Vite should be optional
- Getting warnings during startup and usage of addon in v3 beta HOT 2
- Monorepo import Css injection not working
- Disabling addon panel does not work HOT 8
- ? HOT 1
- Hide search in doc pages?
- Missing "./dist/doc-blocks" specifier in "storybook-design-token" package? HOT 1
- Is there a way to only show the utilized Design Tokens in a given Story? HOT 5
- Getting React error when importing DesignTokenDocBlock HOT 1
- Issue with Managing Theme Switching HOT 2
- Storybook 8 compatibility HOT 4
- Tokens that change based on breakpoint do not update in the UI
- Tokens reset once the tab is re-selected
- Tokens that depend on other tokens don't work HOT 1
- Sizing Tokens
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook-design-token.