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

Allow the bootstrap package in npm to expose css #12441

Closed
wants to merge 7 commits into from

Conversation

Projects
None yet
5 participants
@Techwraith
Copy link
Contributor

commented Jan 30, 2014

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.

Allow the bootstrap package in npm to expose css
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.
@OscarGodson

This comment has been minimized.

Copy link

commented Jan 30, 2014

+1

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 30, 2014

This omits bootstrap-theme.css and all of our Less files...

@@ -11,6 +11,7 @@
"scripts": {
"test": "grunt test"
},
"style": "./dist/css/bootstrap.css"

This comment has been minimized.

Copy link
@cvrebert

cvrebert Jan 30, 2014

Member

Missing a comma

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 30, 2014

Is this emerging standard/convention written down anywhere?

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

Sorry, for missing the comma on that one, I'll fix it. :)

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.

Yes, this does omit those. But the theme is optional, and most of these tools allow you to do things like:

@import "bootstrap/dist/css/bootstrap-theme.css";

Here are some links to those modules:

https://github.com/defunctzombie/npm-css
https://github.com/conradz/rework-npm
https://github.com/Raynos/npm-less

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.html

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 30, 2014

Wouldn't npm-less presumably want to know about the Less files as opposed to the compiled CSS?

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

They would, but they aren't the majority case here. They'd still be able to do the work around that I showed above.

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

Also, atomify-css is working on a system that would allow you to use both less and compiled css in the same project. That way you can write your code in less, but some dependencies that you'd like to use could be standard css.

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

I just submitted a pull request to npm-less that would solve this problem, but it would require module authors who would like to provide both a compiled css file and a less file to define two properties on their package.json: Raynos/npm-less#2

If that gets merged in, I'll add a less property to bootstrap's package.json file.

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

Ok, looks like Raynos/npm-less#2 was merged, so I updated this PR to allow for less to be imported if you're using npm-less.

@shama

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2014

+1

1 similar comment
@bclinkinbeard

This comment has been minimized.

Copy link

commented Jan 31, 2014

+1

@Techwraith

This comment has been minimized.

Copy link
Contributor Author

commented Feb 3, 2014

Any thoughts on this one yet? I'd really like to see this land :)

@cvrebert

This comment has been minimized.

Copy link
Member

commented Feb 3, 2014

/cc @mdo
@Techwraith Can you squash this into a single commit?

cvrebert and others added some commits Jan 30, 2014

Allow the bootstrap package in npm to expose css
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.

@Techwraith Techwraith closed this Feb 3, 2014

@Techwraith Techwraith deleted the Techwraith:patch-1 branch Feb 3, 2014

bclinkinbeard added a commit to bclinkinbeard/Leaflet that referenced this pull request Feb 3, 2014

Indicate primary CSS file in package.json
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 a module's styles from the node_modules directory. Bootstrap is [in the process](twbs/bootstrap#12441) of adopting this standard as well.

colllin added a commit to colllin/ionicons that referenced this pull request Jan 14, 2016

heldr added a commit to heldr/slider that referenced this pull request Jul 27, 2016

Add 'style' node to package.json
Many modules in npm are starting to expose their css entry files in their `package.json` files. This allows tools like `postcss-import`, `parcelify`, `npm-css`, `rework-npm` and `npm-less` to import *rc-slider* straight from node_modules directory.

Example:
```css
@import 'rc-slider';
```

Reference:
twbs/bootstrap#12441
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.