search

suitcss / suit

Style tools for UI components
http://suitcss.github.io/
3.8k stars 229 forks source link

Missing @custom-media definitions #132

Closed upq closed 8 years ago

upq commented 8 years ago

Im getting this when running npm run build

6:1     ‼  Missing @custom-media definition for '--sm-viewport'. The entire rule has been removed from the output. [postcss-custom-media
]

node_modules/suitcss-utils-flex/lib/flex-md.css
6:1     ‼  Missing @custom-media definition for '--md-viewport'. The entire rule has been removed from the output. [postcss-custom-media

]

node_modules/suitcss-utils-flex/lib/flex-lg.css
6:1     ‼  Missing @custom-media definition for '--lg-viewport'. The entire rule has been removed from the output. [postcss-custom-media
]

Its the case for all other components and utils not just flex. but didn't want to post a long redundant log.

flip-it commented 8 years ago

You need to configure the breakpoints. Try to add something like this before you import the module:

@custom-media --sm-viewport max-width:750px;
@custom-media --md-viewport (min-width:750px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

I have it in my theme.css file as suggested here.

simonsmith commented 8 years ago

Yep, as @flip-it says, something like:

@import "suitcss";
@custom-media --sm-viewport max-width:750px;
@custom-media --md-viewport (min-width:750px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Will work as expected then