Skip to content
This repository has been archived by the owner on Jun 27, 2024. It is now read-only.
/ styled-griddie Public archive

Automatically adds IE11 prefixes to CSS Grid properties in Styled Components.

License

Notifications You must be signed in to change notification settings

edxv/styled-griddie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Griddie for Styled Components

Automatically adds IE11 prefixes to CSS Grid properties in Styled Components.

Usage

  1. Install Griddie npm install styled-griddie.
  2. Wrap any elements you want Griddie to prefix with a Styled Components StyleSheetManager.
  3. Add griddie to the stylisPlugins prop.

Example

import React from 'react'
import { Styled } from './styles'
import { StyleSheetManager } from 'styled-components'
import griddie from 'styled-griddie'

const App = () => {
  return (
    <StyleSheetManager stylisPlugins={[griddie]}>
      <Styled.gridContainer>
        <Styled.gridItem>Hello, world!</Styled.gridItem>
      </Styled.gridContainer>
    </StyleSheetManager>
  )
}

export default App

Property support

Property Supported? Notes
display Supports grid and inline-grid
grid-template Supports repeat() function
grid-template-rows
grid-template-columns
grid-row See limitation #1, #2, #3 below.
grid-column See limitation #1, #2, #3 below.
grid-gap
grid-template-areas
grid-area
align-self
justify-self

Current limitations

  1. Autoplace will not work in IE. You must explicitly declare the placement of each grid item to support IE.

  2. Only shorthand syntax for grid-row and grid-column is supported. The following properties will not work in IE: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

  3. Negative values are not supported. Declaring grid-column: 1 / -1 to make a column span the full width will not work in IE.

Why?

Styled Components currently uses stylis to preprocess CSS, which does not autoprefix CSS Grid for IE as discussed in stylis/#119 and styled-components/#1184.

Credit

This package builds on the excellent work of @grncdr who shared the base of this plugin here.

About

Automatically adds IE11 prefixes to CSS Grid properties in Styled Components.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published