In an app derived from react-boilerplate using styled-components 3.3.2 I am trying to display SVGs in pseudo-classes like this:
import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'
const Tab = styled.div`
&:after {
content: url("${arrowUp}");
position: relative;
}
&.active:after {
content: url("${arrowDown}");
}
`;
However, the first use of content: url("${...}") breaks all following style definitions in the block.
In this case &.active:after styles are ignored, while position: relative in the &:after definition is parsed.
The SVGs look properly formatted and they do get url-encoded. However, after much testing, the part in the SVG that breaks the styling seems to be the parentheses in transform="translate(...)" attributes, which do not get url-encoded. Should they be?
If I assign the SVGs in background definitions instead of a pseudo-class content everything works as intended, so it doesn't seem to be a problem with the general setup.
Is this a bug? If yes where? How can I work around this (except using the SVGs in backgrounds)? Can I circumvent the data parsing and plainly insert the SVG file URL somehow (asking as a Webpack / React newbie)?
Related
I am using following css property in my component styling file in NextJs or if i import my main styles.scss file in my any component.styles.scss file it gives same error:
input[type="date"] {
display: block;
/* Solution 1 */
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 1.2em;
}
But it throws following error as show in image:
Error Image
Looking at the logs, the error seems to be coming from confirm-funding.module.scss
By design, CSS modules are scoped CSS classes and you'll need to import them within a JS file and apply them to an HTML element’s className. In your case, you seem to be using a global selector (button) inside confirm-funding.module.scss which is causing the error.
You can either opt-out from CSS modules or use class selector.
Selectors like html, body, button, input etc are global (unscoped) selectors; in addition, they also are not valid scoped classes (like how .exampleClassName is scoped to a div element in the example above). Next expects CSS modules to be pure in that they don’t produce side effects (like altering the body style based upon a page being loaded or a particular component being loaded -- in the example above, the body is outside of the component-level scope). The reason pure stylesheets are enforced/encouraged is because they allow CSS to be split chunked (when you land on a page, you only download the styles necessary to view that particular page, instead of downloading everything at once).
More details on css modules
Right now, I figure out that I have two way to do this:
One , I am putting global style such as in the App.css and then import them in the App.js
:root {
box-sizing: border-box;
font-size: 62.5%;
}
*,
::before,
::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
Another way is to use GlobalStyles that provide by styled Component. Which way should I do ?
Thanks for the help!
If you using a library you should stick to its API.
Meaning using createGlobalStyle.
A helper function to generate a special StyledComponent that handles global styles.
In more advanced use cases (like having a theme) your only option to alter the global styles will be using the pre defined API.
As a side note, you can do it in more than two ways (BUT DONT DO IT), like querying the DOM and editing the style.
The stylesheet is really simple so I don't know what could mess around the result. I checked the style in the "elements". It seems that I cannot overwrite "display: block" in user agent stylesheet even though I used "!important".
import React from "react";
import ReactDOM from "react-dom";
import "./styles.less";
function App() {
return (
<div className="App">
<div className="hide">Hello CodeSandbox</div>
</div>
);
}
stylesheet
.App {
font-family: sans-serif;
text-align: center;
.hide {
display: none !important;
}
}
link with the environment:
I expect "Hello CodeSandbox" to disappear.
Create react app 2(CRA2) supports SASS out of the box.
I assume that officially the CRA2 does not support the LESS. So if you needs exactly LESS you can use react-app-rewired. This package rewrites webpack configuration without ejecting.
None of your styles get applied, and this is because the default codesandbox template (I guess, based on Create React App) does not support less.
It is a bit misleading, because it does not throw an error, but what it does is actually import the file as plain text, without setting it as style.
Two ways to see this, is that you can important the actual text:
import less_text from './styles.less';
console.log('less_text:', less_text);
Which will logs the contexts of the less file, without transpilation even.
What you could do for now, as I don't know how to use a template that supports less, is to change it to css for now. If you move .hide { ... } to the root of the css file, and import it as import 'styles.css' your styles do get applied :)
I think the problem is that you are missing less processor. By default browser does not understand less and if you use webpsck then you need loader for it
You need a less loader. Something like this https://medium.com/#joseph0crick/react-css-modules-less-webpack-4-a50d902d0a3
I'm using a CDN, which has a bunch of defined pcss variables that I would like to use in my styled components. I was able to use the color vars easily via var(--color-green). However, the media-queries variables don't seem to work. Anyone know why this might the case?
This is what I've tried, where --media-query-max-small is defined in the cdn as max-width: 647px
const comp = styled.div`
#media (var(--media-query-max-small)) { }
`
As a creator of PostCSS, I recommend to use astroturf. It is CSS-in-JS solution with styled-components API, but in contrast to styled-component, astroturf doesn’t have runtime (SC has 15 KB runtime), parse CSS only during build (SC parse it every time on the client) and support PostCSS and many other CSS tools.
In your case, just put postcss-loader for CSS and astroturf/loader for JS files. Everything will work.
I'm trying to slowly introduce Styled-Components into my existing codebase which relies heavily on global SASS variables (partials imported into a main.scss).
How do I reference the SCSS variables? The following doesn't work:
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: $color-blue;
`;
export default Button;
Am I approaching this from the wrong way?
I wrote up an article about solving this very issue. https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
Essentially, you can use the excellent sass-extract library along with sass-extract-loader and the sass-extract-js plugin to bring your global Sass variables into your app as a theme object.
Pardon me if this is an old question but I thought I chip in on how I use CSS variables for both my .scss and styled-components when the need arises.
Basic Usage:
Declaring a global variable (preferably at _variables.scss)
:root {
--primary-color: #fec85b;
}
Using the global property:
.button {
background-color: var(--primary-color);
}
or
const Button = styled.button`
background-color: var(--primary-color);
`;
Please pay attention to the double line --.
Variables play a very important role in .scss or .sass, but the functionality cannot be extended outside the file.
Instead, you have to create a separate .js file (For example: variable.js) and define all your variables as an object.
I recommend using the ThemeProvider component. I'm also moving away from sass and towards styled components. The Theming with styled-components uses React's context api and is quite nice. Check out the this documentation Styled Components Theming.