adding scss to release

README.md

@@ -73,6 +73,7 @@ If you have ideas, improvements, suggestions etc. don't hesitate to open a pull
 
 ### Todos
 
+- [ ] Generate separate css file to be included (currently, you have to use scss)
 - [ ] Usage examples
 - [ ] Demo
 - [ ] API documentation

build/rollup.config.js

@@ -14,6 +14,7 @@ import typescript from 'rollup-plugin-typescript2';
 import minimist from 'minimist';
 import Scss from 'rollup-plugin-scss';
 import analyze from 'rollup-plugin-analyzer';
+import Autoprefixer from 'autoprefixer';
 
 // Get browserslist config and remove ie from es build targets
 const esbrowserslist = fs.readFileSync('./.browserslistrc')
@@ -46,20 +47,32 @@ const baseConfig = {
  'process.env.NODE_ENV': JSON.stringify('production')
  },
  vue : {
- preprocessStyles: true
+ target : 'browser',
+ css : false,
+ preprocessStyles : true,
+ preprocessOptions: {
+ css: {
+ additionalData: `@import 'src/css/maplibre.scss';`
+ }
+ }
  },
  postVue: [
  resolve({
- extensions: [ '.js', '.jsx', '.ts', '.tsx', '.vue' ]
+ extensions: [ '.js', '.jsx', '.ts', '.tsx', '.vue', '.scss' ]
  }),
  Scss({
+ output : 'maplibre.css',
+ include : [ 'src/css/maplibre.scss' ],
+ watch : 'src/css',
+ processor : () => PostCSS([ Autoprefixer() ]),
  includePaths: [
  path.join(__dirname, '../../node_modules/'),
  'node_modules/'
  ]
  }),
  // Process only `<style module>` blocks.
  PostCSS({
+ extract: true,
  modules: {
  generateScopedName: '[local]___[hash:base64:5]'
  },

package.json

@@ -1,17 +1,19 @@
 {
  "name": "vue-maplibre-gl",
- "version": "1.0.0-beta.1",
+ "version": "1.0.0-beta.2",
  "description": "Vue 3 plugin for maplibre-gl",
  "keywords": [
  "vue",
  "vue3",
  "vuejs",
  "vue3js",
+ "component",
  "vue-component",
  "vue3-component",
  "maplibre",
  "maplibre-gl",
- "map"
+ "map",
+ "maptiler"
  ],
  "author": {
  "name": "Volker Nauruhn",
@@ -30,7 +32,8 @@
  "types": "dist/types/src/entry.esm.d.ts",
  "files": [
  "dist/*",
- "src/**/*.vue"
+ "src/**/*.vue",
+ "src/css/*"
  ],
  "sideEffects": false,
  "scripts": {
@@ -66,16 +69,17 @@
  "geojson": "^0.5.0",
  "maplibre-gl": "^1.15.2",
  "minimist": "^1.2.5",
+ "node-sass": "^6.0.1",
  "postcss": "^8.3.6",
  "rimraf": "^3.0.2",
- "rollup": "^2.56.2",
+ "rollup": "^2.56.3",
  "rollup-plugin-analyzer": "^4.0.0",
  "rollup-plugin-postcss": "^4.0.1",
  "rollup-plugin-scss": "^3.0.0",
  "rollup-plugin-terser": "^7.0.2",
  "rollup-plugin-typescript2": "^0.30.0",
  "rollup-plugin-vue": "^6.0.0",
- "sass": "^1.38.0",
+ "sass": "^1.38.1",
  "sass-loader": "^10.2.0",
  "ttypescript": "^1.5.12",
  "typescript": "^4.3.5",

src/css/maplibre.scss

@@ -1,3 +1,7 @@
 @import "map";
 @import "controls";
 @import "styleSwitch.control";
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+}

src/entry.ts

@@ -10,6 +10,7 @@ Object.entries(components).forEach(([ componentName, component ]) => {
  if (componentName !== 'default') {
  const key = componentName as Exclude<keyof NamedExports, 'default'>;
  const val = component as Exclude<ExtendedPlugin, typeof plugin>;
+ // @ts-ignore
  (plugin as ExtendedPlugin)[ key ] = val;
  }
 });