search

css-modules / css-modules-require-hook

A require hook to compile CSS Modules in runtime
MIT License
484 stars 44 forks source link

Stylus Composes Fails with CssSyntaxError #111

Closed willdawsonme closed 6 years ago

willdawsonme commented 6 years ago

We're using css-modules-require-hook server-side with stylus as our preprocessor, but with versions 4.2.2+, we get this error when trying to execute the hook. Any ideas? Would like to use 4.2.3 for the resolve alias configuration.

CssSyntaxError: postcss-modules-resolve-imports: /Users/william.dawson/Documents/network/honey-2018-website/node_modules/@nec-network/latest-feed/lib/components/LatestFeed/latest-feed.styl:4:1: Missed semicolon

  2 |     display: block
  3 |
> 4 | .loadMore
    | ^
  5 |     display: block
  6 |

    at Input.error (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/input.es6:90:22)
    at Parser.checkMissedSemicolon (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/parser.es6:524:26)
    at Parser.decl (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/parser.es6:249:52)
    at Parser.other (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/parser.es6:147:18)
    at Parser.parse (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/parser.es6:58:22)
    at parse (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/parse.es6:13:16)
    at new LazyResult (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/lazy-result.es6:42:24)
    at Processor.process (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/processor.es6:95:16)
    at /Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss-modules-resolve-imports/lib/resolveDeps.js:73:36
    at /Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/container.es6:204:28
    at /Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/container.es6:109:26
    at Root.each (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/container.es6:77:22)
    at Root.walk (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/container.es6:108:21)
    at Root.walkRules (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/container.es6:202:25)
    at resolveDeps (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss-modules-resolve-imports/lib/resolveDeps.js:57:7)
    at resolveImports (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss-modules-resolve-imports/lib/sync.js:48:5)
    at LazyResult.run (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/lazy-result.es6:331:20)
    at LazyResult.sync (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/lazy-result.es6:317:32)
    at LazyResult.warnings (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/node_modules/postcss/lib/lazy-result.es6:157:21)
    at fetch (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/lib/index.js:104:16)
    at hook (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/lib/index.js:127:18)
    at Object.cssModulesHook [as .styl] (/Users/william.dawson/Documents/network/honey-2018-website/node_modules/css-modules-require-hook/lib/attachHook.js:16:20)

This happens when composing a stylus file from another stylus file:

.latestFeed
    composes: latestFeed from "../../../../node_modules/@nec-network/latest-feed/lib/components/LatestFeed/latest-feed.styl"

It seems like the preprocessor runs on the original file, but then when postcss-modules-resolve-imports runs, it runs postcss on the stylus file, not the preprocessed file.

willdawsonme commented 6 years ago

Closed in favour of https://github.com/css-modules/css-modules-require-hook/issues/115.