Skip to content

When using glob @imports, postcss-reporter incorrectly reports stylelint errors #158

@rocketspops

Description

@rocketspops

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions