I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.
Is there a way to share these across modules ?
:root{
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: red;
--gutter: 1.618rem;
}
#custom-media --small-viewport (max-width: 30em);
#custom-media --large-viewport (min-width: 75em);
#custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
EDIT: *** ok i tried this, thought it worked but hasn't
:global(:root) {
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: pink;
--gutter: 1.618rem;
}
CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.
Another solution is to define this global values using postcss plugin options:
https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-media#extensions
Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.
#import './root.css';
.foo {
color: var(--primary);
}
Related
I did some search in github and here, but maybe I'm doing it the wrong way.
Using styled from #mui/material/styles generates random class names like this:
const TitleWrapper = styled('div')`
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
`
Sometimes it becomes hard to debug the app when we don't know where the rendered component came from.
There's an option parameter that can be passed to styled with a label prop that adds a suffix to the class:
const TitleWrapper = styled('div', { label: 'TitleWrapper' })`
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
`
Is there an automated way of adding that suffix to identify the component? It's really painful to do this in every single component.
The solution I found was to update my babel.config.js file with the following changes
plugins: [
[
'#emotion',
{
autoLabel: 'always',
importMap: {
'#mui/material': {
styled: {
canonicalImport: ['#emotion/styled', 'default'],
styledBaseImport: ['#mui/material', 'styled'],
},
},
},
},
],
'#babel/plugin-transform-runtime',
],
I hope this is useful to someone who faces the same issue.
In order to get a custom class name i would like to suggest you to use scss (your own custom classes and styles), then you can put every style you need there , actually that's what i am doing right now, except when i need some styles based on some dynamic data then i can use both: my custom scss classes and styled-component class
I'm trying to make use of ScopedCssBaseline, but its behavior is different from CssBaseline.
ScopeCssBaseline add styles to input:
.MuiScopedCssBaseline-root *, .MuiScopedCssBaseline-root *::before, .MuiScopedCssBaseline-root *::after {
box-sizing: inherit;
}
which overrides box-sizing: content-box of .MuiInputBase-input, so inputs look bad.
How I can scope css baseline so that with behaviour similar to CssBaseline?
Sandbox: https://codesandbox.io/s/material-demo-forked-kf8iy?file=/demo.tsx
I'm trying to generate a general structure of styles on scss with global breakpoints as media queries on a react project, It is possible to reuse an structure to follow media queries that we declare as global.
I'm a little bit lost on this one, any ideas?
When I mean global is that we can define the breakpoints at the root of the project and we can use any reference on the components.
Thanks in advance.
There are three ways that come to mind:
You can create a variables.scss file in which you can write the value of your breakpoints:
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
And the use the following variables in your scss:
#media only screen and (min-width: $sm) {
.container {
.max-width: 450px;
}
}
#media only screen and (min-width: $md) {
.container {
.max-width: 650px;
}
}
#media only screen and (min-width: $lg) {
.container {
.max-width: 900px;
}
}
#media only screen and (min-width: $xl) {
.container {
.max-width: 1000px;
}
}
Or you can the mentioned variables in your mixins.scss file to create some media query mixins:
#mixin small {
#media only screen and (min-width: $sm) {
#content;
}
}
And then, use these mixins in your main scss codes:
.container {
#include small {
max-width: 450px;
}
...
}
Or if the use cases of these media queries are limited (e.g. hiding and showing elements), you can define other mixins that include all the variations:
$displays: none inline inline-block block table table-cell table-row flex inline-flex;
$sizes: (
sm: $sm,
md: $md,
lg: $lg,
lg: $xl
);
#each $display in $displays:
#each $size-key $size in $sizes {
.display-#{size-key}-#{display} {
display: $display !important;
}
}
}
A note on importing files: I personally would import all my helper scss (variables, mixins, etc.) in a file called styles/index.scss in the root of my project among with normalizing and other global rules that I want to define, and then import this file in my other scss files:
// styles/index.scss
#import './variables.scss';
#import './mixins.scss';
...
// container.scss
#import './styles/index.scss';
What am I doing wrong here? The media query is straight from the Materialize Sass docs.
The error I am seeing:
#media #{$medium-and-down}
Undefined variable: "$medium-and-down"
#media #{$medium-and-down} {
.header-title {
color: red;
}
}
You are probably including the materialize style after your custom sass sheets
I want to test Polymer applications with non-Shadow-DOM capable browsers like Firefox, PhantomJS, and maybe others using WebDriver.
WebDriver commands for Firefox and PhantomJS fail when I use something like
driver.findElement(const By.cssSelector('* /deep/ #some-div'));
Are there some rules how to best translated/approximate these selectors when the polyfills can not be applied:
/deep/
::shadow
:host()
:host-context()
:content
I would like to create a function that translates such selectors automatically to non-shadow-DOM selectors for browsers that don't support them before sending the request and for that I need to know how to translate them.
Question is a bit old, but in case you haven't figured it out yourselves yet.
/deep/ (deprecated): As you said in your answer, just removing it should work in most of the cases.
::shadow (deprecated): Can also just be removed. Replacing it with > might not work if node which you are targeting is not an immediate child of host element's shadow root.
:host() pseudo classes is used to select custom element from inside shadow-dom, in non-supported browsers it will be equal to selecting parent from child element. Since we don't have parent selectors in css and you are writing js for conversion, you can identify tagName of host element and use it instead of :host selector. Something like below:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
:host-context(<selector>) pseudo class matches the host element if it or any of its ancestors matches <selector>. for example:
Below rule will apply on custom element only when it's a descendant of an element with the class .different.
:host-context(.different) {
color: red;
}
<body class="different">
<x-foo></x-foo>
</body>
It won't be very easy to replace this one with anything simple. Even webcomponents polyfill doesn't attempt it. I can't think of any css only way to achieve this.
::content targets distributed child nodes of host element, i.e. all elements which are picked to display using content selectors. Replacing ::content selectors with tagName of host elements should work here. i.e.
::content > h3 {
color: green;
}
/*replace it with*/
x-element h3 {
color: green;
}
Note that I have removed child selector > also from above, because in non-supported browsers after distribution h3 won't be a direct descendant of x-element anymore. Given the way content selector is used, I'd suggest removing child selector also wherever available.
/deep/ can just be removed
::shadow can be replaced by >
don't know about the others yet