Closed iuscare closed 3 years ago
Hi @iuscare I have seen it already. Storybook uses postcss 7 and it is not so easy to replace. The only solution I have seen is the postcss addon. But I have not tried it. We should check this out and maybe we could integrate it into wingsuit with a preset.
Yes, there is also a small section on the site of your posted link how to include postcss8, guess you already saw that. So at least it could be worth a try to implement it how you suggested. Sooner or later we might find us in the situation, where tailwind do not receive any updates for the compat version anyway. It always felt like a interim solution to me and I do not know if storybook's core will be updated to postcss8 by this time.
I'd also be interested in Tailwind jit.
Not sure why storybook isn't using postcss 8 yet but it looks like there is an addon for postcss 8.
Noticed this when running storybook:
(node:5381) DeprecationWarning: Relying on the implicit PostCSS loader is deprecated and will be removed in Storybook 7.0.
If you need PostCSS, include '@storybook/addon-postcss' in your '.storybook/main.js' file.
This message comes with storybook 6.2. And we should definitely rely on the addon. Than we can switch to postcss 8. Will be part of the wingsuit 1.1 which I am currently working on it. See "next" branch.
PostCss 8 is working now. I created a postcss8 preset for Wingsuit and added upgrade info to the project readme. PostCss8 is also the new default in Tailwind in V1.0
Let me know if you have any issues with the upgrade info.
Thanks @christianwiedemann! Going to test it soon :-)
Installing now alongside @iuscare ! 👍
We came across this error:
ERROR in ./source/default/patterns/03-organisms/slider/slider.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/patterns/03-organisms/slider/slider.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(37:7) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/03-organisms/slider/slider.css @apply is not supported within nested at-rules like @screen. We suggest you write this as @apply md:mt-12 instead.
35 |
36 | @screen md {
> 37 | @apply mt-12;
| ^
38 | }
39 | }
Here is the fix:
&.splide__pagination__spacing-default .splide__pagination {
@apply mt-8 md:mt-12;
}
Getting a few more errors... it doesn't seem to like the @apply in the separate css files for some components.
ERROR in ./source/default/patterns/02-molecules/accordion-item/accordion-item.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/patterns/02-molecules/accordion-item/accordion-item.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(11:3) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/02-molecules/accordion-item/accordion-item.css The `p-5` class does not exist. If `p-5` is a custom class, make sure it is defined within a `@layer` directive.
9 | /* Label formatting when open */
10 | .tab input:checked + label{
> 11 | @apply p-5 border-l-2 border-teal-500 bg-gray-100 text-xl text-teal-500;
| ^
12 | }
13 | /* Icon */
@ ./source/default/patterns/02-molecules/accordion-item/accordion-item.css 2:26-213 53:4-74:5 56:18-205
@ ./source/default/patterns/02-molecules/accordion-item/index.js
@ ./source/default/patterns/02-molecules/accordion-item/accordion-item.stories.jsx
@ ./source/default/patterns sync \.stories(\.jsx|\.js|\.mdx)$
@ ./apps/storybook/preview.js
@ ./apps/storybook/preview.js-generated-config-entry.js
@ multi ./apps/storybook/assets.js ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./apps/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./apps/storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./source/default/patterns/00-protons/typo.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/patterns/00-protons/typo.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:3) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/00-protons/typo.css The `text-black-500` class does not exist. If `text-black-500` is a custom class, make sure it is defined within a `@layer` directive.
1 | body {
> 2 | @apply text-black-500;
| ^
3 | }
4 |
@ ./source/default/patterns/00-protons/typo.css 2:26-197 53:4-74:5 56:18-189
@ ./source/default/patterns/00-protons/index.js
@ ./source/default/patterns/03-organisms/grid/index.js
@ ./source/default/patterns/03-organisms/grid/grid.stories.jsx
@ ./source/default/patterns sync \.stories(\.jsx|\.js|\.mdx)$
@ ./apps/storybook/preview.js
@ ./apps/storybook/preview.js-generated-config-entry.js
@ multi ./apps/storybook/assets.js ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./apps/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./apps/storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./source/default/patterns/03-organisms/slider/slider.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/patterns/03-organisms/slider/slider.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(3:5) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/03-organisms/slider/slider.css The `cursor-pointer` class does not exist. If `cursor-pointer` is a custom class, make sure it is defined within a `@layer` directive.
1 | .splide {
2 | .splide__pagination {
> 3 | @apply cursor-pointer;
| ^
4 | @apply flex;
5 | @apply h-0.5;
@ ./source/default/patterns/03-organisms/slider/slider.css 2:26-205 53:4-74:5 56:18-197
@ ./source/default/patterns/03-organisms/slider/index.js
@ ./source/default/patterns/03-organisms/slider/slider.stories.jsx
@ ./source/default/patterns sync \.stories(\.jsx|\.js|\.mdx)$
@ ./apps/storybook/preview.js
@ ./apps/storybook/preview.js-generated-config-entry.js
@ multi ./apps/storybook/assets.js ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./apps/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./apps/storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./source/default/patterns/01-atoms/hamburger/hamburger.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/patterns/01-atoms/hamburger/hamburger.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.fromEntries is not a function
at module.exports (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/corePlugins/animation.js:6:26)
at registerPlugins (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:634:7)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:843:5
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/index.js:37:49
at LazyResult.runOnRoot (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:190:17)
@ ./source/default/patterns/01-atoms/hamburger/hamburger.css 2:26-208 53:4-74:5 56:18-200
@ ./source/default/patterns/01-atoms/hamburger/index.js
@ ./source/default/patterns/01-atoms/hamburger/hamburger.stories.jsx
@ ./source/default/patterns sync \.stories(\.jsx|\.js|\.mdx)$
@ ./apps/storybook/preview.js
@ ./apps/storybook/preview.js-generated-config-entry.js
@ multi ./apps/storybook/assets.js ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./apps/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./apps/storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./source/default/tokens/tokens.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--9-2!./source/default/tokens/tokens.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.fromEntries is not a function
at module.exports (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/corePlugins/animation.js:6:26)
at registerPlugins (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:634:7)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:843:5
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/index.js:37:49
at LazyResult.runOnRoot (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:190:17)
@ ./source/default/tokens/tokens.css 2:26-193 53:4-74:5 56:18-185
@ ./source/default/patterns/00-protons/index.js
@ ./source/default/patterns/03-organisms/grid/index.js
@ ./source/default/patterns/03-organisms/grid/grid.stories.jsx
@ ./source/default/patterns sync \.stories(\.jsx|\.js|\.mdx)$
@ ./apps/storybook/preview.js
@ ./apps/storybook/preview.js-generated-config-entry.js
@ multi ./apps/storybook/assets.js ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./apps/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./apps/storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.24 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.98 KiB {HtmlWebpackPlugin_0} [built]
ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(11:3) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/02-molecules/accordion-item/accordion-item.css The `p-5` class does not exist. If `p-5` is a custom class, make sure it is defined within a `@layer` directive.
9 | /* Label formatting when open */
10 | .tab input:checked + label{
> 11 | @apply p-5 border-l-2 border-teal-500 bg-gray-100 text-xl text-teal-500;
| ^
12 | }
13 | /* Icon */
at runLoaders (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/index.js:102:7)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:3) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/00-protons/typo.css The `text-black-500` class does not exist. If `text-black-500` is a custom class, make sure it is defined within a `@layer` directive.
1 | body {
> 2 | @apply text-black-500;
| ^
3 | }
4 |
at runLoaders (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/index.js:102:7)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(3:5) /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/source/default/patterns/03-organisms/slider/slider.css The `cursor-pointer` class does not exist. If `cursor-pointer` is a custom class, make sure it is defined within a `@layer` directive.
1 | .splide {
2 | .splide__pagination {
> 3 | @apply cursor-pointer;
| ^
4 | @apply flex;
5 | @apply h-0.5;
at runLoaders (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/index.js:102:7)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.fromEntries is not a function
at module.exports (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/corePlugins/animation.js:6:26)
at registerPlugins (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:634:7)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:843:5
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/index.js:37:49
at LazyResult.runOnRoot (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:190:17)
at runLoaders (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/index.js:104:7)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.fromEntries is not a function
at module.exports (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/corePlugins/animation.js:6:26)
at registerPlugins (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:634:7)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/lib/setupContext.js:843:5
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@tailwindcss/jit/src/index.js:37:49
at LazyResult.runOnRoot (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/postcss/lib/lazy-result.js:190:17)
at runLoaders (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/Users/danlee/Sites/CPI/CPI-Newton/wingsuit/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/index.js:104:7)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
I think that the JIT compiler complains if a class not exists? (because of change in the config or something like this).
Or I am wrong?
False alarm: My node version had changed to one earlier than 12... but this issue is still relevant: https://github.com/wingsuit-designsystem/wingsuit/issues/127#issuecomment-813103553
I think, this can be closed now, since the original purpose of the issue got resolved. Thanks for the great work!
Is your feature request related to a problem? Please describe. Up to now we are including tailwind in compat mode, because we are still using postcss version 7. Tailwind just released an experimental new just in time compiler which massively speeds up development /reload times and also adds new features. The compiler mode will be merged into tailwind 3 eventually and is not available for the compat release of tailwind. You can discover more here: https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
Describe the solution you'd like It would be wonderful to switch to postcss version 8 for wingsuit and storybook and maybe to add an option, wether to use the new jit compiler or to stick to the official tailwind version.
All the best!