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.

Sign up for GitHub

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

Jump to bottom

feat: Add support for LESS asset type #11

Merged
merged 2 commits into from
Mar 20, 2024
Merged

feat: Add support for LESS asset type #11

merged 2 commits into from
Mar 20, 2024

Conversation

ernstc
Copy link

@ernstc ernstc commented Feb 26, 2024

Added support for generating LESS asset type (https://lesscss.org/)

@XhmikosR XhmikosR changed the title Added support to LESS asset type. Add support for LESS asset type Mar 1, 2024
@XhmikosR XhmikosR changed the title Add support for LESS asset type feat: Add support for LESS asset type Mar 1, 2024
@XhmikosR
Copy link
Member

XhmikosR commented Mar 7, 2024

It's been many years since I last used Less myself. @julien-deramond maybe you could have a look at the PR too?

@julien-deramond
Copy link
Member

julien-deramond commented Mar 20, 2024 •
edited
Loading

I've never used Less nor this project, but I'll try to help anyway.

My manual tests show that from the same icons folder, using Less, Sass or CSS options generates more or less the same final icons.css (there are some discrepancies in terms of formatting, but the content is exactly the same).

Here are the steps I used.

npm i
mkdir icons ; mv /tmp/logo.svg icons/

Generation by default

./bin/fantasticon ./icons -g css -o dist

Content of the dist/icons.css:

@font-face {
  font-display: block;
  font-family: "icons";
  src: url("./icons.eot?968fcdae2a73d0d6a6ea3bb95db6543f#iefix") format("embedded-opentype"),
url("./icons.woff2?968fcdae2a73d0d6a6ea3bb95db6543f") format("woff2"),
url("./icons.woff?968fcdae2a73d0d6a6ea3bb95db6543f") format("woff");
}

i[class^="icon-"]::before, i[class*=" icon-"]::before {
  font-family: icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-logo::before {
  content: "\f101";
}

Generation with Less

npm i -g less
./bin/fantasticon ./icons -g less -o dist
cd icons
lessc icons.less icons.css

Generated icons.css:

@font-face {
  font-display: block;
  font-family: "icons";
  src: url("./icons.eot?968fcdae2a73d0d6a6ea3bb95db6543f#iefix") format("embedded-opentype"), url("./icons.woff2?968fcdae2a73d0d6a6ea3bb95db6543f") format("woff2"), url("./icons.woff?968fcdae2a73d0d6a6ea3bb95db6543f") format("woff");
}
i[class^="icon-"]::before,
i[class*=" icon-"]::before {
  font-family: icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-logo::before {
  content: "\f101";
}

By using the following index.html, both CSS works and render the same thing (plus the diff shows that the result is the same):

<html>
<head>
<link href="./icons.css" rel="stylesheet"/>
</head>
<body>
<i class="icon icon-logo" width="100" height="100"></i>
</body>
</html>

Tried the same approach with a more complex folder, and it works too.
So in terms of feature, works like a charm!

julien-deramond
julien-deramond approved these changes Mar 20, 2024
View reviewed changes
Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the manual tests and the code that is really close to the one dedicated to Sass for instance, everything's LGTM! Thanks for the PR @ernstc

@XhmikosR XhmikosR merged commit 1fa8c59 into twbs:dev Mar 20, 2024
16 checks passed
@github-actions GitHub Actions
Copy link

🎉 This PR is included in version 2.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@julien-deramond julien-deramond julien-deramond approved these changes

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ernstc @XhmikosR @julien-deramond