Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

creating a animation in :global scope animation's name is translated to local name in the keyframes #759

Closed
wende60 opened this issue Aug 23, 2018 · 6 comments

Comments

@wende60
Copy link

commented Aug 23, 2018

"css-loader": "^1.0.0",
"css-modules": "^0.3.0",

Do you want to request a feature or report a bug?

bug

What is the current behavior?
creating a animation in :global scope animation's name is translated to local name in the keyframes

If the current behavior is a bug, please provide the steps to reproduce.

compiling this css:

:global {
    .shake {
        animation: example 3s linear;
    }
    @keyframes :global(example) {
        0%   {background-color: red;}
        100% {background-color: green;}
    }
}

results in (files name is _core)

.shake {
    animation: example 3s linear;
}
@-webkit-keyframes _core__-global-example- {
    0%   {background-color: red;}
    100% {background-color: green;}
}

What is the expected behavior?
should result in

.shake {
    animation: example 3s linear;
}
@-webkit-keyframes example {
    0%   {background-color: red;}
    100% {background-color: green;}
}

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
using a mac OSX

  "devDependencies": {
    "autoprefixer": "^9.1.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-dynamic-import-node": "^2.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-enzyme": "^1.0.0-beta.1",
    "css-loader": "^1.0.0",
    "css-modules": "^0.3.0",
    "cssnano": "^4.0.5",
    "enzyme": "^3.4.1",
    "enzyme-adapter-react-16": "^1.2.0",
    "eslint": "^5.2.0",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-cypress": "^2.0.1",
    "eslint-plugin-react": "^7.10.0",
    "fetch-mock": "^6.5.2",
    "html-webpack-plugin": "^4.0.0-alpha",
    "ignore-styles": "^5.0.1",
    "jsdom": "^11.12.0",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "0.4.1",
    "mocha": "^5.2.0",
    "node-sass": "^4.9.0",
    "nyc": "^12.0.2",
    "postcss-loader": "^3.0.0",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^7.0.3",
    "sass-resources-loader": "^1.3.3",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "sinon": "^6.1.4",
    "sinon-chai": "^3.2.0",
    "style-loader": "^0.21.0",
    "svgo": "^1.0.5",
    "svgo-loader": "^2.1.0",
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-manifest-plugin": "^2.0.3"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^4.3.0",
    "country-data": "^0.0.31",
    "create-react-class": "^15.6.3",
    "file-loader": "^2.0.0",
    "google-map-react": "^1.0.5",
    "history": "^4.7.2",
    "html-loader": "^0.5.5",
    "mobile-detect": "^1.4.2",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.0",
    "react-addons-update": "^15.6.2",
    "react-day-picker": "^7.1.10",
    "react-dom": "^16.4.0",
    "react-inlinesvg": "0.8.1",
    "react-loadable": "^5.5.0",
    "react-modal": "^3.5.1",
    "react-pointable": "^1.1.3",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-slider": "^0.11.2",
    "react-toggle": "^4.0.2",
    "react-transition-group": "1.x",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-axios-middleware": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0",
    "remove": "^0.1.5",
    "sixt-dict": "^2.0.1",
    "smoothscroll": "^0.4.0",
    "url-loader": "^1.0.1"
  }
@vkuzma

This comment has been minimized.

Copy link

commented Aug 29, 2018

Same problem here, did you find a workaround?

@wende60

This comment has been minimized.

Copy link
Author

commented Aug 30, 2018

did something like

:global {
    .myclass {
        :local {
            animation: ...
        }
    }
}

so you have a global class and everything inside is local

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Oct 30, 2018

Problem on postcss-modules side, we can't do anything here, sorry. Feel free to create issue in postcss-modules repo

@jahed

This comment has been minimized.

Copy link

commented Jul 6, 2019

The fix I found is to do:

:global {
    .shake {
        animation: example 3s linear;
    }
}

@keyframes :global(example) {
    0%   {background-color: red;}
    100% {background-color: green;}
}

In general, any @ rules in :global seems to cause incorrect behaviour. Not sure if it's part of CSS Modules spec to behave like that or not.

@brendanfalkowski

This comment has been minimized.

Copy link

commented Jul 12, 2019

For reference, I found this issue while debugging and documented several approaches here: https://gravitydept.com/blog/keyframe-animations-in-css-modules

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Jul 13, 2019

@brendanfalkowski please open new issue with reproducible repo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.