I want to publish an angular 2 component on NPM. This component use css which refer to some fonts. As far as publishing .ts files I can do that. But I'm lost concerning the css and the fonts.
I have :
despotic-turtle.component.ts
despotic-turtle.component.css
fonts/font.ttf .svg ...
and I have in my css this:
#font-face {
font-family: 'despotic-turtle';
src: url('despotic-turtle/fonts/font.eot?ggipqk');
/* ....*/
}
I can't leave the css and fonts as is, so what can be done ?
css, fonts and html will be included in your npm publish.
The issue you'll encounter will be that the referenced css will not be found unless you add moduleId in #Component:
#Component({
moduleId: module.id
})
Note that you'll have to compile using commonjs to make this work.
Also, you shouldn't publish the .ts files to npm, the only files you should publish are index.js and your-component.js + your-component.css + your-component.html, .d.ts files and font files.
Keep in mind that npm is used to publish transpilled files only, when you import a library, you should not have to compile it (check #angular libraries, there's no ts in their libraries).
Related
I am working on a project that uses Vue + Tailwind inside a WP plugin for a site that use a tailwind theme generates all the tailwind classes I need.
The issue I am running into is when I load the CSS for my plugin I'm getting some really strange conflicts which I have boiled down to having two tailwind style sheets loaded at the same time.
Unfortunately there are some npm packages I am using that have their own styles and so just omitting the style sheet all together isn't an option.
So my question is there a way to just rollup tailwind separately so I can omit that file if necessary?
Here is an excerpt from my current vite config:
rollupOptions: {
output: {
assetFileNames: 'project-[name].[ext]',
chunkFileNames: 'project-[name].[ext]',
entryFileNames: 'project-[name].js',
},
},
Is there a way to not extract CSS files with rollup?
Current:
|-assets
|--main.css
|--main.js
Desired:
|-assets
|--main.js
Where main.js imports css. I see this working with Vite client where the main js entry file imports CSS and it works in the browser. It's not obvious to me how but I'm wondering if this is an option.
Usually when I build a webpage, I include some library like bootstrap from CDN. Now I want an offline webpage (in reality I'm using electron.. but same thing) in a Node environment. I chose Pure as my framework.
So I have my Node project with electron installed and now I
npm install purecss --save
which installs purecss into node_modules. It says to use require('yahoocss') to load the files, but how am I supposed to server the build files (pure.min.css) on my HTML pages?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
</body>
</html>
I mean.. do I put a stylesheet link that points to node_modules? That seems.. wrong.
You need to use something like Webpack. This will allow you to use static NPM modules like Pure by importing them into a separate JS file that only gets used by Webpack. Webpack reads this file and depending on the module type you are importing, selects the appropriate loader. This loader will perform different types of modifications on the imported files and once completed, will export the outputs to new static files that you can then include in your html document.
Please go and take a look at Webpack's documentation and also see this list of available loaders.
I don't believe this is the best answer, but what I want is to be able to keep third-party libraries separate from my code.
(I follow the principle that my CSS/JS is going to change on a schedule different than third-party libraries. Usually my code is going to change more frequently, so that's why I believe it's in my best interest to keep third-party code separate from my CSS, as well as not embedded into the HTML.)
Since I use webpack for compiling and bundling my TypeScript files, I use a plugin to grab a copy of the Pure CSS file and put it into the directory I want.
You'll at least need npm install --save-dev webpack copy-webpack-plugin (in addition to your already performed npm install purecss).
In webpack.config.js you can pull in copy-webpack-plugin (const CopyWebpackPlugin = require('copy-webpack-plugin');) and then in the configuration have it grab a copy of the CSS file(s) you want from the package:
/* ... */
plugins: [
/* ... */
new CopyWebpackPlugin({
patterns: [
/* ... */
{
from: './node_modules/purecss/build/pure-min.css',
to: 'lib'
},
/* ... */
]
})
/* ... */
],
/* ... */
This will copy that file into a lib directory.
You can then include the file in your HTML file(s):
<link rel="stylesheet" href="./lib/pure-min.css" />
Again, not sure this is the best way, but it's worked well for me when I've wanted to copy a specific file from node_modules into my generated directory.
I'm trying to get my head around this sass importer:
https://github.com/idcware/node-sass-jspm-importer
I'm not entirely certain I'm trying to use it correctly.
I'm trying to use the example of using it to import font-awesome.
The GitHub page provides the following example
gulp.task('build-sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass({
errLogToConsole: true,
functions: sassJspm.resolve_function('/lib/'),
importer: sassJspm.importer
}))
.pipe(gulp.dest('dist/css'));
});
In this example I'm uncertain how much of a bearing this section has:
gulp.src('src/sass/*.scss')
How does this path make any sense when the SASS/SCSS files are to be imported from JSPM Packages which would have paths like:
jspm_packages/npm/font-aweesome#4.6.3/scss
The lib folder in this section
functions: sassJspm.resolve_function('/lib/'),
Should that be /jspm_packages/ since in the documentation it specifies
Where /lib/ is the path to your jspm_packages folder in your document
root.
In which case why did they not just specify jspm_packages?
I was thinking about this all wrong. One of the things I was missing was that with SASS/SCSS you can use import directives. As such rather than import many generated css files it makes more sense to have the SASS compiler/importer produce one single CSS File.
So I created a single SCSS file that was outside of my JSPM_Packages folder in src called SCSS.
In this SCSS file I could then place the following code
$fa-font-path: jspm_resolve("font-awesome/fonts/");
#import "jspm:font-awesome/scss/font-awesome";
The line in the gulp file:
gulp.src('src/scss/*.scss')
Can then find this single SCSS File and from there work out how to import all the SCSS Files for Font-Awesome through the JSPM_Package folder structure. A single main CSS file was then placed in the destination directory which contained the css from font-awesome.
Which in my case where I'm using ASP.NET Core looks like this:
.pipe(gulp.dest('./wwwroot/css'));
The functions line needed to be set to jspm_packages
functions: sassJspm.resolve_function('/jspm_packages/'),
I'm not sure why they have it as lib in their documentation - maybe this was an old JSPM configuration?
I noticed that Bootstrap and Normalize.css both have a "style" field in their package.json.
Why do they have this? If I had to guess, it's to allow users to import the defined stylesheet as easily as doing require('bootstrap'), but that doesn't seem to be the case.
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.