Giter VIP home page Giter VIP logo

Comments (7)

Sqrrl avatar Sqrrl commented on May 13, 2024

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.

aasen avatar aasen commented on May 13, 2024

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.

aasen avatar aasen commented on May 13, 2024

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.

Sqrrl avatar Sqrrl commented on May 13, 2024

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.

aasen avatar aasen commented on May 13, 2024

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.

Sqrrl avatar Sqrrl commented on May 13, 2024

Could you try out v1.01? Might solve your issue.

from storybook-design-token.

aasen avatar aasen commented on May 13, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.