Comments (7)
Hey. Just tried it myself with @storybook/preset-scss. Could not reproduce the issue, unfortunately.
A few questions:
Does the error disappear when you remove the design token addon from the project?
Could you post your preview.js?
The custom webpack config doesn't seem to be required by the scss preset. Are you sure that it's necessary?
from storybook-design-token.
It works when I remove the addon from the project. But you are right, I don't need the special webpack-setup for scss-support. After a reinstall here, I see that I get lots of version changes for postcss modules. I'll try and retry adding the design token addon now.
Thanks for helping.
from storybook-design-token.
No, sadly it still fails with same error. I'll share some code:
preview.js
import { themes } from "@storybook/theming";
import "./css/storybook-overrides.css";
import "../src/ressurser/scss/filename.scss";
const tokenContext = require.context(
"!!raw-loader!../src",
true,
/.\.(css|less|scss|svg)$/
);
const tokenFiles = tokenContext.keys().map(function (filename) {
return { filename: filename, content: tokenContext(filename).default };
});
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
designToken: {
files: tokenFiles,
},
docs: {
theme: themes.oslo,
},
layout: "centered",
options: {
storySort: {
method: "alphabetical",
order: [
...
],
},
},
};
main.js
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-essentials",
"@storybook/addon-links",
"@storybook/preset-scss",
"storybook-addon-designs",
"storybook-design-token",
],
};
color.stories.mdx
import { DesignTokenDocBlock } from "storybook-design-token/dist/doc-blocks";
<DesignTokenDocBlock categoryName="Colors" viewType="table" />
In addition I've added comments in the scss colors, as in the example.
from storybook-design-token.
Thanks. Might have a clue where it's coming from. Still not sure why I can't reproduce it.
Could you provide the stacktrace for the "You tried to parse SCSS ..." error?
from storybook-design-token.
I'm guessing I'm doing a mistake somewhere...
Uncaught (in promise) CssSyntaxError: /ressurser/scss/filename.scss:2:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
_construct css-syntax-error.js:20
Wrapper css-syntax-error.js:18
CssSyntaxError css-syntax-error.js:71
error input.js:128
unknownWord parser.js:561
decl parser.js:233
other parser.js:131
parse parser.js:75
parse parse.js:17
LazyResult lazy-result.js:64
process processor.js:142
process processor.js:121
getNodes postcss.parser.js:189
getNodes postcss.parser.js:186
step postcss.parser.js:44
verb postcss.parser.js:25
__awaiter postcss.parser.js:19
__awaiter postcss.parser.js:15
getNodes postcss.parser.js:155
parseCssFiles postcss.parser.js:62
step postcss.parser.js:44
verb postcss.parser.js:25
__awaiter postcss.parser.js:19
__awaiter postcss.parser.js:15
parseCssFiles postcss.parser.js:58
useTokenTabs useTokenTabs.js:55
React 6
unstable_runWithPriority scheduler.development.js:653
React 3
workLoop scheduler.development.js:597
flushWork scheduler.development.js:552
performWorkUntilDeadline scheduler.development.js:164
js scheduler.development.js:187
js scheduler.development.js:857
from storybook-design-token.
Could you try out v1.01? Might solve your issue.
from storybook-design-token.
It works!
There is a design bug under approx 1000px page width on table, but except that it works beautifully.
My colors was initially set with sass variables, and that don't work here, so I'll have to set them differently for this.
Great work, thanks a lot for taking time to help me out.
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.