Jump to content

Topic on Manual talk:Coding conventions/CSS

"The filename of an import statement should omit the .less file extension."

3
Summary by Volker E. (WMF)

Updated all import statements and settled on “has to” on the conventions description.

Jdlrobson (talkcontribs)

Omitting the '.less' file extension causes problems in environments where you are importing different types of files. Currently the code

@import 'foo';

in a folder with 'foo.css' and 'foo.less' will import the latter (foo.less). In Webpack or any JS bundler, it will throw an error as it will assume it is a package with an index.css or index.js file meaning the code cannot be used.

I would thus propose we change this convention. In the web team, we've been using code outside ResourceLoader, for example to create this storybook instance: https://doc.wikimedia.org/MobileFrontend/master/js/ui/?path=/story/*

To workaround this issue in the meantime we have to create extension-less files like this one: https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/.storybook/resolve-less-imports/mediawiki.ui/variables I would rather not do that.

Jdlrobson (talkcontribs)
Volker E. (WMF) (talkcontribs)

@Jdlrobson ”Should” or “has to”. My understanding from our last group's conversation was “has to”?ǃ