Getting Parse error identifier expected when running storybook in svelte project
Tried installing #storybook/preset-scss, sass-loader, node-sass but still getting error like
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Identifier is expected (204:4)
202: position: relative;
203:
204: .error-panel {
^
205: position: absolute;
206: bottom: 100%;
You need to install svelte-preprocess to use Sass inside a Svelte component. Install the package and add preprocess to the svelte-loader options.
// webpack.config.js
// other imports
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
// other properties
module: {
rules: [
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
// other svelte-loader options
preprocess: sveltePreprocess() // this will process sass inside a component
}
}
},
// other loaders
]
},
// etc
};
You can then write Sass inside a component like so (note the lang="scss" attribute on the style tag).
<main>
<h1>Hello world!</h1>
</main>
<style lang="scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
h1 {
color: green;
}
}
</style>
Update based on "#storybook/svelte": "^6.5.12",
The .storybook/main.cjs should look like so
const {
typescript: preprocessTs,
scss: preprocessScss
} = require('svelte-preprocess');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx|svelte)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
"#storybook/addon-svelte-csf",
"#storybook/preset-scss"
],
"framework": "#storybook/svelte",
"core": {
"builder": "#storybook/builder-vite"
},
"svelteOptions": {
"preprocess": [
preprocessTs(), // sveltekit-storybook typescript support
preprocessScss() // sveltekit-storybook sass support
]
},
"features": {
"storyStoreV7": true
}
}
You can then write Sass inside a component like so (note the lang="scss" attribute on the style tag).
<main>
<h1>Hello world!</h1>
</main>
<style lang="scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
h1 {
color: green;
}
}
</style>
Related
I'm making a Firefox extension to open sites on a sidebar. It mostly works except for some sites like mastodon.social and github, I keep bumping into the Cross-Origin Resource Sharing (CORS) policies, which restricts other websites from displaying their content in iframes for security reasons.
How can I avoid that? Just to clarify, I'm not trying to circumvent it, I just want the site to open on my sidebar normally. Other extensions like Webpage Sidebar Viewer show the sites without any issue at all. This is my first extension, so I'm struggling to find the issue.
Here is my code:
MANIFEST.JSON
{
"manifest_version": 2,
"name": "Website Viewer",
"version": "1.0",
"description": "A website viewer with a bookmark feature",
"icons": {
"48": "icons/icon48.png"
},
"sidebar_action": {
"default_title": "Website Viewer",
"default_panel": "panel.html",
"default_icon": {
"48": "icons/icon48.png"
}
},
"permissions": [
"activeTab",
"storage",
"<all_urls>"
]
}
PANEL.HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sites"><button id="bookmark">+</button></div>
<script src="panel.js"></script>
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#bookmark {
display: block;
border: 1px;
border-radius:5px;
border-color: gray;
}
#sites {
display: flex;
flex-wrap: wrap;
margin: 10px;
overflow-y: auto;
height: auto;
width: 100%;
}
button {
cursor: pointer;
margin: 5px;
padding: 0;
width: 16px;
height: 16px;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
PANEL.JS
let iframe = null;
function showWebsite(url) {
// If the iframe has not been created yet, create it and add it to the page
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'website-iframe');
document.body.appendChild(iframe);
}
// Set the src attribute of the iframe to the URL of the website to display
iframe.src = url;
// Listen for the iframe's load event and set its sandbox attribute to allow scripts and forms
iframe.addEventListener('load', () => {
iframe.setAttribute('sandbox', 'allow-scripts allow-forms');
});
}
function addBookmark() {
browser.tabs.query({currentWindow: true, active: true}).then((tabs) => {
var site = tabs[0].url;
// If the site is not already in the list of bookmarks, add it
if (!document.getElementById(site)) {
var item = document.createElement('button');
item.setAttribute('id', site);
item.style.backgroundImage = `url("https://s2.googleusercontent.com/s2/favicons?domain=${site}")`;
item.addEventListener('click', () => {
showWebsite(site);
});
document.getElementById('sites').appendChild(item);
browser.storage.local.set({
[site]: true
});
}
});
}
function initialize() {
browser.storage.local.get().then((items) => {
Object.keys(items).forEach((key) => {
var item = document.createElement('div');
item.setAttribute('id', key);
item.textContent = key;
item.addEventListener('click', () => {
showWebsite(key);
});
document.getElementById('sites').appendChild(item);
});
});
}
document.addEventListener('DOMContentLoaded', initialize);
document.getElementById('bookmark').addEventListener('click', addBookmark);
My extension should open any website on the sidebar. Instead, I got an error saying that security measures that avoid loading the site altogether.
I'm migrating my project from create-react-app to Vite.
Among my styles there is a following fragment:
// Button.module.scss
.btn {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&:hover {
--btn-bg-color: gray;
border-color: white;
}
}
}
And in other module:
.label {
composes: btn from 'src/Button.module.scss'
}
This used to build fine with webpack.
With Vite, in css bundle I get this:
._btn_x66zc_1 {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&
:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&
:hover {
--btn-bg-color: gray;
border-color: #fff
}
}
}
and, respectively, CLI warnings:
warnings when minifying css:
▲ [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-#nest]
<stdin>:309:2:
309 │ &:not(:disabled) {
╵ ^
Apparently, a module linked with composes prop isn't get pre-processed.
I tried to add a postcss-nested plugin – in a hope nesting syntax can be handled both at pre- and post-processing stages:
// vite.config.ts
{
css: {
postcss: { plugins: [ postcssNested() ] }
}
}
but this did nothing.
The questions are:
Is it possible to make it work as it used to?
Is the error I'm getting now an expected behaviour? (and thus, did react-app use some specific tricks to make this non-conventional usage possible?)
i have working scss styles
.alert {
::v-deep .v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
I want to redo these styles like this.
.alert {
:deep(.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
The problem is that it doesn't work.
I use
"vue": "^2.6.11",
Found information that this functionality is not supported in "vue": "^2.6.11",.
Is it really not supported or am I doing something wrong?
Looking at the discussion found here: https://github.com/vuejs/core/issues/4745
Every example starts with :deep and never nested?
:deep(.alert.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
:deep(.alert) {
.v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
}
Perhaps one of those two works?
I tested these codes and they works for me. I am using vue version 2.6.11 and vue cli version 4.5 and sass version 1.26.5:
parent component:
<template>
<section>
<div class="myParent">
<ChildAlert></ChildAlert>
</div>
<ChildAlert></ChildAlert>
</section>
</template>
<script>
import ChildAlert from "./ChildAlert";
export default {
name: "AlertCompo",
components: {
ChildAlert
}
}
</script>
<style scoped lang="scss">
.myParent {
background-color: #000;
:deep(.myTitle) {
color: red;
}
}
</style>
child component:
<template>
<section>
<h1 class="myTitle">this is Child component</h1>
</section>
</template>
<script>
export default {
name: "ChildAlert"
}
</script>
<style scoped>
</style>
i want to get session storage in to my scss file
in here have my scss file and component.ts file
<<---- component.ts file ---->>
this.BarWidth = sessionStorage.getItem('BarWidth');
this.BarHeight = sessionStorage.getItem('BarHeight');
<<--- Scss file --->>
$BarWidth = sessionStorage.getItem("BarWidth");
$BarHeight = sessionStorage.getItem("BarHeight");
.barcode_6_style {
max-width: $BarWidth;
min-width: $BarWidth;
max-height: $BarHeight;
min-height: $BarHeight;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}`
I wanted the same feature a while back but realized this is already supported by webpack. My solution looks like this:
var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
module: {
loaders:[
{test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
]
},
}
I have Laravel 5.4 project with Vue.js. I wont to use CSS Modules feature that provides by vue-loader. I have vue.js file with code:
<template lang="pug">
.LAYOUT
.SIDE-NAVBAR
.MAIN
</template>
<style module>
.LAYOUT{
height: 100%;
width: 100%;
border: 1px solid red;
}
</style>
<script>
export default {
methods:{
test(){
console.log(this.$style.LAYOUT)
}
},
mounted(){
this.test();
}
}
</script>
When I'm trying to see some information about "this.$style.LAYOUT" in console, it shows that the variable is undefined. May be I should do some settings? How to fix it?
When I'm trying to get value of "this.$style", it returns object:
It may be undefined because you not using that class.
Below is a working example.It also includes how to set dynamic css module class:
<template>
<div>
<button :class="[className1, className2, dynamicClass]" #click="showStyleObject">Click Me</button>
</div>
</template>
<script>
export default {
name: 'example',
props: {
'type-of-button': {
validator: function (value) {
return ['primary', 'secondary', 'default'].indexOf(value) !== -1
}
}
},
data() {
return {
className1: this.$style.button,
className2: this.$style.button2,
}
},
created() {
console.log(this.$style.button)
console.log(this.$style.button2)
},
computed: {
dynamicClass() {
return this.$style[this.typeOfButton]
}
},
methods: {
showStyleObject() {
console.log(this.$style)
}
},
}
</script>
<style module>
.button {
background: red;
}
.button2 {
padding: 8px 10px;
}
.primary {
padding: 8px 10px;
background: blue;
color: white;
border-radius: 10px;
}
.secondary {
padding: 8px 15px;
background: darkslategrey;
color: aliceblue;
border: none;
}
.default {
background: aliceblue;
}
</style>