search

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
http://ianlunn.github.io/Hover/
Other
29.2k stars 5.79k forks source link

Define entry points in package.json #125

Closed MohannadNaj closed 6 years ago

MohannadNaj commented 6 years ago

Specifying the entry point will make this possible from a sass file:

@import "hover.css";

also solves https://github.com/IanLunn/Hover/issues/94

for the main property, from npm's documentation:

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module's exports object will be returned.

for the style property, copying from this SO answer:

From Techwraith's pull request that added it to Bootstrap:

Many modules in npm are starting to expose their css entry files in their package.json files. This allows tools like npm-css, rework-npm, and npm-less to import bootstrap from the node_modules directory. [...]

It's actually not written anywhere but in the code for these modules right now. We're hoping to get this standardized at some point, but we've all reached this convention separately, so I'm inclined to just go with it. [...]

If you want to read about this style of css development, I wrote a thing:

http://techwraith.com/your-css-needs-a-dependency-graph-too/

There's also support in other tools, such as the browserify plugin parcelify:

Add css to your npm modules consumed with browserify.

  • Just add a style key to your package.json to specify the package's css file(s). [...]

Parcelify will concatenate all the css files in the modules on which main.js depends -- in this case just myModule.css -- in the order of the js dependency graph, and write the output to bundle.css.

github.com/postcss/postcss-import still uses the style property