ignore style tags in svelte files for eslint

Author: Jeff Rooks

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/**
-./*.config.js
+*.config.js
+svelte-jest.js

.eslintrc.json .eslintrc.js

@@ -1,32 +1,35 @@
-{
-  "env": {
+module.exports = {
+  env: {
     "jest/globals": true,
     "browser": true,
     "es6": true
   },
-  "parserOptions": {
+  parserOptions: {
     "ecmaVersion": 2019,
     "sourceType": "module"
   },
-  "plugins": [
+  plugins: [
     "jest",
     "svelte3"
   ],
-  "extends": [
+  settings: {
+		"svelte3/ignore-styles": attributes => attributes.lang && attributes.lang.includes('scss')
+	},
+  extends: [
     "eslint:recommended"
   ],
-  "overrides": [
+  overrides: [
     {
-      "files": [
+     files: [
         "src/date-range-picker/**/*.svelte",
         "src/date-range-picker/*.svelte"
       ],
-      "processor": "svelte3/svelte3"
+      processor: "svelte3/svelte3"
     }
   ],
-  "rules": {
+  rules: {
     "comma-dangle": "error",
-    "quotes": ["error", "double"],
-    "semi": ["error", "never"]
+    quotes: ["error", "double"],
+    semi: ["error", "never"]
   }
 }

coverage/badge-branches.svg

@@ -87,7 +87,9 @@
   }
 </script>
 
-<style>
+<style lang="scss" type="text/scss">
+  @import "src/date-range-picker/themes/variables.scss";
+
   .s-day {
     position: relative;
   }
@@ -100,7 +102,7 @@
   }
 
   .s-day:not(.disabled):not(.next-month):not(.prev-month)::after {
-    background-color: #bbdefb;
+    background-color: $withinSelection;
   }
 
   .within-selection:not(.start-date):not(.end-date)::after {
@@ -128,7 +130,7 @@
   }
 
   button:focus {
-    box-shadow: inset 0 0 0 1px #1565c0;
+    box-shadow: inset 0 0 0 2px $primaryColor;
   }
 
   .end-date::after {
@@ -165,7 +167,7 @@
   .start-date:not(.next-month):not(.prev-month) button,
   .end-date:not(.next-month):not(.prev-month) button,
   button:not(:disabled):hover {
-    background-color: #1565c0;
+    background-color: $primaryColor;
     /* Overwrite .muted class for prev/next months */
     color: white !important;
   }

coverage/badge-functions.svg

@@ -1,12 +1,14 @@
-$borderColor: lightgray;
-$borderRadius: 4px;
+@import "./variables.scss";
+
+
 
 .s-date-range-picker {
-  font-family: "Cera Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: $font-family;
   background-color: #fff;
   padding: 16px;
   border: 1px solid $borderColor;
   border-radius: $borderRadius;
+  user-select: none;
 
   & > label {
     display: block;
@@ -23,9 +25,8 @@ $borderRadius: 4px;
   }
 
   select, button {
-    font-family: "Cera Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: $font-family;
     cursor: pointer;
-    user-select: none;
   }
 
   :disabled {

coverage/badge-lines.svg

@@ -0,0 +1,5 @@
+$primaryColor: #1565c0;
+$withinSelection: #bbdefb;
+$font-family: "Cera Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+$borderColor: lightgray;
+$borderRadius: 4px;

coverage/badge-statements.svg

@@ -1,14 +1,14 @@
-const deasync = require('deasync')
-const rollup = require('rollup')
+const deasync = require("deasync")
+const rollup = require("rollup")
 
-const config = require('./rollup.config.js')
+const config = require("./rollup.config.js")
 
 exports.process = (...args) => {
   const [, input] = args
   const compiled = {}
   rollup
     .rollup({ input, plugins: config.plugins })
-    .then(bundle => bundle.generate({ format: 'cjs', sourcemap: true }))
+    .then(bundle => bundle.generate({ format: "cjs", sourcemap: true }))
     .then(({ output }) =>
       output.reduce((carry, record) => Object.assign(carry, record), compiled)
     )

src/date-range-picker/components/Day.svelte

@@ -1,3 +1,4 @@
+const sass = require("node-sass")
 /**
  * @todo Use this file in rollup.config.js to add preprocessor for TypeScript
  */
@@ -10,12 +11,35 @@ const {
 const env = createEnv()
 
 module.exports = {
-  preprocess: preprocess({
-    env,
-    compilerOptions: {
-      ...readConfigFile(env),
-      allowNonTsExtensions: true,
-      customElement: true
-    }
-  })
+  preprocess: {
+    style: async ({ content, attributes }) => {
+        if (attributes.type !== "text/scss" && attributes.lang !== "scss") return // lang is now taken into account
+
+        return new Promise((resolve, reject) => {
+          sass.render({
+              data: content,
+              includePaths: ["src"],
+              sourceMap: true,
+              outFile: "x" // this is necessary, but is ignored
+            },
+            (err, result) => {
+              if (err) return reject(err)
+
+              resolve({
+                code: result.css.toString(),
+                map: result.map.toString()
+              })
+            }
+          )
+        })
+      },
+      typescript: preprocess({
+      env,
+      compilerOptions: {
+        ...readConfigFile(env),
+        allowNonTsExtensions: true,
+        customElement: true
+      }
+    })
+  }
 }