We recently switched to using postcss-easy-import globs for certain files within our CSS manifest, like so:
@import "suitcss-base";
@import "./dependencies/css/partials/fonts/icons.css";
@import "./dependencies/css/partials/fonts/sans-serifs.css";
@import "./dependencies/css/partials/fonts/serifs.css";
@import "./dependencies/css/theme.css";
@import "./dependencies/css/reset.css";
@import "./dependencies/css/fonts.css";
/* Components */
@import "./components/!(_*)/!(*__*).css";
/* Utilities */
@import "suitcss-components-grid";
@import "suitcss-utils";
@import "./dependencies/css/utilities.css";
However, we have now discovered that the postcss-reporter does not accurately report stylelint warnings. Specifically, it will incorrectly associate stylelint errors with only the last file in the list of files expanded by the glob.
For example, if the glob returns this list of files:
components/chip/_component.css
components/compose/_component.css
components/disclaimer/_component.css
components/icons/_component.css
components/input/_component.css
And components/chip/_component.css contains stylelint errors, postcss-reporter will associate those errors with components/input/_component.css.
Effectively, this leaves us guessing as to the true source of any linting issues within our css. If we remove the glob and instead list all of our component CSS files manually, postcss-reporter associates linting errors with the correct files.
Additionally, if I pass plugins: [stylelint] as an option to postcss-easy-import and disable the lint option, postcss-reporter works as expected.
Any ideas?
Here is example output from a recent build (note: the actual linting errors were found in button.css):
~/Code/uidd-adel (new/card-variant-header *% u=)$ gulp compile:css
[20:21:28] Using gulpfile ~/Code/uidd-adel/gulpfile.js
[20:21:28] Starting 'compile:css'...
/Users/wwhite11/Code/uidd-adel/src/adel.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-base/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/normalize.css/normalize.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-base/lib/base.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/fonts/_icons.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/fonts/_sans-serifs.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/fonts/_serifs.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/theme.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/breakpoints.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/colors.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/fonts.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/units.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/reset.css
/Users/wwhite11/Code/uidd-adel/src/components/button/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/card/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/chip/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/compose/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/disclaimer/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/icons/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/input/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/interstitial/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/link/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/list/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/message/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/modal/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/notification/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/pageheader/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/progress-bar/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/sticker/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/table/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/textarea/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/titlebar/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/tooltip/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/button/button.css
/Users/wwhite11/Code/uidd-adel/src/components/card/card.css
/Users/wwhite11/Code/uidd-adel/src/components/chip/chip.css
/Users/wwhite11/Code/uidd-adel/src/components/compose/compose.css
/Users/wwhite11/Code/uidd-adel/src/components/decorations/decorations.css
/Users/wwhite11/Code/uidd-adel/src/components/disclaimer/disclaimer.css
/Users/wwhite11/Code/uidd-adel/src/components/icons/icons.css
/Users/wwhite11/Code/uidd-adel/src/components/input/input.css
/Users/wwhite11/Code/uidd-adel/src/components/interstitial/interstitial.css
/Users/wwhite11/Code/uidd-adel/src/components/link/link.css
/Users/wwhite11/Code/uidd-adel/src/components/list/list.css
/Users/wwhite11/Code/uidd-adel/src/components/message/message.css
/Users/wwhite11/Code/uidd-adel/src/components/modal/modal.css
/Users/wwhite11/Code/uidd-adel/src/components/notification/notification.css
/Users/wwhite11/Code/uidd-adel/src/components/pageheader/pageheader.css
/Users/wwhite11/Code/uidd-adel/src/components/progress-bar/progress-bar.css
/Users/wwhite11/Code/uidd-adel/src/components/sticker/sticker.css
/Users/wwhite11/Code/uidd-adel/src/components/table/table.css
/Users/wwhite11/Code/uidd-adel/src/components/textarea/textarea.css
/Users/wwhite11/Code/uidd-adel/src/components/titlebar/titlebar.css
/Users/wwhite11/Code/uidd-adel/src/components/tooltip/tooltip.css
src/components/tooltip/tooltip.css
123:7 ⚠ Expected indentation of 4 spaces (indentation) [stylelint]
129:5 ⚠ Expected empty line before rule (rule-empty-line-before) [stylelint]
131:26 ⚠ Unexpected trailing zero(s) (number-no-trailing-zeros) [stylelint]
137:5 ⚠ Expected empty line before comment (comment-empty-line-before) [stylelint]
137:7 ⚠ Expected whitespace after "/*" (comment-whitespace-inside) [stylelint]
137:53 ⚠ Expected whitespace before "*/" (comment-whitespace-inside) [stylelint]
138:5 ⚠ Expected empty line before comment (comment-empty-line-before) [stylelint]
138:7 ⚠ Expected whitespace after "/*" (comment-whitespace-inside) [stylelint]
138:28 ⚠ Expected whitespace before "*/" (comment-whitespace-inside) [stylelint]
140:5 ⚠ Expected indentation of 2 spaces (indentation) [stylelint]
142:3 ⚠ Expected indentation of 0 spaces (indentation) [stylelint]
145:1 ⚠ Expected no more than 1 empty line (max-empty-lines) [stylelint]
220:1 ⚠ Expected no more than 1 empty line (max-empty-lines) [stylelint]
/Users/wwhite11/Code/uidd-adel/src/components/decorations/bullet/_component.css
/Users/wwhite11/Code/uidd-adel/src/components/decorations/rule/_component.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-components-grid/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-components-grid/lib/grid.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-align/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-align/lib/align.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-display/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-display/lib/display.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-layout/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-layout/lib/layout.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-link/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-link/lib/link.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-offset/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-after/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-after/lib/after.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-after/lib/after-sm.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-after/lib/after-md.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-after/lib/after-lg.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-before/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-before/lib/before.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-before/lib/before-sm.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-before/lib/before-md.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-before/lib/before-lg.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-position/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-position/lib/position.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-size/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-size/lib/size.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-size/lib/size-sm.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-size/lib/size-md.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-size/lib/size-lg.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-text/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-text/lib/text.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-flex/index.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-flex/lib/flex.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-flex/lib/flex-sm.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-flex/lib/flex-md.css
/Users/wwhite11/Code/uidd-adel/node_modules/suitcss-utils-flex/lib/flex-lg.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/utilities.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_animations.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_background.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_decorations.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_display.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_sizes.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_text.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_margin.css
/Users/wwhite11/Code/uidd-adel/src/dependencies/css/partials/utilities/_padding.css
[20:21:32] Compiled src/adel.css
We recently switched to using
postcss-easy-importglobs for certain files within our CSS manifest, like so:However, we have now discovered that the
postcss-reporterdoes not accurately reportstylelintwarnings. Specifically, it will incorrectly associatestylelinterrors with only the last file in the list of files expanded by the glob.For example, if the glob returns this list of files:
And
components/chip/_component.csscontainsstylelinterrors,postcss-reporterwill associate those errors withcomponents/input/_component.css.Effectively, this leaves us guessing as to the true source of any linting issues within our css. If we remove the glob and instead list all of our component CSS files manually,
postcss-reporterassociates linting errors with the correct files.Additionally, if I pass
plugins: [stylelint]as an option topostcss-easy-importand disable thelintoption,postcss-reporterworks as expected.Any ideas?
Here is example output from a recent build (note: the actual linting errors were found in
button.css):