Open johanvanhelden opened 3 years ago
Also cannot get Tailwind 2.1+ working with this as our project also requires PostCSS 8
We wanted to move to Vue 3 with Storybook but that is actually impossible
Edit: Related to #19
I can confirm I also have this issue, using tailwind 1.9.6 and postcss 7
I think this is because of https://github.com/storybookjs/addon-postcss/issues/10 & https://github.com/storybookjs/addon-postcss/issues/14
Maybe a stupid question, but what is CRA (as mentioned in https://github.com/storybookjs/addon-postcss/issues/14)? Because I am using Storybook 6.2. So that should not be an issue.
CreateReactApp I assume
Hmm, ok. I am using Vue, so I don't that is not really applicable here.
I can't seem to figure this out, any idea why this happens?
Any update on PR #19 in relation to this bug?
@Nexum its detailed in #14 i think
Before Storybook 6.2, it used to install additional loaders on .css and that causes this to crash. In the same way, CRA already had postcss and other loaders on the .css extension that crash this.
I am experiencing this as well with tailwind 2.2.2 and posts 8.3.5
I am having the same issue with postcss7 compat. Tailwind works, but not @apply with vue component styles.
info => Using PostCSS preset with postcss@7.0.39 info => Using default Webpack4 setup
... then;
ERROR in ./src/components/N... You may need an additional loader to handle the result of these loaders.
> .nav-icon { | @apply h-6 w-6 text-green mr-2; | }
this is in vue3 with
I still get this issue in latest storybook, postcss, and tailwind.
package json
"@antfu/eslint-config": "^0.20.2",
"@babel/core": "^7.17.9",
"@etchteam/storybook-addon-status": "^4.2.0",
"@iconify-json/carbon": "^1.1.3",
"@storybook/addon-a11y": "^6.5.0-alpha.54",
"@storybook/addon-actions": "^6.5.0-alpha.54",
"@storybook/addon-essentials": "^6.5.0-alpha.54",
"@storybook/addon-links": "^6.5.0-alpha.54",
"@storybook/addon-notes": "^5.3.21",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addons": "^6.5.0-alpha.54",
"@storybook/csf-tools": "^6.5.0-alpha.54",
"@storybook/theming": "^6.5.0-alpha.54",
"@storybook/vue3": "^6.5.0-alpha.54",
"@types/node": "^17.0.23",
"@vitejs/plugin-vue": "^2.2.4",
"@vue/test-utils": "^2.0.0-rc.19",
"autoprefixer": "^10.4.4",
"babel-loader": "^8.2.4",
"eslint": "^8.13.0",
"jsdom": "^19.0.0",
"pnpm": "^6.32.6",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23",
"typescript": "^4.6.3",
"unplugin-auto-import": "^0.7.0",
"unplugin-vue-components": "^0.19.2",
"vite": "^2.8.6",
"vitest": "^0.9.3",
"vue-loader": "^17.0.0",
"vue-tsc": "^0.34.5"
postcss.config.js
module.exports = {
plugins: {
'tailwindcss/nesting': {},
'tailwindcss': {},
'autoprefixer': {},
},
}
.storybook/main.js
module.exports = {
'stories': [
'../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
'../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
'addons': [
'@storybook/addon-essentials',
'@storybook/addon-links',
'@storybook/addon-a11y',
'@storybook/addon-notes',
'@etchteam/storybook-addon-status',
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
postcssOptions: {
plugins: [
require('tailwindcss/nesting')(),
require('tailwindcss')(),
require('autoprefixer')(),
],
},
},
},
},
],
'framework': '@storybook/vue3',
}
Did anybody solve this? Any chance to have the @apply directive work in .css imports?
Did anybody solve this? Any chance to have the @apply directive work in .css imports?
I use storybook latest version and @storybook/addon-styling
version 0.3.1
, but still cannot use import in @layer tailwind.
Describe the bug
In my main css files I am importing several other css files to keep things clean and organized. However, in Storybook, these imported files are not processed and the Tailwind @apply logic is not ... "applied".
Steps to reproduce the behavior
custom.css
file in the./src/styles
folder./src/stories/Playground.stories.tsx
story and add thecustom
class to thediv
so it will look like this:const Template = () => (
);
export const Base = Template.bind({});
npm run storybook
text-5xl
should be.font-size: 33px
and you will see that the text is huge. So the import is fine.tailwind.css
and notice it also works!So it only seems a problem inside included css files.
If I compile the css using Laravel Mix it does properly parse and
@apply
the css. So it really seems to be a Storybook issue.Expected behavior
The proper css should be
@apply
'd in included css files.System