Skip to content

Work with other PostCSS plugins #5

Open
@pauldijou

Description

@pauldijou

Hoping I didn't do anything wrong, but I tried to use this plugin with some other PostCSS plugins and it failed when importing values.

For example, with postcss-calc, the expression is not evaluated...

/* size is 20px */
@value size from "./variables.css";
@value localSize: 20px;

.group {
  margin-top: calc(20px * 0.5);
  margin-bottom: calc(size * 0.5);
  margin-left: calc(localSize * 0.5);
  margin-right: calc(20px - localSize);
  padding-top: size;
  padding-bottom: localSize;
}

/* Render */
.group {
  margin-top: 10px;
  margin-bottom: calc(i__const_size_1 * 0.5);
  margin-left: 10px;
  margin-right: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

So, when used alone in padding-top, sizeis fine, but with the calc plugin, it fails with it's unique name or stuff. Same problem with colors:

.button:hover {
  background-color: color(#2c3e50 lightness(+10%));
}
/* render */
.button:hover {
  background-color: rgb(62, 87, 112);
}

/* and */
@value primary: #2c3e50;
.button:hover {
  background-color: color(primary lightness(+10%));
}
/* render */
.button:hover {
  background-color: rgb(62, 87, 112);
}

/* but */
@value primary from "./variables.css";
.button:hover {
  background-color: color(primary lightness(+10%));
}

Crashes the build with

ERROR in ./components/Button/style.css
Module build failed: ModuleBuildError: Module build failed: Error: .../css-modules/components/Button/style.css:15:3: Unable to parse color from string "i__const_primary_8"
    at .../css-modules/components/Button/style.css:15:3
    at Object.Color (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/node_modules/color/color.js:31:15)
    at toRGB (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:39:15)
    at Object.convert (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:28:10)
    at transformColor (.../css-modules/node_modules/postcss-color-function/index.js:49:43)
    at transformColorValue (.../css-modules/node_modules/postcss-color-function/index.js:20:16)
    at Object.tryCatch [as try] (.../css-modules/node_modules/postcss-color-function/node_modules/postcss-message-helpers/index.js:53:12)
    at transformDecl (.../css-modules/node_modules/postcss-color-function/index.js:19:31)
    at .../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:88:34
    at .../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:73:26
    at Rule.each (.../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:59:22)
    at DependenciesBlock.onModuleBuildFailed (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at .../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at .../css-modules/node_modules/postcss-loader/index.js:54:17
    at runMicrotasksCallback (node.js:314:7)
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)
 @ ./components/Button/index.js 25:16-38

Not sure what went wrong with the plugin chain, but it would be awesome to seamlessly integrate with any another PostCSS plugin.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions