Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add name/index.less to file search path #2879

Closed
zanona opened this issue Apr 24, 2016 · 10 comments
Closed

Add name/index.less to file search path #2879

zanona opened this issue Apr 24, 2016 · 10 comments

Comments

@zanona
Copy link

zanona commented Apr 24, 2016

I believe it would be very beneficial for Less users who want to split their work in modules on different directories to allow Less to search for files named index.less within that directory in case the format can't be found, this would help requiring dependencies in the same fashion other systems allow, like commonJS?

For example, the below would be valid:

@import 'lib/main' /*searches on lib/main.less and lib/main/index.less*/

Perhaps there's already an way to achieve this behaviour? If someone could let me know it would be really appreciated.

Thanks in advance.

@seven-phases-max
Copy link
Member

seven-phases-max commented Apr 24, 2016

How many Less libraries do you know with their master file named index.less?
I don't like the idea of forcing either predefined file names for the sake of syntactic sugar (5 chars economy for index? Now what if I don't like index and want the master file of my button component to be named button or main or whatever?).

@zanona
Copy link
Author

zanona commented Apr 24, 2016

@seven-phases-max I believe it could be just a question of defaults. Analysing its correlation with CommonJS makes it easier to understand:

var foo = require('./foo');
var foo = require('./foo/index');
var foo = require('./foo/index.js');

All the examples above are valid ones, so nothing prevents users to have their main file pointing to something different like require('./foo/bar.js') instead.

So I believe the suggestion might not only serve a purpose to save 5 characters but instead seeing things in a more modular fashion, the stylistic beauty comes as a bonus. Also, the similarity between javascript modules and less files would certainly be a very pleasing way to work with.

Considering the following file structure:

./lib
├── auth
│   ├── index.js
│   └── index.less
├── fonts
│   ├── MuseoSansRounded-300.otf
│   ├── MuseoSansRounded-500.otf
│   ├── MuseoSansRounded-700.otf
│   ├── fontawesome.ttf
│   └── index.less
├── forms
│   ├── index.js
│   └── index.less
├── nav
│   ├── index.js
│   └── index.less
├── scrollmap
│   └── index.js
└── video
    ├── index.js
    └── index.less

Look at how similar javascript and less files get in terms of structure.

main.less

@import './lib/nav';
@import './lib/video';
@import './lib/auth';
…

main.js

var nav   = require('./lib/nav'),
    video = require('./lib/video'),
    auth  = require('./lib/auth');

Of course in both cases the index word could appear, but that becomes unnecessary once you start to visualise projects as module-dependant.

Honestly, I would believe that if this same decision was taken in order to adapt this kind of behaviour into other systems, it could mean a positive thing.

@zanona
Copy link
Author

zanona commented Apr 24, 2016

@seven-phases-max Also in regards to your question:

How many Less libraries do you know with their master file named index.less?

Replying with another question might be an interesting way to analyse the current situation.

How many Less libraries have you currently required in the following manner: @import ../path/module-name/module-name.less?

So I believe in this case there's a rather unnecessary redundancy in regards directory name and file name. I have seen quite a few libraries doing that. Actually, based on my experience, the great majority. But that's just because currently there's no other intuitive way to do it.
So index.less can be a good option for fixing that I believe.

@seven-phases-max
Copy link
Member

seven-phases-max commented Apr 24, 2016

This implies the addiction to a particular naming/code-structuring scheme... I know it's pretty much useless to resist to a popular and wide-spread (in a certain realm) pattern, but for those who came from other realms all this may not be so natural. Either way, the answer is probably in "Implement as plugin" (Less itself is not supposed to be a package/module manager like CommonJS or npm or bower or whatever, so I suspect putting this into the core would be an overkill).
So I'll add the corresponding label - preliminary (to be changed if there're other opinions).

@zanona
Copy link
Author

zanona commented Apr 24, 2016

That makes sense — Separating it as a plugin.
I will read the documentation on how to implement a plugin and post back here in case I am successful.

Thanks for your help @seven-phases-max.

@seven-phases-max
Copy link
Member

seven-phases-max commented Apr 24, 2016

To answer:

How many Less libraries have you currently required in the following manner: @import ../path/module-name/module-name.less?

None. I use another code structuring pattern where the component master file is not put into the directory of auxiliary/asset files of that component, so in my realm all these imports look just like:

@import "lib/button"; // ->"lib/button.less" which then refers to whatever files in `lib/button` (or whatever) dir
@import "lib/nav";
@import "lib/etc";

@zanona
Copy link
Author

zanona commented Apr 24, 2016

But that makes it impossible to integrate with package managers (bower, npm, etc) where they are downloaded inside their own directories. So for the everyone using those, would certainly be left out.

It certainly works within your system but if you just look around you will see many of the examples mentioned. Lesshat as possibly being one of the most downloaded Less libraries out there.

Installation:

npm i lesshat 
bower i lesshat

Importing:

@import 'node_modules/lesshat/build/lesshat.less';
@import 'bower_components/lesshat/build/lesshat.less';

In this case they have the build directory as well, but the issue with repeating module-names are still in place.

Also, in regards your mention:

(Less itself is not supposed to be a package/module manager like CommonJS or npm or bower or whatever, so I suspect putting this into the core would be an overkill).

CommonJS can certainly be categorised in the same level as Less since it just interprets modules but is not responsible for managing them. So in that case the index use-case was still added either way?

You have mentioned the plugin solution which I would be happy to attempt, but I am not sure if a plugin would have any chance to interact and act on how and where Less reads/searches files from? Would you by any chance have any recommendations?

@zanona
Copy link
Author

zanona commented Apr 24, 2016

Just a confirmation I am not alone on this: sass/sass#690

@matthew-dean
Copy link
Member

This is a duplicate issue/request. Will find/tag the duplicate when I have a moment, unless someone else can.

@matthew-dean
Copy link
Member

Closing as duplicate of #1339.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants